changshu_map/src/views/Index.vue

<template>
	<div>
		<div id="mapContainer" class="mapContainer"></div>

		<!-- 搜索框 -->
		<van-popup v-model="isSearch" position="top">
			<div class="search-box flex-around">
				<input type="text" v-model="keyword" placeholder="请输入搜索关键字">
				<div class="search-text" @click="search">搜索</div>
			</div>
			<div class="search-result" v-if="isSearch && searchList.length > 0">
				<div class="search-item" v-for="(item,index) in searchList" @click="searchClick(item)">
					{{item.name}}
				</div>
			</div>
		</van-popup>

		<!-- 点位分类 -->
		<div class="type-box" v-if="typeShow">
			<div class="search" @click="keyword = ''; searchList = []; isSearch = true">
				<img src="https://static.ticket.sz-trip.com/changshu/images/map/search.png" alt="" />
				搜索
			</div>
			<div :class="['type-item',{'type-active': index == typeIndex}]" v-for="(item,index) in mapType"
				@click="getSpotsByCategory(index)">{{item.name}}</div>
		</div>

		<div class="area-box" v-if="typeShow">
			<!-- 区域分类 -->
			<div>
				<div class="area-item area-items" @click="areaMore = !areaMore">
					<img :src="'https://static.ticket.sz-trip.com/yandu/images/map/'+ (areaMore ? 'topIcon.png' : 'bottomIcon.png')"
						alt="" />
					{{areaMore ? '收起' : '展开'}}
				</div>
				<div v-if="areaMore">
					<div v-for="(item,index) in areaList" :key="index"
						:class="['area-item',{'area-active':index == areaIndex}]" @click="changeArea(index)">
						{{item.name}}
					</div>
				</div>
			</div>
			<!-- 行程线路 -->
			<!-- <div>
				<div class="area-item area-items" @click="addLine" v-if="isMyLine">
					<img src="https://static.ticket.sz-trip.com/yandu/images/map/myLine.png" alt="" />
					我的<br>行程
				</div>
				<div class="area-item area-items" @click="addLine" v-else>
					<img src="https://static.ticket.sz-trip.com/yandu/images/map/addLine.png" alt="" />
					添加<br>行程
				</div>
				<div class="area-item area-items" @click="gotoLine">
					<img src="https://static.ticket.sz-trip.com/yandu/images/map/line.png" alt="" />
					线路<br>推荐
				</div>
			</div> -->
		</div>

		<!-- 详情弹框 -->
		<van-popup v-model="detailShow" @close="audioPause" :overlay-style="{'background-color': 'rgba(0, 0, 0, 0)'}"
			position="bottom" round>
			<ProductDetail ref="detailRef" :type="productType" :info="detailInfo" :audioSrc="audioSrc"
				:genreType="genreType" :content="detailContent" :imgList="imgList" :isCanBuy="isCanBuy" :tel="tel" />
		</van-popup>

		<!-- 输入线路信息弹框 -->
		<van-popup v-model="addLineShow" position="center" round>
			<div class="addLine-box">
				添加行程
				<div class="addLine-item">
					线路名称: <input type="text" v-model="lineName" placeholder="请输入线路名称" />
				</div>
				<div class="addLine-item">
					开始时间: <input type="text" v-model="lineDate" placeholder="请选择出发时间" readonly
						@click="lineDateShow = true" />
					<img src="https://static.ticket.sz-trip.com/yandu/images/map/dateRight.png" alt="">
				</div>
				<div class="addLine-btn flex-around">
					<div @click="addLineShow = false">取消</div>
					<div @click="lineClick">下一步</div>
				</div>
			</div>
		</van-popup>

		<!-- 日期选择 -->
		<van-popup v-model="lineDateShow" round position="bottom">
			<van-datetime-picker v-model="currentDate" type="date" title="选择年月日" @confirm="lineDateConfirm"
				@cancel="lineDateShow = false" />
		</van-popup>

		<!-- 添加线路行程弹框 -->
		<van-popup v-model="lineRouteShow" round position="bottom">
			<LineRoute :lineItem="addLineInfo" ref="lineRouteRef" />
		</van-popup>

		<!-- 线路详情弹框 -->
		<van-popup v-model="lineDetailShow" :overlay="false" :overlay-style="{'background-color': 'rgba(0, 0, 0, 0)'}"
			round position="bottom" @close="closeLine" class="linePopup">
			<div class="close-LineBtn" @click="closeLine">
				退出线路
			</div>
			<LineDetail @changeCenter="changeMapCenter" />
		</van-popup>
	</div>
</template>

<script>
	import {
		getStore
	} from '@/libs/storage'
	import moment from 'moment'
	import ProductDetail from './compoents/productDetail'
	import LineRoute from './compoents/lineRoute'
	import LineDetail from './compoents/lineDetail'
	export default {
		components: {
			ProductDetail,
			LineRoute,
			LineDetail
		},
		data() {
			return {
				mapObj: null,
				mapMarker: null,
				basics: {},
				mapType: [],
				typeShow: true,
				typeIndex: -1,
				areaList: [],
				areaIndex: 0,
				areaMore: true,
				detailShow: false, // 详情弹框
				productType: true,
				addLineShow: false, // 输入线路名称和日期弹框
				lineName: '',
				lineDate: '',
				lineDateShow: false, // 选择日期弹框
				currentDate: new Date(),
				lineRouteShow: false, // 添加线路行程弹框
				lineAddStatus: false, // 点击添加行程时为true，地图景点图标改变为加号
				addLineInfo: '',
				maps: [], //热点
				lineDetailShow: false, // 线路弹框
				lineInfo: {},
				detailInfo: {},
				audioSrc: '',
				genreType: '',
				isMyLine: false, // 是否有我的线路
				detailContent: '',
				imgList: '',
				isCanBuy: false,
				tel: '',
				keyword: '',
				isSearch: false,
				searchList: []
			};
		},
		mounted() {
			this.getAreaList()
			if (this.$route.query.token) this.$store.commit('changeUserInfo', {
				token: this.$route.query.token
			})

			// 如果从我的行程里点击添加线路
			if (sessionStorage.getItem('addUserLine')) {
				this.lineName = ''
				this.lineDate = ''
				this.addLineShow = true
				sessionStorage.removeItem("addUserLine")
			}
		},
		activated() {

		},
		methods: {
			// 获取全部区域
			getAreaList() {
				this.post({}, '/api/emap/get_map_list').then(res => {
					this.areaList = res.data
					if (res.data.length > 0) {
						this.getAreaDetail()
						this.getCategory()
						// this.getMyLine()
					}
				})
			},
			// 更改地图区域
			changeArea(index) {
				this.areaIndex = index
				// 销毁地图
				this.mapObj.destroy()
				this.getAreaDetail()
				this.getCategory()
				// this.getMyLine()
			},
			// 根据code获取当前区域信息
			getAreaDetail() {
				this.post({
					code: this.areaList[this.areaIndex].code
				}, '/api/emap/get_init').then(res => {
					this.basics = res.data
					this.basics.center_poi = JSON.parse(this.basics.center_poi)
					this.basics.lb_poi = JSON.parse(this.basics.lb_poi)
					this.basics.rt_poi = JSON.parse(this.basics.rt_poi)
					this.$nextTick(() => {
						this.initMap()
					})
				})
			},
			// 根据code获取热点分类
			getCategory() {
				this.post({
					code: this.areaList[this.areaIndex].code
				}, '/api/emap/getByCategory').then(res => {
					this.mapType = res.data
					if (this.mapType.length > 0) this.getSpotsByCategory(0)
				})
			},
			// 根据code、热点分类获取热点
			getSpotsByCategory(index) {
				if (index > -1) this.typeIndex = index
				this.post({
					code: this.areaList[this.areaIndex].code,
					category_id: this.mapType[this.typeIndex].id
				}, '/api/emap/getSpotsByCategory').then(res => {
					this.maps = res.data
					this.lineAddStatus = false

					// 如果是从线路列表过来的，就不需要打点了
					if (this.$store.state.user.lineDetail && this.$store.state.user.lineDetail.points.length > 0) {
						return;
					}

					// 移除原先点位
					this.clearMarkers()
					if (this.maps.length > 0) this.setMarkers()
				})
			},
			// 搜索
			search() {
				this.post({
					code: this.areaList[this.areaIndex].code,
					category_id: this.mapType[this.typeIndex].id,
					keyword: this.keyword
				}, '/api/emap/getSpotsByCategory').then(res => {
					this.searchList = res.data
				})
			},
			// 点击搜索结果
			searchClick(item) {
				this.isSearch = false
				// 设置地图中心
				this.changeMapCenter(JSON.parse(item.poi))
				// 查找当前搜索结果对应的点位数据
				const markerData = this.maps.find(marker => {
					// 根据id或name匹配对应的点位（根据实际数据结构调整）
					return marker.id === item.id || marker.name === item.name;
				});

				if (markerData) {
					// 构造模拟的标记点点击事件数据
					const mockEvent = {
						geometry: {
							id: markerData.goods ? markerData.goods.id : '',
							genre: markerData.goods ? markerData.goods.genre : '',
							name: markerData.name,
							address: markerData.address,
							audioSrc: markerData.audio_file,
							spotId: markerData.id,
							detailContent: markerData.detail_content,
							imgList: markerData.album_images,
							tel: markerData.tel,
							position: new TMap.LatLng(
								JSON.parse(markerData.poi)[1],
								JSON.parse(markerData.poi)[0]
							)
						}
					};

					// 触发标记点点击事件
					this.markerClick(mockEvent);
				}
			},
			// 查询是否有我的线路
			getMyLine() {
				this.post({
					type: 1,
					code: this.areaList[this.areaIndex].code
				}, '/api/emap/getLineByCode').then(res => {
					if (res.data && res.data.length > 0) {
						this.isMyLine = true
					} else {
						this.isMyLine = false
					}
				})
			},
			initMap() {
				let centerLat = this.basics.center_poi[1]
				let centerLon = this.basics.center_poi[0]
				var center = new TMap.LatLng(this.basics.center_poi[1], this.basics.center_poi[0]) //设置中心点坐标
				var sw = new TMap.LatLng(this.basics.rt_poi[1], this.basics.rt_poi[0]); //东北角坐标,
				var ne = new TMap.LatLng(this.basics.lb_poi[1], this.basics.lb_poi[0]); //西南角坐标,
				var latlngBounds = new TMap.LatLngBounds(ne, sw);
				// 初始化地图
				this.mapObj = new TMap.Map("mapContainer", {
					center: center,
					boundary: latlngBounds,
					zoom: this.basics.zoom, // 地图默认缩放级别
					minZoom: this.basics.min_zoom,
					maxZoom: this.basics.max_zoom,
					showControl: true, // 是否显示地图上的控件
					viewMode: '2D', // 地图视图模式，支持2D和3D，默认为3D。2D模式下俯仰角和旋转角度始终为0
					rotatable: false, // 禁止旋转
					rotation: 0, //设置地图旋转角度
					pitchable: false, // 禁止俯视
					baseMap: {
						type: 'vector', // 矢量地图底图模式
						features: this.basics.bg_tile == 1 ? ['base'] : []
						// features: [
						// 	'base', // 路面
						// 	'building3d', //三维建筑
						// 	'point', // POI文字
						// 	'label' // 道路文字
						// ]
					}
				});

				this.mapObj.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM); // 移除缩放控件
				this.mapObj.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION); // 移除旋转控件

				// 初始化瓦片
				// 瓦片图需要切好每个位置的图
				// x,y,z 为上图的坐标

				let imageTile = new TMap.ImageTileLayer({
					getTileUrl: (x, y, z) => {
						//拼接瓦片URL
						let url = this.basics.tile_image_formatter + z + "/" + x +
							"/" + y + ".png";
						return url;
					},
					tileSize: 256, //瓦片像素尺寸
					minZoom: this.basics.min_zoom, //显示自定义瓦片的最小级别
					maxZoom: this.basics.max_zoom, //显示自定义瓦片的最大级别
					visible: true, //是否可见
					zIndex: 5000, //层级高度（z轴）
					opacity: 1, //图层透明度：1不透明，0为全透明
					map: this.mapObj, //设置图层显示到哪个地图实例中
				});

				// 瓦片等级最高设置
				// this.$nextTick(()=>{
				// 	var layerId = imageTile.getId() // 获取图层ID
				// 	// 根据输入 LAYER_LEVEL 常量调整 layerId 对应图层的渲染层级 ，其中layerId可以通过图层getId方法获取。
				// 	// TMap.constants.LAYER_LEVEL 代表图层级别常量，见帮助文档（https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap）
				// 	this.mapObj.moveLayer(layerId, TMap.constants.LAYER_LEVEL.TEXT)
				// })

				// 判断是否是线路列表过来的
				if (this.$store.state.user.lineDetail && this.$store.state.user.lineDetail.points.length > 0) {
					this.$nextTick(() => {
						this.showLineDetail()
					})
				}

				// 创建点聚合实例
				// this.markerCluster = new TMap.MarkerCluster({
				// 	id: "cluster",
				// 	map: this.mapObj,
				// 	enableDefaultStyle: true, // 是否启用默认样式
				// 	minimumClusterSize: 5, // 形成聚合簇的最小个数
				// 	geometries: [],	// 点数组
				// 	zoomOnClick: true,
				// 	gridSize: 60,
				// 	averageCenter: true,
				// });
			},
			// 地图打点
			setMarkers() {
				// 聚合点点位
				// this.markerCluster.setGeometries([
				// 	{
				// 		position: new TMap.LatLng(33.332682, 120.16451)
				// 	},
				// 	{
				// 		position: new TMap.LatLng(33.329281, 120.161117)
				// 	}
				// ]);
				let markers = []
				let labels = []
				this.maps.forEach(item => {
					markers.push({
						"styleId": 'marker',
						id: item.goods ? item.goods.id : '', // 产品id
						genre: item.goods ? item.goods.genre : '', // 产品类型
						name: item.name, // 产品名称
						address: item.address, // 详情地址,
						audioSrc: item.audio_file, // 音频路径
						spotId: item.id, // 点位id
						detailContent: item.detail_content, // 简介
						imgList: item.album_images, // 图片
						tel: item.tel, // 电话
						position: new TMap.LatLng(JSON.parse(item.poi)[1], JSON.parse(item.poi)[0])
					})

					labels.push({
						id: 'label', // 点图形数据的标志信息
						styleId: 'label', // 样式id
						position: new TMap.LatLng(JSON.parse(item.poi)[1], JSON.parse(item.poi)[
						0]), // 标注点位置
						content: item.name, // 标注文本
						properties: {
							// 标注点的属性数据
							title: 'label',
						},
					})
				})

				// 添加marker点
				this.multiMarker = new TMap.MultiMarker({
					id: 'marker-layer',
					map: this.mapObj,
					styles: {
						"marker": new TMap.MarkerStyle({
							"width": 27,
							"height": 33,
							"src": 'https://static.ticket.sz-trip.com/changshu/images/map/scenic.png',
							"src": this.util.showImg(this.mapType.find(i => {
								return i.id == this.maps[0].category_id
							}).icon_image)
						})
					},
					// 点数组
					geometries: markers,
				})

				// 标记点点击事件
				this.multiMarker.on("click", this.markerClick)

				// 文本标记
				this.multiLabel = new TMap.MultiLabel({
					id: 'label-layer',
					map: this.mapObj,
					collisionOptions: {
						sameSource: true,
					}, //开启图层内部的文本标注碰撞
					styles: {
						label: new TMap.LabelStyle({
							color: '#FFF', // 颜色属性
							size: 13, // 文字大小属性
							offset: {
								x: 0,
								y: 15
							}, // 文字偏移属性单位为像素
							angle: 0, // 文字旋转属性
							alignment: 'center', // 文字水平对齐属性
							verticalAlignment: 'middle', // 文字垂直对齐属性
							backgroundColor: 'rgba(0, 0, 0, .5)',
							borderRadius: 7,
							padding: '2px 8px',
						}),
					},
					geometries: labels,
				})

				// 标记文本点击事件
				// this.multiLabel.on("click", this.markerClick)
			},
			// 移除点位
			clearMarkers() {
				if (this.multiMarker) {
					this.multiMarker.setMap(null);
					this.multiMarker = null;
				}

				if (this.multiLabel) {
					this.multiLabel.setMap(null);
					this.multiLabel = null;
				}
			},
			// 改变地图中心
			changeMapCenter(item) {
				this.mapObj.panTo(new TMap.LatLng(item[1], item[0]));
			},
			// 标记点点击事件
			markerClick(evt) {
				console.log(evt.geometry)
				if (this.lineAddStatus) {
					//添加行程时
					this.$dialog.confirm({
						title: '',
						message: '是否将' + evt.geometry.name + '加入行程?'
					}).then(() => {
						this.addLineInfo = evt.geometry
					}).catch(() => {

					})
				} else {
					this.audioSrc = evt.geometry.audioSrc
					this.genreType = evt.geometry.genre
					this.detailContent = evt.geometry.detailContent
					this.imgList = evt.geometry.imgList
					this.tel = evt.geometry.tel

					if (['ticket'].includes(evt.geometry.genre)) {
						// 景点 酒景
						this.get({
							id: evt.geometry.id,
							customBaseURL: 'https://api.cloud.sz-trip.com'
						}, '/api/product/get_product_detail').then(res => {
							if (res.data) {
								// 酒店类型展示购买按钮
								if (evt.geometry.genre == 'ticket') {
									this.isCanBuy = true
									this.productType = true
								}

								this.detailInfo = res.data
								this.detailInfo.genre = evt.geometry.genre
								this.detailShow = true
							}
						})
					}
					// else if (evt.geometry.genre == 'food') {
					// 	this.get({
					// 		goods_id: evt.geometry.id
					// 	}, '/api/goods/getGoodDetail').then(res => {
					// 		if (res.data) {
					// 			this.productType = true
					// 			this.detailInfo = res.data
					// 			this.detailShow = true
					// 		}
					// 	})
					// } 
					else {
						// 停车场 卫生间等
						this.detailInfo = {
							title: evt.geometry.name,
							address: evt.geometry.address,
							lon: evt.geometry.position.lng,
							lat: evt.geometry.position.lat
						}
						console.log(this.detailInfo)
						this.productType = true
						this.detailShow = true
					}
				}
			},
			// 路线规划
			gotoLine() {
				this.$router.push({
					path: '/lineList',
					query: {
						code: this.areaList[this.areaIndex].code
					}
				})
			},
			// 关闭弹框后暂停音频
			audioPause() {
				this.$refs.detailRef.audioPlay(false)
			},
			// 添加线路
			addLine() {
				this.$store.commit('changeLineDetail', {})
				if (this.isMyLine) {
					// 已有我的行程
					this.$router.push({
						path: '/lineList',
						query: {
							code: this.areaList[this.areaIndex].code,
							type: '1'
						}
					})
				} else {
					this.lineName = ''
					this.lineDate = ''
					this.addLineShow = true
				}
			},
			// 确认日期
			lineDateConfirm() {
				this.lineDate = moment(this.currentDate).format('YYYY-MM-DD')
				this.lineDateShow = false
			},
			// 输入线路名称和时间,下一步
			lineClick() {
				if (this.lineName.trim().length == 0 || this.lineDate.trim().length == 0) {
					this.$toast('请输入行程信息')
				} else {
					sessionStorage.setItem('lineName', this.lineName)
					sessionStorage.setItem('lineDate', this.lineDate)
					sessionStorage.setItem('lineCode', this.areaList[this.areaIndex].id)
					this.addLineShow = false
					this.lineRouteShow = true
					this.$nextTick(() => {
						this.$refs.lineRouteRef.upData()
					})
				}
			},
			// 点击添加行程、关闭添加行程弹框，改变景点标识图标
			addlineRoute(status) {
				this.lineRouteShow = false

				if (status) {
					// 点击添加行程重新绘制热点,只展示景点 酒店 餐饮三类
					this.post({
						code: this.areaList[this.areaIndex].code,
					}, '/api/emap/getUserSpotsByCategory').then(res => {
						if (res.code == 1) {
							this.maps = res.data
							// 添加行程时为true
							this.lineAddStatus = true
							// 添加行程时隐藏上方分类和右方区域选择
							this.typeShow = false
							// 移除原先点位
							this.clearMarkers()
							if (this.maps.length > 0) this.setMarkers()

							// 点击添加行程更换marker样式
							this.multiMarker.setStyles({
								"marker": new TMap.MarkerStyle({
									"width": 27,
									"height": 33,
									"src": 'https://static.ticket.sz-trip.com/yandu/images/map/add.png'
								})
							})
						}
					})
				} else {
					// 移除原先点位
					this.clearMarkers()
					this.typeShow = true
					this.lineAddStatus = false
					this.setMarkers()
				}
			},
			// 线路详情弹框
			showLineDetail() {
				// 移除原先点位
				this.clearMarkers()
				// 隐藏上方分类
				this.typeShow = false

				this.lineDetailShow = true

				let data = this.$store.state.user.lineDetail
				let paths = []
				let labels = []

				data.points.forEach((item, index) => {
					paths.push(
						new TMap.LatLng(item.lonlat[1], item.lonlat[0])
					)

					labels.push({
						id: 'label', // 点图形数据的标志信息
						styleId: 'label', // 样式id
						position: new TMap.LatLng(item.lonlat[1], item.lonlat[0]), // 标注点位置
						content: (index == 0 ? '起' : (index + 1 == data.points.length ? '终' : (index + 1)
							.toString())), // 标注文本
						properties: {
							// 标注点的属性数据
							title: 'label',
						},
					})
				})

				console.log('paths', paths)
				console.log('labels', labels)

				// 文本标记
				this.multiLabel = new TMap.MultiLabel({
					id: 'label-layer',
					map: this.mapObj,
					collisionOptions: {
						sameSource: true,
					}, //开启图层内部的文本标注碰撞
					styles: {
						label: new TMap.LabelStyle({
							color: '#FF7F00', // 颜色属性
							size: 16, // 文字大小属性
							offset: {
								x: 0,
								y: 0
							}, // 文字偏移属性单位为像素
							angle: 0, // 文字旋转属性
							alignment: 'center', // 文字水平对齐属性
							verticalAlignment: 'middle', // 文字垂直对齐属性
							backgroundColor: '#fff',
							borderRadius: 50,
							padding: '8px',
							width: 23,
							height: 23
						}),
					},
					geometries: labels,
				})

				// 线路
				this.MultiPolyline = new TMap.MultiPolyline({
					id: 'polyline-layer',
					map: this.mapObj,
					styles: {
						"style_blue": new TMap.PolylineStyle({
							"width": 4,
							'color': '#3777FF', //线填充色
							'borderWidth': 2, //边线宽度
							'borderColor': '#FFF', //边线颜色
							'lineCap': 'butt' //线端头方式
						})
					},
					// 折线数据定义
					geometries: [{
						"id": 'style_blue',
						"styleId": 'style_blue',
						"paths": paths
					}]
				})

				setTimeout(() => {
					this.$store.commit('changeLineDetail', {})
				}, 1000)
			},
			// 退出线路
			closeLine() {
				this.lineDetailShow = false
				this.$store.commit('changeLineDetail', {})
				// 移除原先点位
				this.clearMarkers()
				// 移除路线
				if (this.MultiPolyline) {
					this.MultiPolyline.setMap(null);
					this.MultiPolyline = null;
				}
				// 显示上方分类
				this.typeShow = true
				// 地图打点
				this.setMarkers()
			}
		},
		// beforeRouteEnter(to, from, next) {
		// 	console.log(to,from)
		// 	if() {
		// 		next(vm => {

		// 		})
		// 	}

		// }
	};
</script>

<style scoped lang="scss">
	div {
		box-sizing: border-box;
	}

	.mapContainer {
		width: 100%;
		height: 100vh;
	}

	.search-box {
		width: 750px;
		height: 93px;
		background: #FFFFFF;

		input {
			width: 593px;
			height: 60px;
			background: #F2F2F2;
			border-radius: 13px;
			font-weight: 500;
			font-size: 27px;
			color: #999999;
			border: none;
			padding: 0 20px;
		}

		.search-text {
			font-weight: bold;
			font-size: 27px;
			color: #00AEA0;
			margin-right: 10px;
		}
	}

	.search-result {
		width: 100%;
		padding: 0 28px;

		.search-item {
			font-weight: 500;
			font-size: 27px;
			color: #111111;
			margin: 30px 0;
		}
	}

	.type-box {
		position: fixed;
		z-index: 2000;
		width: 750px;
		top: 0;
		left: 0;
		display: flex;
		overflow-x: auto;
		padding: 16px;
		background-color: #fff;

		.type-item {
			padding: 0 26px;
			line-height: 53px;
			background: #F2F2F2;
			border-radius: 13px;
			font-weight: 500;
			font-size: 27px;
			color: #333333;
			margin-right: 27px;
			flex-shrink: 0;
		}

		.type-active {
			background: #00AEA0;
			color: #fff;
		}

		.search {
			padding-right: 21px;
			font-weight: bold;
			font-size: 27px;
			color: #00AEA0;
			border-right: 1px solid #CCCCCC;
			display: flex;
			align-items: center;
			margin-right: 18px;
			white-space: nowrap;

			img {
				width: 25px;
				height: 25px;
				margin-right: 8px;
			}
		}
	}

	.type-box::-webkit-scrollbar {
		display: none;
	}

	.area-box {
		position: fixed;
		z-index: 2000;
		top: 153px;
		right: 17px;

		&>div {
			width: 87px;
			height: auto;
			background: #FFFFFF;
			border-radius: 43px;
			border: 2px solid #FFFFFF;
			overflow: hidden;
		}

		&>div:last-child {
			margin-top: 24px;

			.area-items {
				height: 133px !important;
			}
		}

		.area-item {
			height: 93px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			border-top: 1px solid #D8D8D8;
			font-weight: 500;
			font-size: 22px;
			color: #666666;
		}

		.area-items {
			flex-direction: column;
			justify-content: space-around;
			height: 100px;

			img {
				width: 38px;
				height: 38px;
			}
		}

		.area-active {
			background: linear-gradient(130deg, #9EE4FE, #7FD491);
			color: #000000;
			font-weight: bold;
		}
	}

	// 线路弹框
	.addLine-box {
		width: 673px;
		height: 413px;
		background: #FFFFFF;
		border-radius: 27px;
		padding: 32px 33px 0 37px;
		font-weight: bold;
		font-size: 40px;
		color: #000000;

		.addLine-item {
			font-weight: 400;
			font-size: 29px;
			margin-top: 40px;

			input {
				outline: none;
				border: none;
				height: 27px;
				width: 380px;
				margin-left: 30px;
			}

			input::placeholder {
				color: #BEBEBE;
			}

			img {
				width: 20px;
				height: 20px;
			}
		}

		.addLine-btn {
			margin-top: 50px;

			div {
				width: 233px;
				line-height: 67px;
				background: #EAEAEA;
				border-radius: 13px;
				text-align: center;
				font-weight: 500;
				font-size: 29px;
				color: #000000;
			}

			div:last-child {
				background: #71B580;
				color: #FFFFFF;
			}
		}
	}

	.linePopup {
		overflow: visible;

		.close-LineBtn {
			width: 147px;
			line-height: 67px;
			background: rgba(0, 0, 0, .56);
			border-radius: 13px;
			text-align: center;
			font-weight: 500;
			font-size: 27px;
			color: #FFFFFF;
			position: absolute;
			right: 20px;
			top: -100px;
		}
	}
</style>