jp-commuter-ds/pages/index/sitePage.vue

<template>
	<view>
		<car-common     ref="common"></car-common>
		<u-navbar title="站点主页"  >
			<view class="slot-wrap"></view>
			<view class="navbar-right" @click="mapopenBtn"  >
				<u-icon name="plus-circle" v-if="!mapopen" color="#999" size="28"></u-icon>
				<span v-if="!mapopen">放大地图</span>
				<u-icon name="minus-circle" v-if="mapopen" color="#999" size="28"></u-icon>
				<span v-if="mapopen">缩小地图</span>
			</view>
		</u-navbar>
		<carmap ref="amap" @onload="mapdown"></carmap>
		<view class="sitePage-currentSite">
			<u-icon name="zhanpai" custom-prefix="custom-icon" size="40" color="#1677ff"></u-icon>
			<span>{{nearbyStationInfo.stationName}}</span>
			<p>距离{{nearbyStationInfo.distance}}米</p>
		</view> 
		<view class="sitePage-route">
			<view class="route-item" v-for="li,i in nearbyStationInfo.nearbyShiftDTOList " :key="i" @click="gotoLine(li,nearbyStationInfo.stationId)">
				<view class="route-text">
					<h4>{{li.routeName}}</h4>
					<p>开往:{{li.endStationName}} {{li.currentStationName&&li.des!='等待发车'?'当前:'+li.currentStationName:''}}</p>
				</view>
				<view class="route-gap" >
					<view class="route-gap stop">
						<span>{{li.des?li.des:"等待发车"}}</span>
						<u-icon name="arrow-right" color="#999" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from './sitePage.js'
	export default   api
</script>

<style>
	page{
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.sitePage-currentSite{
		background-color: #fff;
		height: 50px;
		display: flex;
		padding: 0 15px;
		align-items: center;
		span{
			font-size: 18px;
			margin-left: 10px;
			font-weight: bold;
		}
		p{
			color:#999;
			margin-left: 10px;
		}
	}
	.sitePage-route{
		margin: 10px;
		.route-item{
			padding:  20rpx;
			background-color: #fff;
			border-bottom: 1px solid #f7f7f7;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&:last-child{
				border: none;
			}
			h4{
				font-size: 32rpx;
			}
			p{
				margin-top: 6rpx;
				color:#999;
			}
		}
		.route-gap{
			span{
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 10rpx;
				color:#1677ff;
			}
			&.stop{
				span{color:#ff731d}
			}
		}
	}	
	
	.navbar-right {
				display: flex;
				margin-right: 20rpx;
				span{
					color:rgb(96, 98, 102);
					margin-left: 3px;
				}
			}
			.slot-wrap {
					display: flex;
					align-items: center;
					flex: 1;
				}
</style>