Homestay_manage_app/pages/home3/home3.vue

<template>
	<view class="container">
		<view class="header2" :style="{ height: customBarH * 2 + 'rpx', paddingTop: statusBarH * 2 + 'rpx' }" v-if="headerType">
			<view class="title">靖安乡村民宿</view>
		</view>
		<!-- 顶部图片区域 -->
		<view class="header">
			<img mode="aspectFill" src="https://chtech.ncjti.edu.cn/hotelReservation/image/14.png" />
			<img class="img" src="https://chtech.ncjti.edu.cn/hotelReservation/image/16.png" />
			<img class="img2" src="https://chtech.ncjti.edu.cn/hotelReservation/image/17.png" />
			<view class="header_msg">有一种生活叫靖安</view>
		</view>

		<view class="content">
			<!-- 条件筛选区域 -->
			<view class="search">
				<!-- 选择乡镇区域 -->
				<view class="search_town" :class="{ active: town }" @click="handleOpen">
					{{ town ? town : '请选择乡镇' }}
					<img src="../../static/index/right2.png" />
				</view>
				<!-- 关键词搜索和民宿级别区域 -->
				<view class="search_center">
					<view class="center_input">
						<input type="text" v-model="keywords" placeholder="民宿/地名/关键词" placeholder-style="color:#A6A6A6;font-weight:400;" />
					</view>
					<img class="img" src="../../static/index/right2.png" />
					|
					<view class="center_level" :class="{ active: level }" @click="handleChooseLv">{{ level ? level : '请选择民宿级别' }}</view>
					<img class="img2" src="../../static/index/right2.png" @click="handleChooseLv" />
				</view>
				<!-- 查找按钮区域 -->
				<view class="search_btn" @click="handleSearch">查找</view>
			</view>
			<!-- 图标列表区域 -->
			<!-- <view class="icons">
				<view class="icon_item" @click="handleTest">
					<view class="item_top color">
						<img src="../../static/index/icon.png" />
					</view>
					<view class="item_bottom">推文</view>
				</view>

				<view class="icon_item" @click="handleTest">
					<view class="item_top color2">
						<img class="img2" src="../../static/index/icon2.png" />
					</view>
					<view class="item_bottom">周边</view>
				</view>

				<view class="icon_item" @click="handleGoSetMeal">
					<view class="item_top color3">
						<img class="img3" src="../../static/index/icon3.png" />
					</view>
					<view class="item_bottom">套餐</view>
				</view>

				<view class="icon_item" @click="handleTest">
					<view class="item_top color4">
						<img src="../../static/index/icon4.png" />
					</view>
					<view class="item_bottom">招商</view>
				</view>
				<view class="icon_item" @click="handleTest">
					<view class="item_top color5">
						<img src="../../static/index/icon5.png" />
					</view>
					<view class="item_bottom">其他</view>
				</view>
			</view> -->

			<!-- 轮播图区域 -->
			<swiper class="swiper" indicator-dots circular indicator-color="#BBD8FE" indicator-active-color="#1E7DFB" autoplay interval="3000">
				<swiper-item v-for="(ele, index) in townList" :key="index">
					<view class="swiper_item">
						<view class="item_box" v-for="(swi, index2) in ele" :key="index2" @click="handleChooseTown2(swi.name)">
							<img v-if="index === 0 && index2 === 0" src="https://chtech.ncjti.edu.cn/hotelReservation/image/1.png" mode="aspectFill" />
							<img v-if="index === 0 && index2 === 1" src="https://chtech.ncjti.edu.cn/hotelReservation/image/2.png" mode="aspectFill" />
							<img v-if="index === 0 && index2 === 2" src="https://chtech.ncjti.edu.cn/hotelReservation/image/3.png" mode="aspectFill" />
							<img v-if="index === 1 && index2 === 0" src="https://chtech.ncjti.edu.cn/hotelReservation/image/4.png" mode="aspectFill" />
							<img v-if="index === 1 && index2 === 1" src="https://chtech.ncjti.edu.cn/hotelReservation/image/5.png" mode="aspectFill" />
							<img v-if="index === 1 && index2 === 2" src="https://chtech.ncjti.edu.cn/hotelReservation/image/6.png" mode="aspectFill" />
							<img v-if="index === 2 && index2 === 0" src="https://chtech.ncjti.edu.cn/hotelReservation/image/7.png" mode="aspectFill" />
							<img v-if="index === 2 && index2 === 1" src="https://chtech.ncjti.edu.cn/hotelReservation/image/8.png" mode="aspectFill" />
							<img v-if="index === 2 && index2 === 2" src="https://chtech.ncjti.edu.cn/hotelReservation/image/9.png" mode="aspectFill" />
							<img v-if="index === 3 && index2 === 0" src="https://chtech.ncjti.edu.cn/hotelReservation/image/10.png" mode="aspectFill" />
							<img v-if="index === 3 && index2 === 1" src="https://chtech.ncjti.edu.cn/hotelReservation/image/11.png" mode="aspectFill" />
							<img v-if="index === 3 && index2 === 2" src="https://chtech.ncjti.edu.cn/hotelReservation/image/12.png" mode="aspectFill" />
							<view class="box_town">{{ swi.name }}</view>
							<view class="box_count">剩{{ swi.residueNumber }}间</view>
						</view>
					</view>
				</swiper-item>
			</swiper>

			<!-- 民宿列表区域 -->
			<view class="body">
				<!-- 精选攻略区域 -->
				<view class="body_top">
					<view class="circle"></view>
					<view class="circle color"></view>
					<view class="top_title">精选攻略 .</view>
					<view class="top_msg">宝藏分享社区</view>
					<view class="top_more" @click="handleTest">
						更多
						<img src="https://chtech.ncjti.edu.cn/hotelReservation/image/13.png" />
					</view>
				</view>
				<view class="body_strategy" @click="handleGoDetail">
					<img mode="aspectfill" src="https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1933617026前台.jpg" />
					<view class="strategy_info">
						<view class="info_title">这里不是瑞士！是江西靖安！</view>
						<!-- <view class="info_time">2023-09-04 15:15:15</view> -->
						<view class="info_tags">
							<view class="tag">南昌周边游</view>
							<view class="tag">江西旅游</view>
							<view class="tag">靖安民宿</view>
						</view>
						<view class="info_desc">
							南昌周边度假的宝藏民宿🏠享受山野间森呼吸🌿很适合逃离城市奔向大自然的快乐躺平☁️阴雨绵绵也抵挡不住它的美☔心向山野 尽请赴约 🍃一房一景 设计独特
							🪐室内有着巨大落地窗🚪地址⛺️宜春市靖安县宁福线中源乡合港村南段组10号交通🚘南昌自驾开车约2H风格⛱民宿是新中式生活美学的格调
							非常高级还配备中餐厅、商务会议室、茶室、休闲娱乐包厢等🎞适合情侣、家庭自驾游玩
							💕🔆附近景区游玩推荐：北岭花海、九岭瀑布、九门楼、九岭尖云海、日出、冰雪、风车、草甸、露营、游客中心、清水平台观景、河道游船、观赏荷花、采莲、客家民俗、农俗活动及客家美食、小吃、果脯、高山滑雪、梯田等
						</view>
					</view>
				</view>
				<!-- 精选推荐区域 -->
				<view class="body_top">
					<view class="circle"></view>
					<view class="circle color"></view>
					<view class="top_title">精选推荐 .</view>
					<view class="top_msg">线上订民宿，住着玩个遍</view>
					<view class="top_more" @click="handleTest">
						更多
						<img src="https://chtech.ncjti.edu.cn/hotelReservation/image/13.png" />
					</view>
				</view>
				<!-- 列表区域 -->
				<view class="body_list">
					<!-- 每一个民宿区域 -->
					<view class="list_item" v-for="item in hotelList" :key="item.id" @click="goPageDetail(item)">
						<image class="item-img" :src="item.coverImg" mode="scaleToFill"></image>
						<view class="descrition">
							<text class="title">{{ item.hotel_name }}</text>
							<text class="type">{{ item.hTypeName }}</text>
							<text class="distance">距您直线{{ item.distance }}公里</text>
							<view class="detail">
								<img class="img" src="../../static/index/hotel.png" />
								<view class="price">
									<text class="txt1">¥{{ item.min_price }}</text>
									<text class="txt2">起</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 选择乡镇弹窗区域 -->
		<uni-popup ref="popup" type="center">
			<view class="popup_body">
				<view class="body_header">
					<img src="../../static/my/popup_title.png" />
					<view class="header_title">请选择乡镇</view>
					<img src="../../static/my/popup_title.png" />
				</view>
				<view class="body_content">
					<view class="content_box" v-for="(item, index) in popList" :key="index" @click="handleChooseTown(item.name)">
						<img v-if="index === 0" src="https://chtech.ncjti.edu.cn/hotelReservation/image/1.png" mode="aspectFill" />
						<img v-if="index === 1" src="https://chtech.ncjti.edu.cn/hotelReservation/image/2.png" mode="aspectFill" />
						<img v-if="index === 2" src="https://chtech.ncjti.edu.cn/hotelReservation/image/3.png" mode="aspectFill" />
						<img v-if="index === 3" src="https://chtech.ncjti.edu.cn/hotelReservation/image/4.png" mode="aspectFill" />
						<img v-if="index === 4" src="https://chtech.ncjti.edu.cn/hotelReservation/image/5.png" mode="aspectFill" />
						<img v-if="index === 5" src="https://chtech.ncjti.edu.cn/hotelReservation/image/6.png" mode="aspectFill" />
						<img v-if="index === 6" src="https://chtech.ncjti.edu.cn/hotelReservation/image/7.png" mode="aspectFill" />
						<img v-if="index === 7" src="https://chtech.ncjti.edu.cn/hotelReservation/image/8.png" mode="aspectFill" />
						<img v-if="index === 8" src="https://chtech.ncjti.edu.cn/hotelReservation/image/9.png" mode="aspectFill" />
						<img v-if="index === 9" src="https://chtech.ncjti.edu.cn/hotelReservation/image/10.png" mode="aspectFill" />
						<img v-if="index === 10" src="https://chtech.ncjti.edu.cn/hotelReservation/image/11.png" mode="aspectFill" />
						<img v-if="index === 11" src="https://chtech.ncjti.edu.cn/hotelReservation/image/12.png" mode="aspectFill" />
						<view class="box_town">{{ item.name }}</view>
						<view class="box_count">剩{{ item.residueNumber }}间</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 用户定位经度
			myLng: 0,
			// 用户定位纬度
			myLat: 0,
			// 是否显示距离差
			showdDistance: false,
			// 搜索框绑定数据
			keywords: '',
			// 当前页
			page: 1,
			// 每页多少条
			rows: 6,
			// 总条数
			total: null,
			// 地区数组
			placeList: [
				{
					name: '靖安县'
				}
			],
			// 当前选择地区索引
			placeIndex: 0,
			// 选择乡镇弹窗数据
			popList: [],
			// 民宿列表数组
			hotelList: [],
			// 当前乡镇
			town: '',
			level: '',
			townList: [],
			headerType: false,
			// 状态栏高度
			statusBarH: 0,
			// 胶囊按钮栏高度
			customBarH: 0
		}
	},
	created() {
		// 获取系统信息
		uni.getSystemInfo({
			success: (e) => {
				// 获取状态栏高度
				this.statusBarH = e.statusBarHeight + 10
				// // 获取菜单按钮栏高度
				let custom = uni.getMenuButtonBoundingClientRect()
				this.customBarH = custom.height + 10
			}
		})
	},
	mounted() {
		// 开启转发功能
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		})
	},
	onReachBottom() {
		if (this.hotelList.length < this.total) {
			this.page++
			this.getHotelList()
		} else {
			uni.showToast({
				title: '没有更多数据了',
				icon: 'none'
			})
		}
	},
	onPageScroll(e) {
		if (e.scrollTop > 100) {
			this.headerType = true
		} else {
			this.headerType = false
		}
	},
	onLoad() {
		this.getLocation()
		this.getResidueCount()
	},
	methods: {
		// 获取用户当前位置
		getLocation() {
			uni.getSetting({
				success: (res) => {
					if (!res.authSetting['scope.userLocation']) {
						uni.authorize({
							scope: 'scope.userLocation',
							success: (res) => {
								// 授权成功
								uni.getLocation({
									type: 'gcj02',
									success: (res) => {
										this.myLat = res.latitude
										this.myLng = res.longitude
										this.showdDistance = true
										this.getHotelList()
									}
								})
							},
							fail: () => {
								uni.showModal({
									content: '获取定位权限失败将会影响使用部分功能，是否去设置打开？',
									confirmText: '确认',
									cancelText: '取消',
									success: (res) => {
										if (res.confirm) {
											uni.openSetting({
												success: (res) => {
													console.log(res)
													this.getLocation()
												}
											})
										} else {
											this.showdDistance = false
											this.getHotelList()
											uni.showToast({
												title: '获取定位权限失败',
												icon: 'none'
											})
										}
									}
								})
							}
						})
					} else {
						uni.getLocation({
							type: 'gcj02',
							success: (res) => {
								this.myLat = res.latitude
								this.myLng = res.longitude
								this.showdDistance = true
								this.getHotelList()
							}
						})
					}
				}
			})
		},
		handleGoDetail() {
			uni.navigateTo({
				url: `/pages/strategyDetatil/strategyDetatil`
			})
		},
		// 获取民宿列表
		async getHotelList() {
			const res = await this.$myRequest({
				url: '/mhotel/ahphomePage.action',
				data: {
					// queryValue: this.keywords,
					page: this.page,
					rows: this.rows,
					type: 3,
					// hotel_township: this.placeList[this.placeIndex].id || '',
					userId: uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo').id : ''
				}
			})
			// console.log(res)
			if (res.code === 200) {
				this.hotelList = [...this.hotelList, ...res.data.pageList]
				this.total = res.data.total

				// 如果定位成功则获取和民宿之间的距离
				if (this.showdDistance && this.hotelList.length) {
					this.hotelList.forEach((ele) => {
						let lat = ele.hpositionWens.split(',')[0]
						let lng = ele.hpositionWens.split(',')[1]
						ele.distance = this.calculateDistance(lat, lng)
					})
				}
			}
		},
		handleOpen() {
			this.$refs.popup.open()
			// this.getResidueCount()
		},
		// 获取乡镇
		async getResidueCount() {
			const res = await this.$myRequest({
				url: '/mhotel/ahpgetResidueCount.action'
			})
			// console.log(res)
			if (res.code === 200) {
				let temNum = 0
				res.data.forEach((ele) => {
					temNum += ele.residueNumber
				})
				res.data.unshift({
					name: '靖安县',
					residueNumber: temNum
				})
				this.popList = res.data
				this.townList = this.changeList(this.popList, 3)
			}
		},
		// 变成二维数组
		changeList(arr, num) {
			let newArr = []
			const total = Math.ceil(arr.length / num)
			for (let i = 0; i < total; i++) {
				let a = arr.slice(i * num, (i + 1) * num)
				newArr.push(a)
			}
			return newArr
		},
		// 弹窗点击选择乡镇地址回调
		handleChooseTown(name) {
			this.town = name
			this.$refs.popup.close()
		},
		handleChooseTown2(name) {
			// this.town = name
			uni.navigateTo({
				url: `/pages/home/home?town=${name}&keywords=${this.keywords}&level=${this.level}`
			})
		},
		handleChooseLv() {
			uni.showActionSheet({
				itemList: ['白金', '金宿', '银宿'],
				success: (res) => {
					if (res.tapIndex === 0) {
						this.level = '白金'
					} else if (res.tapIndex === 1) {
						this.level = '金宿'
					} else if (res.tapIndex === 2) {
						this.level = '银宿'
					}
				}
			})
		},
		handleSearch() {
			uni.navigateTo({
				url: `/pages/home/home?town=${this.town}&keywords=${this.keywords}&level=${this.level}`
			})
		},
		handleTest() {
			uni.showToast({
				title: '功能开发中',
				icon: 'none',
				mask: true
			})
		},
		handleGoSetMeal() {
			uni.navigateTo({
				url: '/pages/setMeal/setMeal'
			})
		},
		goPageDetail(item) {
			uni.navigateTo({
				url: `/pages/detail/detail?id=${item.id}&distance=${item.distance}`
			})
		},
		// 计算两个点之间的距离
		calculateDistance(lat, lng) {
			let centerLat = lat
			let centerLng = lng

			let red1 = (this.myLat * Math.PI) / 180.0
			let red2 = (centerLat * Math.PI) / 180.0
			let a = red1 - red2
			let b = (this.myLng * Math.PI) / 180.0 - (centerLng * Math.PI) / 180.0
			let R = 6378137
			let distance = R * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(red1) * Math.cos(red2) * Math.pow(Math.sin(b / 2), 2)))
			let res = (distance / 1000).toFixed(2) * 1

			return res
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-y: auto;
	background-color: #f2f2f2;

	.header {
		position: relative;
		height: 505rpx;

		img {
			width: 100%;
			height: 100%;
			border-radius: 0 0 20rpx 20rpx;
		}

		.img {
			position: absolute;
			top: 135rpx;
			left: 61rpx;
			width: 160rpx;
			height: 40rpx;
		}

		.img2 {
			position: absolute;
			top: 193rpx;
			left: 38rpx;
			width: 268rpx;
			height: 88rpx;
		}

		.header_msg {
			position: absolute;
			top: 283rpx;
			left: 38rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 291rpx;
			height: 65rpx;
			font-size: 31rpx;
			color: #fff;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 0.2);
		}
	}

	.header2 {
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		text-align: center;
		background-color: #fff;

		.title {
			font-size: 34rpx;
		}
	}

	.content {
		z-index: 1;
		margin: -102rpx auto 0;
		width: 690rpx;
		border-radius: 12rpx 12rpx 0 0;
		background-color: #f2f2f2;

		.search {
			box-sizing: border-box;
			padding: 0 28rpx;
			width: 690rpx;
			height: 353rpx;
			border-radius: 12rpx;
			background-color: #fff;

			.search_town {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 89rpx;
				color: #a6a6a6;
				font-size: 32rpx;
				border-bottom: 1rpx solid #e6e6e6;

				img {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.active {
				font-weight: bold;
				color: #000;
			}

			.search_center {
				display: flex;
				align-items: center;
				height: 89rpx;
				color: #a6a6a6;
				font-size: 28rpx;

				img {
					width: 40rpx;
					height: 40rpx;
				}

				.center_input {
					margin-right: 12rpx;
					width: 250rpx;
					color: #000;
					font-weight: bold;
				}

				.img {
					margin-right: 12rpx;
				}

				.center_level {
					flex: 1;
					margin-left: 24rpx;
					font-weight: 400;
				}

				.active {
					font-weight: bold;
					color: #000;
				}

				.img2 {
					margin-left: auto;
				}
			}

			.search_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 23rpx;
				width: 623rpx;
				height: 100rpx;
				border-radius: 57rpx;
				color: #fff;
				font-size: 32rpx;
				background: linear-gradient(90deg, #2697ef 0%, #5e35eb 100%);
			}
		}

		.icons {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 20rpx auto;
			width: 690rpx;
			height: 180rpx;
			border-radius: 12rpx;
			background-color: #fff;

			.icon_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 20%;

				.item_top {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;

					img {
						width: 28rpx;
						height: 27rpx;
					}

					.img2 {
						width: 40rpx;
						height: 25.5rpx;
					}
					.img3 {
						width: 31rpx;
						height: 21rpx;
					}
				}

				.color {
					background-color: #d8e8e8;
				}

				.color2 {
					background-color: #c2f2d5;
				}
				.color3 {
					background-color: #f7d4ba;
				}
				.color4 {
					background-color: #fae1e2;
				}
				.color5 {
					background-color: #d0e0f2;
				}

				.item_bottom {
					margin-top: 6rpx;
					font-size: 28rpx;
				}
			}
		}

		.swiper {
			margin: 20rpx auto 0;
			width: 690rpx;
			height: 214rpx;
			border-radius: 12rpx;
			background-color: #fff;

			.swiper_item {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 100%;
				height: 100%;

				.item_box {
					position: relative;
					width: 195rpx;
					height: 128rpx;
					border-radius: 12rpx;
					color: #fff;

					img {
						width: 195rpx;
						height: 128rpx;
						border-radius: 12rpx;
					}

					.box_town {
						position: absolute;
						top: 30rpx;
						left: 0;
						right: 0;
						text-align: center;
						font-size: 28rpx;
						font-weight: bold;
					}

					.box_count {
						position: absolute;
						top: 75rpx;
						left: 0;
						right: 0;
						text-align: center;
						font-size: 18rpx;
					}
				}
			}
		}

		.body {
			margin: 0 auto;
			width: 690rpx;

			.body_top {
				display: flex;
				align-items: center;
				height: 89rpx;

				.circle {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					background-color: #485bed;
				}

				.color {
					margin-left: -15rpx;
					opacity: 0.5;
					background-color: #fff;
				}

				.top_title {
					margin-left: 15rpx;
					font-size: 32rpx;
					font-weight: bold;
				}

				.top_msg {
					margin-top: 5rpx;
					margin-left: 12rpx;
					color: #666666;
					font-size: 24rpx;
				}

				.top_more {
					display: flex;
					align-items: center;
					margin-left: auto;
					color: #a6a6a6;
					font-size: 24rpx;

					img {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.body_strategy {
				display: flex;
				box-sizing: border-box;
				padding: 20rpx;
				margin-bottom: 10rpx;
				width: 690rpx;
				height: 235rpx;
				border-radius: 12rpx;
				background-color: #fff;

				img {
					width: 253rpx;
					height: 190rpx;
					border-radius: 7rpx;
				}

				.strategy_info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 20rpx;
					width: 500rpx;
					height: 170rpx;
					font-size: 24rpx;
					color: #666666;
					overflow: hidden;

					.info_title {
						font-size: 32rpx;
						font-weight: bold;
						color: #000;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.info_time {
					}

					.info_tags {
						display: flex;

						.tag {
							margin-right: 10rpx;
							box-sizing: border-box;
							padding: 0 5rpx;
							height: 35rpx;
							color: #1e7dfb;
							font-size: 20rpx;
							border-radius: 30rpx;
							border: 1rpx solid #1e7dfb;
						}
					}

					.info_desc {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
				}
			}

			.body_list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.list_item {
					width: 335rpx;
					box-sizing: border-box;
					margin-bottom: 20rpx;

					.item-img {
						width: 100%;
						height: 223rpx;
						border-radius: 18rpx 18rpx 0 0;
						box-sizing: border-box;
					}

					.descrition {
						display: flex;
						flex-direction: column;
						width: 100%;
						border-radius: 0 0 18rpx 18rpx;
						box-sizing: border-box;
						background: rgba(255, 255, 255, 1);
						margin-top: -10rpx;

						.title {
							font-size: 28rpx;
							font-weight: 600;
							padding: 20rpx 20rpx 10rpx;
							color: rgba(0, 0, 0, 1);
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.type {
							padding: 5rpx 20rpx;
							height: 40rpx;
							font-size: 24rpx;
							color: #a6a6a6;
						}

						.distance {
							padding: 10rpx 20rpx;
							font-size: 24rpx;
							color: #a6a6a6;
						}

						.detail {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
							padding: 0 20rpx 20rpx 20rpx;
							color: rgba(0, 0, 0, 1);

							.img {
								width: 40rpx;
								height: 40rpx;
							}

							.price {
								.txt1 {
									font-size: 36rpx;
									font-weight: 600;
									color: rgba(255, 87, 51, 1);
								}

								.txt2 {
									font-size: 24rpx;
									font-weight: 400;
									color: #a6a6a6;
								}
							}

							.score {
								font-size: 24rpx;
								font-weight: 400;
								padding-top: 10rpx;
								color: rgba(166, 166, 166, 1);
							}
						}
					}
				}
			}
		}
	}

	.popup_body {
		width: 618rpx;
		height: 687rpx;
		border-radius: 21rpx;
		background-color: #fff;

		.body_header {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			height: 113rpx;
			border-bottom: 1rpx solid #e6e6e6;

			img {
				width: 16rpx;
				height: 16rpx;
			}

			.header_title {
				margin: 0 10rpx;
				font-size: 34rpx;
				font-weight: bold;
				color: #0f194d;
			}
		}
		.body_content {
			display: grid;
			grid-template-columns: repeat(auto-fill, 160rpx);
			gap: 28rpx;
			box-sizing: border-box;
			padding: 26rpx 40rpx 50rpx;

			.content_box {
				position: relative;
				width: 160rpx;
				height: 105rpx;
				color: #fff;
				border-radius: 10rpx;

				img {
					width: 160rpx;
					height: 105rpx;
					border-radius: 10rpx;
				}

				.box_town {
					position: absolute;
					top: 20rpx;
					left: 0;
					right: 0;
					text-align: center;
					font-size: 28rpx;
					font-weight: bold;
				}

				.box_count {
					position: absolute;
					top: 62rpx;
					left: 0;
					right: 0;
					text-align: center;
					font-size: 18rpx;
				}
			}
		}
	}
}
</style>