jp-car-phone/pages/route/index.vue

<template>
	<view>
		<car-common  :mytitle="title"  ref="common"  ></car-common>
		
		<carmap ref="amap"></carmap>
		
		<view class="map-info">
			<view class="map-text" v-if="stationList.length">
				<h4>{{stationList[0].name}} → {{stationList[stationList.length-1].name}}</h4>
				<p>首班：{{routeInfo.startTime}}  末班：{{routeInfo.endTime}}</p>
			</view>
			<view class="map-btn" @click="reverse">
				<u-icon name="swap" custom-prefix="custom-icon"  color="#2979ff"></u-icon>
				<span>换向</span>
			</view>
		</view>
		<view class="map-route">
			<view class="map-route-head" v-if="false">
				2站3公里
			</view>
			<view class="map-route-main">
				<template v-for="item,i in stationList">
					<view   class="scroll-view-item" 
					:class="{'map-route-origin':i==0,'map-route-item':i!=0}"
					 @click="downBtn(item)">
						
						<view class="map-route-circle"></view>
						<view class="map-route-line"></view>
						<view class="map-route-name">
							{{item.name}}
						</view>
					</view>
				</template> 
			</view>
		</view>
	</view>
</template>

<script>
	import api from './index.js'
	export default   api
</script>
<style scoped lang="scss">
	.map-route{
		border-top: 10px solid #f7f7f7;
		background-color: #fff;
		
		.map-route-head{
			font-size: 18px;
			color:#007AFF;
			text-align: center;
			line-height: 40px;
			border-bottom: 1px solid #eee;
		}
		.map-route-main{
			padding: 10px;
			position: relative;
			overflow-x: scroll!important;
			display: -webkit-box;
		}
	}
	.map-info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
	}
	.map-text{
		h4{
			font-size: 16px;
		}
		p{
			margin-top: 10rpx;
			color:#999;
		}
	}
	.map-btn{
		border: 1px solid #007AFF;
		color:#007AFF;
		padding: 5px 15px;
		border-radius:30px ;
		span{
			margin-left: 6rpx;
		}
	}
	.map-route-origin{
		position: relative;
		height: 200px;
		width:15px;
		.map-route-circle{
			position: absolute;
			left: 0;
			top:30px;
			height: 15px;
			width: 15px;
			border-radius: 50%;
			background-color: #999;
			border: 3px solid #fff;
			box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
			z-index: 99;
		}
		.map-route-name{
			position: absolute;
			top: 50px;
			width: 16px;
			line-height: 16px; 
			z-index: 999;
			left: 3px;
		}
	}
	.map-route-item{
		position: relative;
		height: 200px;
		width: 60px;
		.map-route-circle{
			position: absolute;
			right: -2px;
			top:30px;
			height: 15px;
			width: 15px;
			border-radius: 50%;
			background-color: #fff;
			border: 3px solid #1677ff;
			z-index: 99;
		}
		.map-route-line{
			height:6px;
			background-color: #1677ff;
			width:55px;
			position: absolute;
			left: 0px;
			top:35px;
			z-index: 9;
		}
		.map-route-name{
			position: absolute;
			top: 50px;
			width: 16px;
			line-height: 16px; 
			z-index: 999;
			right: -3px;
			text-align: center;
		}
	}
	.map-route-item.map-now{
		.map-route-car{
			height:30px;
			width: 30px;
			position: absolute;
			left: 10px;
			top: 5px;
			img{
				height: 100%;
				width: 100%;
			}
		}
		.map-route-circle{
			border: 3px solid #ff6200;
		}
		.map-route-line{
			background-color: #ff6200;
		}
	}
	.map-route-item.map-after{
		.map-route-circle{
			border: 3px solid #999;
		}
		.map-route-line{
			background-color: #999;
		}
	}
	.map-route-item.map-geton{
		.map-geton-mark{
			width: 20px;
			height: 20px;
			right: 0;
			position: absolute;
			right: -4px;
			top: 5px;
			img{
				height: 100%;
				width: 100%;
			}
		}
		.map-route-circle{
			border: 3px solid #25ad3b;
		}
		.map-route-name{
			color:#25ad3b
		}
	}
</style>