bike/page_user/yczn.vue

<template>
	<view class="page">
		<u-navbar title="用车指南" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='40'></u-navbar>
			<view class="cont">
				<view class="tit">
					请在运营区内骑行，否则将断电
				</view>
				<view class="txt">
					地图上 <span style="color: #4C97E7;">蓝色区域</span>即为运营区
				</view>
				<view class="txt">
					1.在运营区外骑行时，车辆可能断电
				</view>
				<view class="txt">
					2.在运营区外还车时，车辆无法及时维修，将额外收
					取调度费
				</view>
				<view class="img">
					<image src="https://api.ccttiot.com/smartmeter/img/static/unYY6S6EsKRM0AMI2AER" mode=""></image>
				</view>
				<view class="tit" style="margin-top: 58rpx;">
					提前确认目的地是否有“还车P点”
				</view>
				<view class="txt">
					地图上 <span style="color: #34C24D ;">绿色区域</span>标有“P”即为还车P点
				</view>
				<view class="txt">
					请在P点内关锁还车，否则将在骑行费用以外，额外 收取调度费
				</view>
				<view class="img">
					<image src="https://api.ccttiot.com/smartmeter/img/static/udVueXhudGgkoyD3tszY" mode=""></image>
				</view>
			</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" >
page{
	background-color: #fff;
}
.page{
	width: 750rpx;
	.cont{
		margin-top: 34rpx;
		margin: 0 auto;
		width: 634rpx;
		.tit{
			margin-bottom: 32rpx;
			width: 610rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			// justify-content: center;
			padding-left: 30rpx;
			background: linear-gradient( 90deg, #91C4FA 0%, rgba(243,243,243,0) 100%);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			font-size: 32rpx;
			color: #3D3D3D;
			line-height: 44rpx;
		}
		.txt{
			margin-top: 16rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #3D3D3D;
			line-height: 38rpx;
		}
		.img{
			margin-top: 38rpx;
			width: 634rpx;
			height: 348rpx;
			image{
				width: 634rpx;
				height: 348rpx;
			}
		}
	}
}
</style>