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

<template>
	<view>
		<map style="width: 100%; height: 240px;" scale="12" ></map>
		<view class="map-info">
			<view class="map-text">
				<h4>六中 → 锣场</h4>
				<p>首班：06:05  末班：18:10</p>
			</view>
			<view class="map-btn">
				<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">
				2站3公里
			</view>
			<view class="map-route-main">
				<view class="map-route-origin">
					<view class="map-route-circle"></view>
					<view class="map-route-name">
						1锣场
					</view>
				</view>
				<view class="map-route-item map-after">
					<view class="map-route-circle"></view>
					<view class="map-route-line"></view>
					<view class="map-route-name">
						2东方大道
					</view>
				</view>
				<view class="map-route-item map-now">
					<view class="map-route-car">
						<img src="static/img/car.png" alt="">
					</view>
					<view class="map-route-circle"></view>
					<view class="map-route-line"></view>
					<view class="map-route-name">
						3小天鹅
					</view>
				</view>
				<view class="map-route-item">
					<view class="map-route-circle"></view>
					<view class="map-route-line"></view>
					<view class="map-route-name">
						4宿架转盘
					</view>
				</view>
				<view class="map-route-item">
					<view class="map-route-circle"></view>
					<view class="map-route-line"></view>
					<view class="map-route-name">
						5荆棉
					</view>
				</view>
				<view class="map-route-item map-geton">
					<view class="map-geton-mark">
						<img src="static/img/up.png" alt="">
					</view>
					<view class="map-route-circle"></view>
					<view class="map-route-line"></view>
					<view class="map-route-name">
						6跃进村
					</view>
				</view>
				<view class="map-route-item">
					<view class="map-route-circle"></view>
					<view class="map-route-line"></view>
					<view class="map-route-name">
						7变电站
					</view>
				</view>
				<view class="map-route-item">
					<view class="map-route-circle"></view>
					<view class="map-route-line"></view>
					<view class="map-route-name">
						8跃进村
					</view>
				</view>
				<view class="map-route-item">
					<view class="map-route-circle"></view>
					<view class="map-route-line"></view>
					<view class="map-route-name">
						9变电站
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</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>