bike/page_user/cktcd.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="bottom_box">
				<view class="ipt_box">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uWdTrNcIOdyYWEkLWADa" mode=""></image>
					<input type="text" class="ips" v-model="code" placeholder="输入目的地，为您查看据目的地最近停车点" placeholder-style='font-weight: 400;font-size: 36rpx;color: #808080;' />
				</view>
				<view class="txt">
					附近地点
				</view>
				<view class="cont">
					<view class="card_li" v-for="item in 10" :key="item">
						<view class="left">
							<image src="https://api.ccttiot.com/smartmeter/img/static/u54A3pRfspqwr9LPzGuT" mode=""></image>
						</view>
						<view class="center">
							<view class="address">
								福建福鼎雄欣针织公司
							</view>
							<view class="infoadd">
								建国海滨路福鼎第四中学东北
							</view>
							<view class="tip">
								附近有停车点
							</view>
						</view>
						<view class="right">
							2m
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				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: 26.942905,
						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'
				        }
				]
				 
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" >
page{
	background-color: #F7FAFE;
}
.page{
	width: 750rpx;
	.map{
		width: 750rpx;
		height:100vh ;
	}
	.bottom_box{
		// padding: 28rpx 38rpx;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 654rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 50rpx;
		
		.ipt_box{
			margin-top: 28rpx;
			margin-left: 38rpx;
			margin-right: 38rpx;
			padding-left: 30rpx;
			display: flex;
			align-items: center;
			width: 674rpx;
			height: 86rpx;
			background: #EFEFEF;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
			}
			.ips{
				width: 90%;
			}
		}
		.txt{
			margin-left: 46rpx;
			margin-right: 38rpx;
			margin-top: 24rpx;
			// margin-left: 8rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #3D3D3D;
		}
		
		/* 隐藏滚动条 */
		.cont::-webkit-scrollbar {
		  display: none;
		}
		.cont{
			padding-bottom: 100rpx;
			margin-left: 38rpx;
			margin-right: 38rpx;
			display: flex;
			flex-wrap: wrap;
			height: 500rpx;
			overflow-y: auto; /* 添加垂直滚动条 */
			.card_li{
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				padding-top: 32rpx;
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #EFEFEF ;
				.left{
					margin-right: 36rpx;
					width: 44rpx;
					height: 44rpx;
					image{
						width: 44rpx;
						height: 44rpx;
					}
				}
				.center{
					width: 75%;
					display: flex;
					flex-wrap: wrap;
					.address{
						width: 100%;
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
					}
					.infoadd{
						width: 100%;
						font-weight: 400;
						font-size: 20rpx;
						color: #808080;
					}
					.tip{
						width: 100%;
						font-weight: 700;
						font-size: 20rpx;
						color: #4C97E7;
					}
				}
				.right{
					margin-left: auto;
					font-weight: 500;
					font-size: 20rpx;
					color: #808080;
				}
			}
		}
	}
}
</style>