bike-ali/page_user/ks.vue

<template>
	<view class="page">
		<u-navbar title="开锁" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
			height='45'></u-navbar>
			<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
				:show-location='true' :polygons='polygons' :markers="markers" :polyline="polyline"></map>
			<view class="bot_btn">
				
				<view class="info">
					<div class="left">
						0<span>元</span>
					</div>
					<div class="right">
					00:05
					</div>
				</view>
				<view class="card">
					<view class="tit">
						电单车
					</view>
					<view class="cont">
						<view class="left">
							<view class="text">
								可继续行驶53公里
							</view>
							<view class="speed">
								<view class="speeds">
									
								</view>
							</view>
							<view class="mac">
								NO.74001387
							</view>
						</view>
						<view class="right">
							<image src="https://api.ccttiot.com/smartmeter/img/static/uHTCZOVUbmBkKW4G0wuF" mode=""></image>
						</view>
					</view>
				</view>
				<view class="bot" style="margin-top: 20rpx;">
					
					<view class="btn1" @click="sub1()">
						临时锁车
					</view>
					<view class="btn" @click="sub()">
						还车
					</view>
				</view>
			</view>
			<u-mask :show="show" @click="show = false" :z-index='100'/>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				bgc: {
					backgroundColor: "#F7FAFE",
				},
				latitude: '39.916527',
				longitude: ' 116.397128',
				isMap: false,
				zoomSize: 15,
				 markers: [{
				      id: 1,
				      latitude: 39.90469,
				      longitude: 116.40717,
				      title: 'Marker1'
				    }, {
				      id: 2,
				      latitude: 39.90969,
				      longitude: 116.41217,
				      title: 'Marker2'
				    }],
				polyline: [{
					points: [{
						latitude: 39.916527,
						longitude: 116.397128
					}, {
						latitude: 39.926527,
						longitude: 116.397128
					}, {
						latitude: 39.926527,
						longitude: 116.407128
					}, {
						latitude: 39.916527,
						longitude: 116.407128
					}],
					width:8,
					arrowLine:true,
					color:'#00AF99'
					// strokeWidth: 2,
					// strokeColor: '#00AF99',
					// fillColor: '#00AF99'
				}, ],
				polygons:[ 
					{
				          points: [
				            { latitude: 39.918527, longitude: 116.400128 },
				            { latitude: 39.922527, longitude: 116.400128 },
				            { latitude: 39.924527, longitude: 116.405128 },
				            { latitude: 39.912527, longitude: 116.402128 }
				          ],
				          strokeColor: '#00FF00DD', // 使用不同的颜色来区分第二个区域
				          strokeWidth: 2,
				         fillColor: '#00FF00DD'
				        }
				]
				 
			}
		},
		onShow() {
			console.log(this.$u.config.v);
		},
		methods: {
			sub(){
				uni.showToast({
					title: '骑行前，请先到个人中心支付押金，否 则将无法使用电单车！',
					icon: 'none',
					duration: 2000
				})
			}
		}
	}
</script>

<style lang="scss" >
page{
	background-color: #F7FAFE;
}
.page{
	width: 750rpx;
	.map{
		width: 750rpx;
		height:100vh ;
	}
	
	.bot_btn{
		padding: 36rpx 22rpx 0rpx 22rpx;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 648rpx;
		background: #F7F7F7;
		box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 50rpx 50rpx 0 0  ;
		.info{
			padding: 0 60rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			width: 708rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
		.card{
			margin-top: 12rpx;
			padding: 20rpx 30rpx;
			width: 708rpx;
			height: 288rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			.tit{
				font-weight: 500;
				font-size: 36rpx;
				color: #3D3D3D;
			}
			.cont{
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;
				.left{
					.text{
						font-weight: 400;
						font-size: 28rpx;
						color: #3D3D3D;
					}
					.speed{
						margin-top: 18rpx;
						width: 226rpx;
						height: 22rpx;
						background: #EFEFEF;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						.speeds{
							width: 90%;
							height: 100%;
							background:#77B8FD ;
							border-radius: 16rpx 0rpx 0rpx 16rpx;
						}
					}
					.mac{
						margin-top: 18rpx;
					}
				}
				.right{
					image{
						width: 244rpx;
						height: 196rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
					}
				}
			}
		}
		.bot{
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 184rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08), 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			.btn{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 338rpx;
				height: 90rpx;
				background: #4C97E7;
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
			}
			.btn1{
				margin-right: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 338rpx;
				height: 90rpx;
				border-radius: 45rpx 45rpx 45rpx 45rpx;
				border: 2rpx solid #808080;
				font-weight: 500;
				font-size: 40rpx;
				color: #808080;
			}
		}
	}
}
</style>