IHG/pages/map/map.vue

<template>
	<view class="map">
		<MyNav title="IHG地图" bgColor="" :backIcon="false"></MyNav>
		<!-- 查询 -->
		<view class="search" v-if="true">
			<view class="search-top" style="padding: 16rpx 30rpx 0rpx;margin-bottom: 20rpx;">
				<view class="search-loupe" @click="isopenSearch = !isopenSearch">
					<image style="width: 32rpx;height: 32rpx;" src="/static/icon/search02.png" mode=""></image>
				</view>
				<view class="search-area-all">
					<view :class="isSelectArea?'search-area':'search-areaClick'" @click="openArea">
						<text>地区</text>
						<image v-if="isSelectArea" style="width: 16rpx;height: 10rpx;" src="/static/icon/down01.png"
							mode="">
						</image>
						<image v-if="!isSelectArea" style="width: 16rpx;height: 10rpx;" src="/static/icon/up01.png"
							mode="">
						</image>
					</view>
					<view :class="isSelectBrand?'search-area':'search-areaClick'" @click="openBrand">
						<text>品牌</text>
						<image v-if="isSelectBrand" style="width: 16rpx;height: 10rpx;" src="/static/icon/down01.png"
							mode="">
						</image>
						<image v-if="!isSelectBrand" style="width: 16rpx;height: 10rpx;" src="/static/icon/up01.png"
							mode="">
						</image>
					</view>
					<view class="search-area" :class="isSelectSift?'search-area':'search-areaClick'" @click="openSift">
						<text>更多筛选</text>
						<image v-if="isSelectSift" style="width: 16rpx;height: 10rpx;" src="/static/icon/down01.png"
							mode="">
						</image>
						<image v-if="!isSelectSift" style="width: 16rpx;height: 10rpx;" src="/static/icon/up01.png"
							mode="">
						</image>
					</view>
				</view>
				<image style=" flex: none; width: 52rpx;height: 46rpx;" src="/static/icon/vip.png" mode=""></image>
			</view>
			<view class="search-detail" v-if="isopenSearch">
				<u-input placeholder="输入酒店/城市名称搜索酒店" border='none'>
					<template slot="suffix" style='margin-right:40rpx;'>
						<u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
							height="32rpx"></u-image>
					</template>
				</u-input>
			</view>
			<!-- 选择地区 -->
			<view class="search-detail" v-if="!isSelectArea">
				<view class="search-detail-area">
					<view class="areaTitle" v-for="(item,index) in areaList" :key="index" @click="checked(index)">
						<view :class="{'active-area':isActive === index}">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="search-detail-btn">
					<view class="search-detail-btn-left">
						<text>取消</text>
					</view>
					<view class="search-detail-btn-right">
						<text>确认</text>
					</view>
				</view>
			</view>
			<!-- 选择品牌-->
			<view class="search-detail" v-if="!isSelectBrand">
				<view class="search-detail-area">
					<view class="areaTitle" v-for="(item,index) in brandList" :key="index" @click="checked(index)">
						<view :class="{'active-area':isActive === index}">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="search-detail-btn">
					<view class="search-detail-btn-left">
						<text>取消</text>
					</view>
					<view class="search-detail-btn-right">
						<text>确认</text>
					</view>
				</view>
			</view>
			<!-- 筛选-->
			<view class="search-detail" v-if="!isSelectSift">
				<view class="partner">
					<view class="partner-top" @click="selectPartner">
						<text>合作伙伴</text>
						<image v-if="isPartner" style=" width: 20rpx; height: 12rpx; " src="/static/icon/up02.png"
							mode=""></image>
						<image v-if="!isPartner" style=" width: 20rpx; height: 12rpx; " src="/static/icon/down02.png"
							mode=""></image>
					</view>
					<view class="partner-main" v-if="isPartner">
						<uni-data-checkbox multiple v-model="value" :localdata="partner" @change="change">
						</uni-data-checkbox>
					</view>

					<view class="partner-top" style="border-top: none;" @click="selectJoin">
						<text>加盟品牌</text>
						<image v-if="isJoin" style=" width: 20rpx; height: 12rpx; " src="/static/icon/up02.png" mode="">
						</image>
						<image v-if="!isJoin" style=" width: 20rpx; height: 12rpx; " src="/static/icon/down02.png"
							mode=""></image>
					</view>
					<view class="partner-main" v-if="isJoin">
						<uni-data-checkbox multiple v-model="value" :localdata="partner" @change="change">
						</uni-data-checkbox>
					</view>

					<view class="search-detail-btn">
						<view class="search-detail-btn-left">
							<text>取消</text>
						</view>
						<view class="search-detail-btn-right">
							<text>确认</text>
						</view>
					</view>
				</view>

			</view>

		</view>
		<view class="address" v-if="isShow">
			<view style="height:1232rpx;">
				<hch-position ref="map" :markers="markers" @moveToMarkId="moveToMarkId"/>
			</view>
			<view class="address-nav" style="overflow-x: visible;">
				<view class="address-nav-btn">
					<view class="" @click="goLocation">
						<image style="width: 84rpx;height: 84rpx;" src="/static/icon/location.png" mode=""></image>
					</view>
					<view class="" @click="goHotelList">
						<image style="width: 84rpx;height: 84rpx;" src="/static/icon/list.png" mode=""></image>
					</view>
				</view>
				<view id="switch-container"
					style="width: 100%; overflow-x: scroll; display: none;align-items: center;justify-content: space-between;">	
				</view>
				<scroll-view style="width: calc(100% + 32rpx);height:318rpx;white-space: nowrap;" :scroll-x="true" :scroll-left="scrolls.scrollX" :scroll-with-animation="true">
					<view style="width: 16rpx;display: inline-block;"></view>
					<view class="address-detail" v-for="(item,index) in hotelList" :key="index">
						<view class="mark">
							<image style=""
								:src="item.bg_img" mode="aspectFill"></image>
						</view>
						<view class="inner">
							<view class="address-detail-main">
								<view class="address-detail-main-left">
									<text class="title">{{item.name}}</text>
									<view class="content">
										<text>{{item.label}}</text>
									</view>
									<view class="bottom">
										<text class="bottom-left">￥</text>
										<text class="bottom-right">{{item.min_price}}起</text>
									</view>
								</view>
								<view class="address-detail-main-right" @click="goBook(item.id)">
									<text>预订</text>
								</view>
							</view>
							<view class="address-detail-position">
								<image style="width: 18rpx;height: 22rpx;" src="/static/icon/address02.png" mode="">
								</image>
								<text style="margin-left:4rpx ;">{{item.distance}}km</text>
							</view>
						</view>
					</view>
					<view style="width: 1rpx;display: inline-block;"></view>
				</scroll-view>
			</view>
		</view>

		<!-- 酒店列表 -->
		<view class="hotel-list" v-if="!isShow">
			<view class="hotel-list-item" v-for="(item,index) in hotelList" :key="index" @click="goBook(item.id)">
				<view class="wrap">
					<view class="mark">
						<image style="width: 694rpx;height: 318rpx;border-radius: 10rpx;" :src="item.bg_img"
							mode=""></image>
					</view>
					<view class="inner">
						<view class="address-detail-main">
							<view class="address-detail-main-left">
								<text class="title">{{item.name}}</text>
								<view class="content">
									<text>{{item.label}}</text>
								</view>
								<view class="bottom">
									<text class="bottom-left">￥</text>
									<text class="bottom-right">{{item.min_price}}起</text>
								</view>
							</view>
							<view class="address-detail-main-right" @click.stop="goBook(item.id)">
								<text>预订</text>
							</view>
						</view>
						<view class="address-detail-position">
							<image style="width: 18rpx;height: 22rpx;" src="/static/icon/address02.png" mode=""></image>
							<text style="margin-left:4rpx ;">{{item.distance}}km</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 触底 -->
			<view class="home-bottom">
				<uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
			</view>
			<view class="return-btn" @click="returnBtn">
				<image style="width: 132rpx;height: 132rpx;border-radius: 50%;" src="/static/icon/return01.png" mode="">
				</image>
			</view>

		</view>
		<view style="height: 110rpx;"></view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/tabbar.vue'
	import HchPosition from '../../components/hch-position/hch-position.vue'
	import MyNav from "@/components/my-nav/my-nav.vue"
	export default {
		components: {
			TabBar,
			HchPosition,
			MyNav
		},
		data() {
			return {
				scrolls:{scrollX: 0},
				hotelList:[],
				//门店在地图上的标记 以下字段必填
				markers: [],
				//经纬度
				latitude:'',
				longitude:'',
				//暂无数据
				status: 'noMore',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '——  已经到底啦  ——'
				},
				//是否展示地图
				isShow: true,
				value: [0],
				//合作伙伴
				partner: [{
					text: '足球',
					value: 0
				}, {
					text: '篮球',
					value: 1
				}, {
					text: '游泳',
					value: 2
				}, {
					text: '游泳',
					value: 3
				}, {
					text: '游泳',
					value: 4
				}, {
					text: '游泳',
					value: 5
				}, {
					text: '游泳',
					value: 6
				}, {
					text: '游泳',
					value: 7
				}, ],

				//品牌
				brandList: [{
					title: '谷歌'
				}, {
					title: '微软'
				}, {
					title: 'iphone'
				}, {
					title: '新希望'
				}, {
					title: '三江重工'
				}, {
					title: 'JavaScript'
				}],
				//地区
				areaList: [{
					title: '重庆'
				}, {
					title: '成都'
				}, {
					title: '绵阳'
				}, {
					title: '广汉'
				}, {
					title: '内江'
				}, {
					title: '宜宾'
				}, {
					title: '大理'
				}, {
					title: '自贡'
				}, {
					title: '贵州'
				}, {
					title: '泸州'
				}],
				//激活指定table菜单
				isActive: 0,
				//展开搜索
				isopenSearch: false,
				//选择地区
				isSelectArea: true,
				//选择品牌
				isSelectBrand: true,
				//刷选
				isSelectSift: true,
				//是否展示合作伙伴
				isPartner: false,
				//是否展示加盟品牌
				isJoin: false,
			}
		},
		onLoad() {
			//获取经纬度
			this.updated()
			
			this.$api.hotel.getHotelCategory().then(res=>{
				console.log(res)
			})
		},

		methods: {
			goLocation(){
				let _this = this
				uni.getLocation({
					type: "gcj02", //返回可以用于wx.openLocation的经纬度
					success: function(res) {
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						_this.$refs.map.goLocation(res.latitude,res.longitude)
						//获取酒店列表
						_this.getList()
					},
					fail: function(res) {
						console.log(res)
					}
				})
			},
			//在地图渲染更新完成时触发的方法
			updated() {
				let _this = this
				uni.getLocation({
					type: "gcj02", //返回可以用于wx.openLocation的经纬度
					success: function(res) {
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						_this.$refs.map.goLocation(res.latitude,res.longitude)
						//获取酒店列表
						_this.getList()
					},
					fail: function(res) {
						console.log(res)
					}
				})
			},
			//计算酒店距离我的位置--int
			calcDistanceFromHotel({x0,y0},{x1,y1}){
				//x0,y0是我的坐标(经纬度)
				//x1,y1是酒店坐标(经纬度)
				// console.log(x0,y0,x1,y1);
				return this.space(x0,y0,x1,y1);
				return Math.sqrt(Math.pow(Math.abs(x1-x0),2)+Math.pow(Math.abs(y1-y0),2));//返回距离
			},
			//遍历所有酒店,并计算出酒店分别与我的距离--数组
			setEachHotelDistance(hotelArray=[],{x0,y0}){
				hotelArray.map(item=>{
					item.distanceToMe=this.calcDistanceFromHotel({x0,y0},{x1:item.longitude,y1:item.latitude})
					return item;
				})
				return hotelArray;
				
			},
			//筛选出距离我最近的酒店--对象
			getMinDistanceHotel({x0,y0}){
				this.markers=this.setEachHotelDistance(this.markers,{x0,y0});
				this.markers.sort((prev,next)=>{
					return prev.distanceToMe-next.distanceToMe;
				})
				return this.markers[0];
			},
			space(lat1, lng1, lat2, lng2) {
			  var radLat1 = lat1 * Math.PI / 180.0;
			  var radLat2 = lat2 * Math.PI / 180.0;
			  var a = radLat1 - radLat2;
			  var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
			  var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					 Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
			  s = s * 6378.137;
			  s = Math.round(s * 10000) / 10000;
			  return s  // 单位千米
			},
			//-------------------------------------
			getList() {
				this.$api.hotel.getHotelList({
					page: 1
				}).then(res => {
					this.hotelList = res.data.data
					this.markers = this.hotelList.map(item=>{
						const distance =this.calcDistanceFromHotel({x0:this.latitude, y0:this.longitude}, {x1:item.latitude,y1:item.longitude}).toFixed(1);
						item.distance = distance;
						return {
							id:item.id,
							latitude: item.latitude,
							longitude: item.longitude,
							width:'34rpx',
							height:'40rpx',
							iconPath:'../../static/icon/late02.png' ,
							distance: distance,
							active: {
								width: '90rpx',
								height: '100rpx',
								iconPath: item.logo,
							},
							noActive:{
								width:'34rpx',
								height:'40rpx',
								iconPath:'../../static/icon/late02.png' ,
							},
							callout1: {
								content:item.name,
								borderRadius: 10,
								padding: 10,
								display: "ALWAYS",
							}	
						}
					})
					console.log(this.markers, '----->markers')
					let mylongitude = this.longitude
					let mylatitude = this.latitude
					let a = this.getMinDistanceHotel({x0:mylongitude,y0:mylatitude})
					console.log(a,'----->最近酒店');
				})
			},
			//去预定页面
			goBook(id) {
				uni.navigateTo({
					url: '/pages/map/hotel-book/index?hotel_id='+id
				})
			},
			//返回上一级
			returnBtn() {
				this.isShow = !this.isShow
			},
			//打开酒店列表
			goHotelList() {
				console.log(111);
				this.isShow = !this.isShow
			},
			//是否展示加盟品牌
			selectJoin() {
				this.isJoin = !this.isJoin
			},
			//是否展示合作伙伴
			selectPartner() {
				this.isPartner = !this.isPartner
			},
			//合作伙伴刷选
			change(e) {
				console.log('e:', e);
			},
			//菜单index切换
			checked(index) {
				this.isActive = index
			},
			//展开地区选择
			openArea() {
				console.log(111);
				this.isSelectArea = !this.isSelectArea
			},
			//展开品牌选择
			openBrand() {
				this.isSelectBrand = !this.isSelectBrand
			},
			//展开筛选选择
			openSift() {
				this.isSelectSift = !this.isSelectSift
			},
			//下面酒店位移
			moveToMarkId(markId){
				this.markers.forEach((item,index) => {
					if(markId == item.id){
						this.scrolls.scrollX = ((496+16) * index) + 'rpx';
						return;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	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 16rpx;
		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 {
		flex: 1;
		position: relative;
		

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

			&: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;
				}
			}


		}
	}
</style>