yicangzongtai_app_240321/pages/government/subNVue/map.nvue

<template>
	<view class="main-container">
		<map id="map" ref="mapRef" :show-location="true" :latitude="latitude" :longitude="longitude" :scale="scale"
			:key="mapKey" :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> -->

		<!-- 更多地图 statusBarHeight top: 200rpx;-->
		<view class="top-btn-box" :style="{'top': setTop(statusBarHeight)}">
			<view
				:class="['top-btn' , pageListMap01 && pageListMap01.themeModuleVoList && pageListMap01.themeModuleVoList.length > 0 ? '' : 'hide-element' ]">
				<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 more-map" @click="onMoerMap()">
					<image class="top-img" src="@/static/map/more.png" mode=""></image>
					<!-- <text class="iconfont_nvue">&#xe7ce;</text> -->
					<text class="top-txt">更多地图</text>
				</view>
			</view>

			<view
				:class="['top-btn-item data-type' ,  [1,2].includes(DataType) && addressList.length > 0 ? '' : 'hide-element' ]"
				@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" :statusBarHeight="statusBarHeight" :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" />


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

		<dataList :DataType="DataType" :addressList="addressList" :classifyList="classifyList" :loading="loading"
			:keyWord="keyWord" :activeClassify="activeClassify" />

		<view v-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 = oldDataType ? oldDataType : 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>
					</template>

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

	</view>
</template>

<script src="https://webapi.amap.com/maps?v=1.4.15&key=bde3903093d0eff03b0052192a67e1c0"></script>
<script>
	let app = getApp();
	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 {
				statusBarHeight: 0,
				mapKey: 1,
				map: null,
				latitude: 30.635607,
				longitude: 111.389431,
				myLatitude: 30.635607,
				myLongitude: 111.389431,
				showMask: false,

				keyWord: '',
				scale: 13,

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



				TouchHeight: 0,
				scrollMaxHeight: 0,


				windowHeight: 0,
				windowWidth: 0,

				activeDistance: null,

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


				addressList: [], // 地址点位列表
				markersData: [],
				circles: [],

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


			};
		},
		onUnload() {
			// uni.$off('initPop')
			// uni.$off('mapJump')
			// uni.$off('onMapNextPage')
			// console.log('卸载')
		},
		created() {
			// console.log('创建')

			uni.$on('NextMap', (data) => {
				if (data) {
					this.selectHotClassify(data);
				}
			});
			uni.$on('NextMapKwd', (data) => {
				if (data) {
					this.onSearch(data);
				}
			});

			uni.$on('initMap', res => {
				if (res.init) this.clearSearch(true);
			});

			const {
				statusBarHeight,
				screenHeight,
				screenWidth
			} = app.globalData;
			this.statusBarHeight = statusBarHeight;
			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: {
			loading: {
				handler: function(newLoad, oldLoad) {
					if (newLoad) {
						uni.showLoading()
					} else {
						uni.hideLoading()
					}
				},
				immediate: true
			},

			searchType: {
				handler: function(newType, oldType) {
					// this.showMask = newType > 1 && newType !== 3;
					this.showMask = [1, 2].includes(newType);
					console.log('newType === ', newType, this.showMask)

				},
				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) {
					this.hideJianpan()
					// if ([1, 2].includes(newT)) {
					// 	this.oldDataType = newT
					// } else {
					// 	this.oldDataType = 1
					// }

				},
				immediate: true
			},
		},

		methods: {
			setTop: function(statusBarH) {
				const searchH = uni.upx2px(160) + uni.upx2px(80)
				return searchH + statusBarH + 'px'
			},
			backMyLocation() {
				// console.log('scale = ', this.scale)
				this.hideJianpan()
				this.scale = 18;
				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 = 2;
				this.showMask = false;
				this.keyWord = '';
				this.DataType = 0;
				this.addressList = [];
				this.markersData = [];
				this.circles = [];
				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
				console.log('activeClassify = ', item)
				// oneClassifyIndex  activeClassify 
				const f = this.classifyList.find(el => el.id === item.parentId || el.id === item.id);
				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

				// console.log('valvalvalvalval level= ', level , val.name)

				switch (level) {
					case 1:
						// 选择一级分类
						this.oneClassifyIndex = index;
						if (!val.children || val.children.length === 0) {
							console.log('valvalvalvalval = ', val.children.length, val.children)
							// 直接选中分类
							this.activeClassify = val;
							this.onClassifySearch();
						}
						break;
					case 2:
						// 选择二级分类
						this.twoClassifyIndex = index;
						this.activeClassify = val
						this.onClassifySearch();
						break;
					case 3:
						// 选择范围
						this.activeDistance = val
						this.onClassifySearch();
						break;
				}
				// classifyList
			},
			onClassifySearch() {

				this.searchType = 3;
				this.getMapList()
			},
			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
					}
				}).finally(() => {
					// setTimeout(() => {
					// 	this.getMapList();
					// }, 10);
				})
			},
			// 获取地图列表
			getMapList() {
				this.loading = true;

				setTimeout(() => {
					const radius = this.activeDistance?.value || 3000;
					this.circles = [{
						latitude: this.myLatitude,
						longitude: this.myLongitude,
						fillColor: 'rgba(156,207,209,0.5)',
						radius: radius,
						color: 'transparent',
						strokeWidth: 2
					}];
					const classifyId = this.activeClassify?.id || '';
					const params = {
						latitude: this.myLatitude,
						longitude: this.myLongitude,
						classifyId: classifyId,
						name: this.keyWord,
						radius: radius,
					}
					getLocationNearbyList(params).then(res => {
						console.log('getLocationNearbyList = ', res.data)
						this.addressList = res.data || [];
						this.scale = 13;
						this.setCovers(this.addressList)
						this.getCircum(radius)
					}).catch(err => {
						this.getCircum(radius)
					})
				}, 300);
			},

			onMoerMap() {
				this.hideJianpan()
				this.oldDataType = this.DataType;
				this.searchType = 2;
				this.DataType = 3
			},
			hideJianpan() {
				try {
					this.$refs.searchRefs.blur();
				} catch (e) {
					//TODO handle the exception
				};
				uni.hideKeyboard()
			},
			clickMap(e) {
				this.hideJianpan();
				// switch (this.searchType){
				// 	case 2:
				// 		break;
				// 	default:
				// 		break;
				// }
				// searchType: 1, // 1: 默认收索框； 2：选择热门搜索类型； 3：选择筛选条件, 4: 选择地址 ， 5：选择分类
			},
			markertap(e) {
				console.log('e = ' , e)
				this.hideJianpan();
				const markerId = e.detail.markerId;
				const markerVal = this.addressList.find(el => el.id === markerId);
				if (markerVal) {
					uni.navigateTo({
						url: '/pages/government/subNVue/mapLocationInfo',
						success: res => {
							uni.$emit('onMapNextPage')
							res.eventChannel.emit('MapInfo', {
								data: {
									val: markerVal,
									classifyList: this.classifyList,
									keyWord: this.keyWord,
									activeClassify: this.activeClassify
								}
							})
						},
						fail: err => {
							console.log('跳转', err)
						},
					})
				}
			},
			// 搜索周边
			getCircum(radius = 0) {
				console.log('getCircum = ', 1)
				try {
					this.$refs.searchRefs.blur();
				} catch (e) {
					//TODO handle the exception
				}

				const name = this.keyWord || this.activeClassify?.name;

				try {
					if (!name) {
						this.showMask = false;
						this.loading = false;
						throw new Error(' ')
					}
					const radius = radius || this.activeDistance?.value || 3000;
				
					const params = {
						keywords: name,
						location: this.myLongitude + ',' + this.myLatitude,
						pageNum: 1,
						pageSize: 20,
						radius: radius,
					}
					const t_n = new Date().getTime();
					getCircumList(params).then(res => {
						const data = res.data || [];
						// console.log('daya=====' , data)
						const covers = JSON.parse(JSON.stringify(this.markersData));
						data.forEach((e , index) => {
							// 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 = t_n + index;
							covers.push(e);
							this.addressList.push(e);
							// e.iconPath = that.$getImgPath(that.getTypeIcon(e.classifyId));
							// e.iconPath = '';
						});
						this.showMask = false;
						this.markersData = covers
					}).finally(() => {
						this.loading = false;
					})
				} catch (e) {
					//TODO handle the exception
				}

				this.DataType = 2
				console.log('this.DataType = ', this.DataType)
			},
			// 搜索 - 获取焦点
			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>
	@import url("./mapModule/style.scss");
	$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: 100rpx;
		height: 100rpx;
		border-radius: 22rpx;
		background-color: #fff;

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

	}

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


	// .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;
		right: 20rpx;
		z-index: 1;

		.top-btn {
			width: 100rpx;
			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: #efefef;
			}

			.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;
				}
			}

			.more-map {
				.iconfont_nvue {
					color: #48AAB2;
				}

				// .top-img{

				// }
				.top-txt {
					color: #48AAB2;
				}

				// <text class="iconfont_nvue">&#xe7ce;</text>
				// <text class="top-txt" style="color: #48AAB2;">更多地图</text>
			}
		}



		.data-type {
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			width: 100rpx;
			padding: 10rpx 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>