yicangzongtai_app_240321/pages/government/subNVue/map - 副本 (2).nvue

<template>
	<view class="main-container">
		<!-- 		<map id="map" ref="map1" :show-location="true" :style="{'height':windowHeight+'px','width':windowWidth+'px'}"
			:latitude="latitude" :longitude="longitude"  :circles="circles" :scale="scale"
			@tap="clickMap" @markertap="markertap"></map> -->
		<map id="map" ref="mapRef" :show-location="true" :latitude="latitude" :longitude="longitude" :scale="scale"
			:markers="markersData" :circles="circles" :style="{'width':windowWidth+'px','height':windowHeight+'px'}" @tap="clickMap"
			@markertap="markertap"></map>

		<!-- 遮罩层 -->
		<!-- <view class="search-bg" v-if="showMask"
			:style="{'width':windowWidth+'px','height':windowHeight+'px','z-index':  2}"
			@click.stop="e => {return false}" @touchend.prevent="aaaaa()">
		</view> -->

		<!-- 更多地图 -->
		<view class="top-btn-box">
			<view class="top-btn">
				<template
					v-if="pageListMap01 && pageListMap01.themeModuleVoList && pageListMap01.themeModuleVoList.length > 0">
					<view class="top-btn-item top-btn-item-l" v-for="(item,index) in pageListMap01.themeModuleVoList"
						:key="`MapType_${index}`" @click="toApp(item)">
						<image class="top-img" :src="item.moduleImage" mode="aspectFill"></image>
						<text class="top-txt">{{item.moduleName}}</text>
					</view>
				</template>
				<view class="top-btn-item" @click="onMoerMap()">
					<image class="top-img" src="@/static/map/more.png" mode=""></image>
					<text class="top-txt">更多地图</text>
				</view>
			</view>

			<view v-if="[1,2].includes(DataType)" class=" top-btn-item data-type"
				@click="DataType === 1 ? DataType = 2 : DataType = 1">
				<text class="data-type-icon iconfont_nvue">&#xe676;</text>
				<!-- <image class="top-img" src="@/static/map/list.png" mode=""></image> -->
				<text class="top-txt">{{DataType === 1 ? '列表' : '轮播'}}</text>
			</view>


			<!-- 定位我的当前位置 -->
			<view class="data-type my-location" @click.stop="backMyLocation()">
				<image class="my-img" src="@/static/map/my.png" mode="aspectFill"></image>
			</view>
		</view>

		<!-- 搜索框 -->
		<search ref="searchRefs" :keyWord="keyWord" :showMask="showMask" :searchType="searchType"
			:hotClassify="hotClassify" :classifyList="classifyList" :classifyTree="classifyTree"
			:activeClassify="activeClassify" :oneClassifyIndex="oneClassifyIndex" @clearSearch="clearSearch"
			:activeDistance="activeDistance" :twoClassifyIndex="twoClassifyIndex" @onSearchFocus="onSearchFocus"
			@onSelectClassify="onSelectClassify" @selectLabel="e => searchType = e"
			@selectHotClassify="selectHotClassify" @onSearch="onSearch" />


		<!-- 点位信息卡片 -->
		<template v-if="!showMask">
			<template v-if="DataType === 1">
				<swiperList :addressList="addressList" :classifyList="classifyList"
					:key="`swiperList_${addressList.length}`" @onCurrent="onCurrent" :keyWord="keyWord"
					:activeClassify="activeClassify" />
			</template>

			<template v-if="DataType === 2">
				<dataList :addressList="addressList" :classifyList="classifyList" :loading="loading" :keyWord="keyWord"
					:activeClassify="activeClassify" />
			</template>


			<view v-else-if="DataType ===  3">
				<babTouchbox :minHeight="0.35" :maxHeight="0.8" :touchHeight="64" @currentHeight="setTouchHeight"
					@maxtHeight="setScrollMaxHeight">
					<view class="map-headline">
						<text class="headline-lr"></text>
						<text class="headline-text">更多地图</text>
						<text class="headline-lr iconfont_nvue" @click.stop="DataType = 1">&#xe867;</text>
					</view>
					<scroll-view :style="{'height':TouchHeight - 40  +'px' }" scroll-y="true" :show-scrollbar="false">
						<template>
							<view class="map-type"
								v-if="pageListMap01 && pageListMap01.themeModuleVoList && pageListMap01.themeModuleVoList.length > 0">
								<view class="map-type-lable">
									<text class="label-line"></text>
									<text class="lable-name">{{pageListMap01.themeVo.themeName }}</text>
								</view>
								<view class="map-type-list">
									<view class="map-type-item"
										v-for="(item , index) in pageListMap01.themeModuleVoList"
										:key="`themeModule_${index}`" @click.stop="toApp(item)">
										<image class="map-type-icon" :src="item.moduleImage" mode=""></image>
										<text class="map-type-name">{{item.moduleName}}</text>
									</view>
								</view>
							</view>
							<view class="map-type"
								v-if="pageListMap02 && pageListMap02.themeModuleVoList && pageListMap02.themeModuleVoList.length > 0">
								<view class="map-type-lable">
									<text class="label-line"></text>
									<text class="lable-name">{{pageListMap02.themeVo.themeName }}</text>
								</view>
								<view class="map-type-list">
									<view class="map-type-item"
										v-for="(item , index) in pageListMap02.themeModuleVoList"
										:key="`themeModule_two_${index}`">
										<image class="map-type-icon" :src="item.moduleImage" mode=""></image>
										<text class="map-type-name">{{item.moduleName}}</text>
									</view>
								</view>
							</view>
							<!-- <view v-else class="empty-box">
									<EmptyDate />
								</view> -->
						</template>

					</scroll-view>
				</babTouchbox>
			</view>
		</template>





	</view>
</template>

<script src="https://webapi.amap.com/maps?v=1.4.15&key=bde3903093d0eff03b0052192a67e1c0"></script>
<script>
	let app = getApp();
	const $defaultId = -1;
	import babTouchbox from '@/components/bab-Touchbox/bab-Touchbox';
	import EmptyDate from '@/components/EmptyDate/EmptyDate';
	import swiperList from "./mapModule/swiperList"
	import dataList from "./mapModule/dataList"
	import search from "./mapModule/search"
	import {
		getThemeModule,
		getLocationClassify,
		getLocationNearbyList,
		getCircumList,
		getLocationIinfo
	} from "@/api/government.js"
	export default {
		components: {
			babTouchbox,
			EmptyDate,
			swiperList,
			dataList,
			search
		},
		data() {
			return {
				map: null,
				latitude: 30.635607,
				longitude: 111.389431,
				myLatitude: 30.635607,
				myLongitude: 111.389431,
				showMask: false,

				keyWord: '',


				// 搜索
				searchType: 1, // 1: 默认收索框； 2：选择热门搜索类型； 3：选择筛选条件, 4: 选择地址 ， 5：选择分类
				// 分类
				classifyList: [],
				hotClassify: [],
				classifyTree: [],
				oneClassifyIndex: 1,
				twoClassifyIndex: null,
				activeClassify: null,



				TouchHeight: 0,
				scrollMaxHeight: 0,
				scale: 18,

				windowHeight: 0,
				windowWidth: 0,
				swiperList: [{
						title: '主标题0',
						subTitle: '副标题0'
					},
					{
						title: '主标题1',
						subTitle: '副标题1'
					},
					{
						title: '主标题2',
						subTitle: '副标题2'
					}
				],

				activeDistance: null,

				// 列表
				oldDataType: null,
				DataType: 1, // 1 轮播 2：列表 , 3 更多地图


				addressList: [], // 地址点位列表
				markersData: [],
				circles:[
				  {
				    latitude: this.myLongitude,
				    longitude: this.myLatitude,
				    fillColor: 'rgba(156,207,209,0.5)',
				    radius: radius,
				    // color: 'transparent',
				    strokeWidth: 2
				  }
				],

				// 更多地图类型
				pageListMap01: null,
				pageListMap02: null,


			};
		},
		created() {
			uni.$on('NextMap', (data) => {
				if (data) {
					this.selectHotClassify(data);
				}
			});
			uni.$on('NextMapKwd', (data) => {
				if (data) {
					this.onSearch(data);
				}
			});
			const {
				statusBarHeight,
				screenHeight,
				navHeight,
				screenWidth
			} = app.globalData;
			this.windowHeight = screenHeight
			this.windowWidth = screenWidth
			// #ifdef APP-NVUE
			try {
				var domModule = weex.requireModule('dom');
				domModule.addRule('fontFace', {
					fontFamily: 'iconfont_nvue',
					src: "url('../../../static/font/yige/iconfont.ttf')",
				});
			} catch (e) {
				//TODO handle the exception
			}
			// #endif
			uni.getLocation({
				type: 'gcj02',
				isHighAccuracy: true, //高精度
				geocode: true, //将位置解析成地址
				success: res => {
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					this.myLatitude = res.latitude;
					this.myLongitude = res.longitude;
					// _this.getTypeOptions();
				},
				fail: function(res) {
					console.log('res = ', res)
				},
			});
			this.clearSearch(true);

		},
		// beforeDestroy() {
		// 	uni.$off('initPop');
		// },
		computed: {

		},
		onReady() {
			// this.map = plus.maps.create('map', {});
			this.map = uni.createMapContext('map', this);
			plus.key.addEventListener('backbutton', function() {
				// console.log('backbutton');
			});
			plus.webview.currentWebview().setStyle({
				popGesture: 'none',
			});
		},
		watch: {
			DataType: {
				handler: function(newType, oldType) {
					this.hideJianpan()
				},
				immediate: true
			},
			searchType: {
				handler: function(newType, oldType) {
					this.showMask = newType > 1;

				},
				immediate: true
			},
			classifyList: {
				handler: function(newArr, oldArr) {
					if (newArr && newArr.length) {
						const hot = [];
						const parentC = [];
						newArr.forEach(el => {
							if (hot.length < 5) {
								// 获取前五个二级分类为热门分类
								if (el.parentId) {
									hot.push(el)
								}
							}
							if (!el.parentId) {
								parentC.push(el)
							}
						})
						this.hotClassify = hot
						parentC.forEach(el => {
							el.children = newArr.filter(vl => el.id === vl.parentId)
						});
						this.classifyTree = parentC;
						// console.log('this.classifyTree = ', this.classifyTree)
					} else {

					}

				},
				immediate: true
			},

			DataType: {
				handler: function(newT, oldT) {
					if ([1, 2].includes(newT)) {
						this.oldDataType = newT
					} else {
						this.oldDataType = 1
					}

				},
				immediate: true
			},
		},

		methods: {
			backMyLocation() {
				// console.log('scale = ', this.scale)
				this.hideJianpan()
				this.$refs.mapRef.moveToLocation();
			},
			setTouchHeight(val) {
				// console.log('setScrollHeight = ', val)
				// 实时返回的滑动组件高度
				this.TouchHeight = val;
			},
			setScrollMaxHeight(val) {
				//最大高度
				this.scrollMaxHeight = val;
			},
			toHere(item) {

				uni.openLocation({
					latitude: parseFloat(item.latitude), // 要去的地址经度，浮点数
					longitude: parseFloat(item.longitude), // 要去的地址纬度，浮点数
					name: item.name, // 位置名
					address: item.detailedAddress, // 要去的地址详情说明
					scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
				});
			},


			initialize() {
				this.getMapType();
				this.getClassify();
			},
			toApp(PageInfo) {
				uni.$emit('mapJump', PageInfo);
			},
			clearSearch(initial = false) {
				this.searchType = 1;
				this.showMask = false;
				this.keyWord = '';
				this.DataType = 1;
				this.addressList = [];
				this.markersData = [];
				this.oneClassifyIndex = 1;
				this.twoClassifyIndex = null;
				this.activeClassify = null;
				if (initial) {
					this.pageListMap01 = null;
					this.pageListMap02 = null;
					this.classifyList = [];
					this.hotClassify = [];
					this.classifyTree = [];
				};
				this.initialize();
			},
			// 选中热门分类
			selectHotClassify(item) {
				this.activeClassify = item
				const f = this.classifyList.find(el => el.id === item.parentId);
				try {
					this.classifyTree.forEach((el, index) => {
						if (el.id === f.id) {
							this.oneClassifyIndex = index;
							throw new Error('')
						}
					})
				} catch (e) {
					//TODO handle the exception
				}
				setTimeout(() => {
					this.searchType = 3;
					this.keyWord = '';
					this.getMapList();
				}, 10);
			},
			onSelectClassify(data) {
				const {
					level,
					val,
					index
				} = data
				switch (level) {
					case 1:
						// 选择一级分类
						this.oneClassifyIndex = index;
						if (!val.children || val.children.length === 0) {
							// 直接选中分类
							this.activeClassify = val;
						} else {
							return false;
						}
						break;
					case 2:
						// 选择二级分类
						this.twoClassifyIndex = index;
						this.activeClassify = val
						break;
					case 3:
						// 选择范围
						this.activeDistance = val
						break;
				}
				this.searchType = 3;
				this.getMapList()
				// classifyList
			},
			onCurrent(index) {
				this.markersData = this.markersData.map((el, idx) => {
					// if (index === idx) {
					// 	el.width = '45rpx';
					// 	el.height = '60rpx';
					// } else {
					// 	el.width = '30rpx';
					// 	el.height = '40rpx';
					// 	delete el.iconPath
					// };
					return el
				})
				if (this.markersData && this.markersData.length > 0) {
					this.latitude = this.markersData[index].latitude;
					this.longitude = this.markersData[index].longitude;
				}
			},
			setCovers(list) {
				this.markersData = list.map(el => {
					// el.width = '30rpx';
					// el.height = '40rpx';
					el.locationType = 'zx';
					return el
				});
				// console.log('this.markersData  = ', this.markersData)
			},
			// 聚合组题
			getMapType() {
				const type = ['map001', 'map002']
				type.forEach((el, index) => {
					getThemeModule(el).then(res => {
						const data = res.data || null;
						if (el === type[0]) {
							this.pageListMap01 = data || null
						}
						if (el === type[1]) {
							this.pageListMap02 = data || null
						};
					})
				})
			},
			aaaaa() {
				console.log('aaaaa ======= ')
			},
			// 获取分类
			getClassify() {
				getLocationClassify().then(res => {
					try {
						const data = res.data || []
						this.classifyList = data;
					} catch (e) {
						//TODO handle the exception
					}
					this.getMapList();
				})
			},
			// 获取地图列表
			getMapList() {

				// console.log('NextMapKwd // 收索= ')
				uni.showLoading()
				// return false;
				const classifyId = this.activeClassify?.id || '';
				const params = {
					latitude: this.myLatitude,
					longitude: this.myLongitude,
					classifyId: classifyId,
					name: this.keyWord,
				}
				getLocationNearbyList(params).then(res => {
					this.addressList = res.data || [];
					// console.log('daya==1===' , res.data)
					this.setCovers(this.addressList)
					this.getCircum()
				}).catch(err => {
					this.getCircum()
				})
			},

			onMoerMap() {
				this.hideJianpan()
				this.searchType = 1;
				this.DataType = 3
			},
			hideJianpan() {
				try {
					this.$refs.searchRefs.blur();
				} catch (e) {
					//TODO handle the exception
				};
				uni.hideKeyboard()
			},
			clickMap() {
				this.hideJianpan();
				// switch (this.searchType){
				// 	case 2:
				// 		break;
				// 	default:
				// 		break;
				// }
				// searchType: 1, // 1: 默认收索框； 2：选择热门搜索类型； 3：选择筛选条件, 4: 选择地址 ， 5：选择分类
			},
			// 搜索周边
			getCircum() {
				try {
					this.$refs.searchRefs.blur();
				} catch (e) {
					//TODO handle the exception
				}
				const name = this.keyWord || this.activeClassify?.name;
				uni.hideKeyboard()
				if (!name) {
					this.DataType = 2;
					this.showMask = false;
					uni.hideLoading()
					return
				}
				const radius = this.activeDistance?.value || 3000;
				this.circles = [
				  {
				    latitude: this.myLongitude,
				    longitude: this.myLatitude,
				    fillColor: 'rgba(156,207,209,0.5)',
				    radius: radius,
				    // color: 'transparent',
				    strokeWidth: 2
				  }
				];
				const params = {
					keywords: name,
					location: this.myLongitude + ',' + this.myLatitude,
					pageNum: 1,
					pageSize: 20,
					radius: radius,
				}
				getCircumList(params).then(res => {
					const data = res.data || [];
					// console.log('daya=====' , data)
					const covers = JSON.parse(JSON.stringify(this.markersData));
					data.forEach((e) => {
						// e.width = '30rpx';
						// e.height = '40rpx';
						e.classifyId = this.acticeId;
						e.longitude = e.location.split(',')[0];
						e.latitude = e.location.split(',')[1];
						e.locationType = 'gd';
						e.detailedAddress = e.address;
						e.intro = e.type;
						// e.id = this.markersData.length + 101;
						covers.push(e);
						this.addressList.push(e);
						// e.iconPath = that.$getImgPath(that.getTypeIcon(e.classifyId));
						// e.iconPath = '';
					});
					this.DataType = 2;
					this.showMask = false;
					this.markersData = covers
				}).finally(() => {
					uni.hideLoading()
				})
			},
			// 搜索 - 获取焦点
			onSearchFocus() {
				if (this.searchType === 1) {
					this.searchType = 2;
				}
				this.showMask = true;
				// this.DataType = 5;
				// setTimeout(() => {
				// 	this.showMask = true;
				// 	this.searchType = 2;
				// }, 10);
			},
			onSearchBlur() {
				// console.log('shiqijiaodian')
				// this.showMask = false;
				// setTimeout(() => {
				// 	this.DataType = this.oldDataType
				// }, 10);


				// console.log('shiqijiaodian', this.DataType)
			},
			// 收索
			onSearch(e) {
				this.keyWord = e;
				this.activeClassify = null;
				this.getMapList(e)
			}




			// getLabel(list, id) {
			// 	let name = '';
			// 	try {
			// 		list.forEach(el => {
			// 			if (el.id === id) {
			// 				name = el.name;
			// 				throw new Error()
			// 			}
			// 		})
			// 	} catch (e) {
			// 		//TODO handle the exception
			// 	}
			// },

		},
	};
</script>

<style lang="scss" scoped>
	$ZIndex: 1;

	.iconfont_nvue {
		font-family: iconfont_nvue;
	}

	.main-container {
		// position: relative;

	}

	.my-location {
		// position: absolute;
		// align-items: center;
		justify-content: center;
		// right: 20rpx;
		// top: 800rpx;
		width: 110rpx;
		height: 110rpx;
		border-radius: 22rpx;
		background-color: #fff;
		z-index: $ZIndex;

		.my-img {
			width: 54rpx;
			height: 54rpx;
		}

	}

	.search-bg {
		position: absolute;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.search-box {
		position: absolute;
		z-index: 21111111111;
		top: 70rpx;
		left: 20rpx;
		right: 20rpx;
		// margin-top: 20rpx;
		background: #fff;
		border-radius: 20rpx;

		.search-val {
			position: relative;
			z-index: 999;
			border-radius: 20rpx;
			background: rgba(184, 184, 184, 0.30);

			.search-frame {
				background-color: #fff;
				height: 89rpx;
				flex-direction: row;
				align-items: center;
				padding: 20rpx;
				border-radius: 20rpx;
				box-shadow: 0px 10px 16px 0px rgba(153, 153, 153, 0.15);

				.back-icon {
					transform: rotate(-180deg) !important;
				}

				.search-icon {
					font-size: 40rpx;
					color: #666666;
					width: 40rpx;
					height: 40rpx;
					transform: rotate(0deg);
				}

				.search-input {
					flex: 1;
					font-size: 28rpx;
					margin-left: 10rpx;
				}
			}

			.classify-box {
				height: 179rpx;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 30rpx;

				.classify-item {
					height: 100rpx;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.classify-icon {
						width: 64rpx;
						height: 64rpx;
					}

					.classify-text {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #373737;
					}
				}
			}

			.condition-box {
				.condition-label {
					flex-direction: row;
					align-items: center;
					height: 92rpx;
					border-bottom: 1rpx solid $zw-border-color;
					padding: 0 30rpx;

					.label-item {
						// width: 200rpx;
						flex-direction: row;
						align-items: center;

						&+.label-item {
							margin-left: 20rpx;
						}

						.label-item-text {
							width: 130rpx;
							font-size: 28rpx;
							line-height: 36rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: center;
							color: #1a1a1a;
							padding-right: 4px;
						}

						.label-item-icon {
							width: 28rpx;
							height: 28rpx;
							transform: rotate(0deg);
							transition: transform 1s;
						}

						.active-condition-label {
							transform: rotate(-180deg);
						}
					}
				}

				.condition-val {
					height: 121rpx;
					flex-direction: row;
					align-items: center;

					.scroll-condition {
						// width: 710rpx;
						padding: 0 30rpx;
						flex-direction: row;

						.scroll-condition-content {

							flex-direction: row;
						}
					}

					.auto-width-item-v {
						padding-right: 30rpx;

						.condition-item-v {
							height: 70rpx;
							background-color: #f2f2f2;
							line-height: 70rpx;
							padding: 0 30rpx;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: center;
							color: #666666;
							border-radius: 10rpx;
							border-width: 1rpx;
							border-style: solid;
							border-color: #f2f2f2;

						}

						.active-condition-val {
							border-color: #4fc9d5;
							background-color: #EDFDFD;
							color: #3FB9D4;
						}
					}

				}

				.condition-list-box {
					.condition-list {
						// padding: 0 30rpx;
						flex-direction: row;
						justify-content: space-between;
						align-items: stretch;

						.condition-list-left {
							width: 200rpx;

							.active-condition {
								background-color: #fff;
							}
						}

						.condition-list-right {
							// width: 430rpx;
							flex: 1;
							background-color: #fff;

							.active-condition {
								color: #3DB8D2;
							}
						}

						.condition-list-item {
							height: 80rpx;
							line-height: 80rpx;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							color: #666666;
							padding: 0 20rpx;
						}
					}
				}

			}
		}
	}

	.swiper-box {
		position: absolute;
		left: 0;
		bottom: 40px;
		z-index: 1;

		// background-color: skyblue;
		.swiper-content {
			width: 623rpx;
			height: 317rpx;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			padding: 20rpx;

			.content-info {
				height: 168rpx;
				flex-direction: row;
				align-items: stretch;
				justify-content: space-between;

				.info-logo {
					width: 168rpx;
					height: 168rpx;
					border-radius: 20rpx;
				}

				.info-text {
					width: 390rpx;
					height: 168rpx;
					flex-direction: column;

					.info-name {
						font-size: 30rpx;
						height: 42rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #333333;
					}

					.info-more {
						height: 126rpx;
						flex-direction: row;
						justify-content: space-between;
						align-items: flex-end;

						.more-text {
							height: 126rpx;
							flex-direction: column;
							justify-content: space-between;
							width: 268rpx;
							padding-right: 20rpx;

							// .info-tag {
							// 	height: 42rpx;
							// 	font-size: 24rpx;
							// 	background-color: #E3FCFC;
							// }

							.bottomTextView {
								border-radius: 20rpx 0px;
								height: 42rpx;
								font-size: 24rpx;
								background-color: #E3FCFC;

								.bottomText {
									line-height: 42rpx;
									padding: 0 22rpx;
									font-size: 24rpx;
									color: #43BDD6;
								}
							}

							.info-site {
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								color: #666666;
							}
						}

						.more-btn {
							width: 122rpx;
							height: 50rpx;
							// background: linear-gradient(90deg,#45c7d5 4%, #3cb7d1 93%);
							background-color: #45c7d5;
							border-radius: 25rpx;
							flex-direction: row;
							justify-content: center;
							align-items: center;

							.toimg {
								width: 22rpx;
								height: 24rpx;
							}

							.btn-text {
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC-Regular;
								font-weight: 400;
								color: #ffffff;
							}
						}
					}

				}


			}

			.content-details {
				padding-top: 25rpx;
				height: 109rpx;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #1a1a1a;
			}

		}
	}

	.address-list {

		.address-item {
			height: 176rpx;
			border-bottom-width: 1rpx;
			border-bottom-style: solid;
			border-bottom-color: #EDEDED;
			padding: 30rpx 0 20rpx;
			flex-direction: column;
			justify-content: space-between;

			.address-headline {
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.headline-name {
					flex: 1;
					font-size: 28rpx;
					font-weight: 500;
					color: #1a1a1a;
				}

				.headline-distance {
					width: 200rpx;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;

					.distance-text {
						font-size: 24rpx;
						font-weight: 300;
						text-align: left;
						color: #666666;
					}

					.distance-icon {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}

			.location-info {
				flex-direction: row;
				align-items: center;

				.location-icon {
					width: 21.54rpx;
					height: 25.96rpx;
				}

				.location-text {
					flex: 1;
					padding-left: 5rpx;
					font-size: 24rpx;
					font-weight: 300;
					color: #808080;
				}
			}

			.times {
				.time-info {
					font-size: 24rpx;
					font-weight: 300;
					color: #808080;
				}
			}
		}
	}

	.top-btn-box {
		position: absolute;
		top: 200rpx;
		right: 20rpx;
		z-index: 1;

		.top-btn {
			width: 110rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 0 20rpx #ccc;
			padding: 0 15rpx;


			.top-btn-item-l {
				border-bottom-width: 1rpx;
				border-bottom-style: solid;
				border-bottom-color: #8F8F8F;
			}

			.top-btn-item {
				// width: 64rpx;
				padding: 20rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.top-img {
					width: 60rpx !important;
					height: 60rpx !important;
				}

				.top-txt {
					font-size: 20rpx;
					margin-top: 3rpx;
				}
			}
		}



		.data-type {
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			width: 110rpx;
			padding: 20rpx 0;
			border-radius: 20rpx;
			margin-top: 30rpx;

			.data-type-icon {
				color: #1a1a1a;
				font-size: 50rpx;
			}

			.top-txt {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: center;
				color: #1a1a1a;
			}
		}

		// .top-btn {
		// 	flex-direction: column;
		// 	padding: 20rpx 10rpx;
		// 	border-radius: 20rpx;
		// 	background-color: #fff;
		// 	box-shadow: 0 0 20rpx #ccc;

		// 	.top-btn-item {
		// 		flex-direction: column;
		// 		align-items: center;
		// 		margin-bottom: 15rpx;
		// 	}

		// 	.top-btn-item-l {
		// 		margin-bottom: 0;
		// 	}

		// 	.top-img {
		// 		width: 60rpx;
		// 		height: 60rpx;
		// 	}

		// 	.top-txt {
		// 		font-size: 20rpx;
		// 		margin-top: 3rpx;
		// 	}

		// 	.btn-more {
		// 		margin-top: 30rpx;
		// 	}

		// }

	}


	.map-headline {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		height: 60rpx;

		.headline-lr {
			width: 100rpx;
		}

		.iconfont_nvue {
			text-align: right;
			font-size: 40rpx;
			color: #999999;
		}

		.headline-text {
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #1a1a1a;
		}
	}

	.map-type {
		padding: 30rpx 0 10rpx;

		.map-type-lable {
			flex-direction: row;
			align-items: center;

			.label-line {
				width: 8rpx;
				height: 35rpx;
				border-radius: 4rpx;
				background-color: #44c6d4;
			}

			.lable-name {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #1a1a1a;
				line-height: 30px;
				padding-left: 22rpx;
			}
		}

		.map-type-list {
			flex-direction: row;
			align-items: stretch;
			flex-wrap: wrap;

			.map-type-item {
				width: 175rpx;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 30rpx;

				.map-type-icon {
					width: 86rpx;
					height: 86rpx;
				}

				.map-type-name {
					padding: 13rpx 4rpx 0;
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: center;
					color: #666666;
				}
			}
		}
	}

	.auto-width-item {
		overflow: hidden;
		flex-direction: row;
	}

	.nvue-one-row {
		text-overflow: ellipsis; //文字超出省略号
		lines: 1; //文字行数
	}

	.nvue-two-row {
		text-overflow: ellipsis; //文字超出省略号
		lines: 2; //文字行数
	}
</style>