IHG/pages/map/map.scss

page {
		height: 100%;
	}

	.map {
		height: 100%;
		background-color: #f9f9f9;
		display: flex;
		flex-direction: column;
	}

	.return-btn {
		position: fixed;
		right: 0;
		top: 927rpx;
		z-index: 99;
	}

	.home-bottom {
		height: 60rpx;
		background-color: #f9f9f9;
	}

	.hotel-list {
		width: 100%;
		background-color: #f9f9f9;
		padding: 32rpx 30rpx;
		padding-bottom: 200rpx;

		.hotel-list-item {
			width: 100%;
			margin-bottom: 20rpx;

			.wrap {
				width: 100%;
				height: 318rpx;
				position: relative;
				box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
				border-radius: 10rpx;

				.inner {
					width: 100%;
					height: 318rpx;
					border-radius: 10rpx;
					position: absolute;
					z-index: 2;
					top: 0;
					left: 0;

					.address-detail-main {
						position: absolute;
						left: 0;
						bottom: 30rpx;
						width: 100%;
						display: flex;
						align-items: flex-end;
						justify-content: space-between;

						.address-detail-main-left {
							position: absolute;
							left: 20rpx;

							.title {
								font-size: 32rpx;
								font-weight: bold;
								color: #FFFFFF;
							}

							.content {
								margin: 12rpx 0 20rpx;
								width: 92rpx;
								height: 34rpx;
								background: rgba(142, 160, 166, .6);
								border-radius: 17rpx;
								color: #ffffff;
								font-size: 22rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.bottom {
								display: flex;
								align-items: center;
								justify-content: flex-start;

								.bottom-left {
									font-size: 24rpx;
									font-weight: bold;
									color: #ffffff;
									margin-right: 6rpx;
								}

								.bottom-right {
									font-size: 32rpx;
									font-weight: bold;
									color: #ffffff;
								}
							}
						}

						.address-detail-main-right {
							position: absolute;
							right: 24rpx;
							width: 120rpx;
							height: 44rpx;
							background: #FF6300;
							box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
							border-radius: 22rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #ffffff;
							font-size: 28rpx;
						}
					}

					.address-detail-position {
						position: absolute;
						top: 22rpx;
						right: 24rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						color: #FFFFFF;
						font-size: 20rpx;
					}
				}
			}


		}
	}

	.search-detail {
		width: 100%;
		position: absolute;
		top: 88rpx;
		z-index: 999 !important;
		background-color: #ffffff;
		box-shadow: 0px 12rpx 16rpx 0px rgba(220, 222, 229, 0.4);
		padding: 20rpx 30rpx 20rpx;

		.partner {
			.partner-top {
				height: 88rpx;
				border-top: 2rpx solid #F0F0F0;
				border-bottom: 2rpx solid #F0F0F0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #333;
				font-size: 28rpx;
			}

			.partner-main {
				margin-top: 32rpx;

				::v-deep .uni-data-checklist .checklist-group .checklist-box {
					width: 26%;
				}

				::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner {
					width: 48rpx;
					height: 48rpx;
				}

				::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner .checkbox__inner-icon {
					top: 6rpx !important;
					left: 17rpx !important;
					height: 24rpx !important;
					width: 15rpx !important;
					border-right-color: #ff6200;
					border-bottom-color: #ff6200;
				}

				::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text {
					color: #666 !important;
					font-size: 24rpx !important;
				}

				::v-deep .checklist-text {
					font-size: 24rpx !important;
				}

				::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner {
					border-color: #EDEDED !important;
					background-color: #ffffff;
				}
			}
		}

		.search-detail-area {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;

			.areaTitle {
				width: 156rpx;
				height: 56rpx;
				background: #FFFFFF;
				border: 2rpx solid #EDEDED;
				border-radius: 28rpx;
				font-size: 28rpx;
				color: #666;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
				margin-bottom: 18rpx;

				&:nth-child(4n) {
					margin-right: 0;
				}
			}

			// .areaTitle-item {
			// 	width: 156rpx;
			// 	height: 56rpx;
			// 	background-color: #F1F1F1;
			// 	border-radius: 26rpx;
			// 	font-size: 24rpx;
			// 	color: #999;
			// 	display: flex;
			// 	justify-content: center;
			// 	align-items: center;
			// }
			.active-area {
				width: 156rpx;
				height: 56rpx;
				border-radius: 28rpx;
				background-color: #FF6200;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.search-detail-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 38rpx 0 20rpx;

			.search-detail-btn-left {
				flex: 1;
				height: 76rpx;
				background: rgba(237, 237, 237, .55);
				border-radius: 8rpx;
				color: #999999;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;

			}

			.search-detail-btn-right {
				flex: 1;
				height: 76rpx;
				background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
				border-radius: 8rpx;
				color: #FFFFFF;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 22rpx;
				font-weight: bold;
			}

		}

		::v-deep .u-input {
			width: 690rpx !important;
			height: 68rpx !important;
			background: #F1F1F1;
			border-radius: 74rpx;
		}

		::v-deep .u-input__content__field-wrapper {
			padding-left: 36rpx;
		}
	}


	.search-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.search {
		position: relative;
		flex: none;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 12rpx 16rpx 0px rgba(220, 222, 229, 0.4);
		display: flex;
		flex-direction: column;
		align-items: inherit;
		justify-content: space-between;

		.search-loupe {
			flex: none;
			width: 60rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 50%;
			border: 2rpx solid #EDEDED;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 16rpx;
		}

		.search-area-all {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.search-areaClick {
				padding: 12rpx 22rpx;
				height: 52rpx;
				background: #FFFFFF;
				border-radius: 26rpx;
				border: 2rpx solid #FF6200;
				font-weight: 500;
				color: #FF6200;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 16rpx;

				text {
					margin-right: 8rpx;
				}
			}

			.search-area {
				padding: 12rpx 22rpx;
				height: 52rpx;
				background: #FFFFFF;
				border-radius: 26rpx;
				border: 2rpx solid #EDEDED;
				font-weight: 500;
				color: #666666;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 16rpx;

				text {
					margin-right: 8rpx;
				}
			}
		}

	}

	.address-nav {
		position: absolute;
		width: 100%;
		bottom: 34rpx;
		padding: 0 8px;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: space-between;
		overflow-x: scroll;

		.address-nav-btn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		.address-nav-button{
			position: fixed;
			bottom: 450rpx;
			
			&:first-child{
				left:16rpx;
			}
			&:last-child{
				right:16rpx;
			}
		}
	}

	.address {
		flex: 1;
		position: relative;
		

		.address-detail {
			display: inline-block;
			position: relative;
			flex: none;
			width: 248px;
			height: 318rpx;
			border-radius: 10rpx;
			margin-right: 8px;

			&:last-child {
				margin-right: 0rpx;
			}
			
			.mark{
				height: inherit;
				width: inherit;
				
				image{
					width: 100%;
					height:100%;
					border-radius: 10rpx;
				}
			}

			.inner {
				width: 100%;
				height: inherit;
				border-radius: 10rpx;
				position: absolute;
				z-index: 2;
				top: 0;
				left: 0;

				.address-detail-main {
					position: absolute;
					left: 0;
					bottom: 30rpx;
					width: 100%;
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					

					.address-detail-main-left {
						position: absolute;
						left: 20rpx;

						.title {
							font-size: 32rpx;
							font-weight: bold;
							color: #FFFFFF;
						}

						.content {
							margin: 12rpx 0 20rpx;
							width: 92rpx;
							height: 34rpx;
							background: rgba(142, 160, 166, .6);
							border-radius: 17rpx;
							color: #ffffff;
							font-size: 22rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.bottom {
							display: flex;
							align-items: center;
							justify-content: flex-start;

							.bottom-left {
								font-size: 24rpx;
								font-weight: bold;
								color: #ffffff;
								margin-right: 6rpx;
							}

							.bottom-right {
								font-size: 32rpx;
								font-weight: bold;
								color: #ffffff;
							}
						}
					}

					.address-detail-main-right {
						position: absolute;
						right: 24rpx;
						width: 120rpx;
						height: 44rpx;
						background: #FF6300;
						box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
						border-radius: 22rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #ffffff;
						font-size: 28rpx;
					}

				}

				.address-detail-position {
					position: absolute;
					top: 22rpx;
					right: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					color: #FFFFFF;
					font-size: 20rpx;
				}
			}


		}
	}