<template>
	<view class="wrap">
		<view class="top">
			<view class="name">
				长江索道
			</view>
			
			<view class="tip">
				请确认出行方向，选择对应的出发站点，确定后，无法更改，请谨慎选择！
			</view>
			
			<view class="map">
				<image src="@/pages/my/static/takeNumber/sdMap.jpg" mode="widthFix"></image>
			</view>
			
			<view class="choose">
				<view class="choose-content">
					<view class="choose-name">
						北站
					</view>
					
					<view class="choose-add">
						解放碑.新华路
					</view>
				</view>
				
				<view class="choose-content">
					<view class="choose-name">
						南站
					</view>
					
					<view class="choose-add">
						南岸区.上新街
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<text class="btn" style="background: #fff;color: #999;margin-right: 80rpx;">
				取消
			</text>
			<text class="btn">
				确定
			</text>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
				
    }
  },
  methods: {
			
  }
}
</script>

<style lang="scss" scoped>
.wrap{
	height: 100%;
	background: #ECF3FE;
	padding: 24rpx;
}
.top{
	background: #ffffff;
	box-shadow: 0px 0px 16rpx 2rpx rgba(54,136,255,0.16);
	border-radius: 16rpx;
	padding: 48rpx 24rpx;
	text-align: center;
}
.name{
	font-size: 40rpx;
	font-weight: bold;
	color: #191919;
}
.tip{
	font-size: 32rpx;
	color: #FC771D;
	line-height: 48rpx;
	margin-top: 24rpx;
}
.map{
	margin-top: 48rpx;
	image{
		width: 100%;
	}
}
.choose{
	margin-top: 48rpx;
	display: flex;
	justify-content: space-between;
}
.choose-content{
	baackground: rgba(54,136,255,0);
	border-radius: 8rpx;
	border: 1px solid #BFD9FF;
	padding:24rpx 0;
	width: 280rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.choose-name{
	font-size: 36rpx;
	font-weight: bold;
}
.choose-add{
	color:#999999;
	font-size: 26rpx;
	margin-top: 16rpx;
}
.bottom{
	margin-top:48rpx;
	display: flex;
	justify-content: center;
}
.btn{
	display: inline-block;
	line-height: 60rpx;
	width: 212rpx;
	height: 80rpx;
	background: #3688FF;
	border-radius: 40rpx
}
</style>
