<template> <view class="page"> <u-navbar title="开锁" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36' height='36'></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>