jp-floorlock-phone/pages/ahtml/main/homepage.vue

<template>
	<view class="jpmain body">
		<view class="Area Area1">
			<view class="top">
				<view class="name">附近停车场</view>
				<view class="value">
					<img class="img" src="@/assets/img/homepage/riLine-restart-line.png" alt="">
					重新定位
				</view>
			</view>
			<view class="list">
				<view class="item" @click="gotoUrl('pages/main/ahtml/parkingDetails')">
					<view class="name">				
						<img class="img" src="@/assets/img/homepage/stLine-location-l.svg" alt="">

						软件园</view>
					<view  class="value">小于50米</view>
				</view>
			</view>
		</view>

		<view class="Area Area2">
			<view class="top">
				<view  class="name">全部停车场</view>
				 
			</view>
			<view class="list">
				<view class="item" @click="gotoUrl('pages/main/ahtml/nonwhitelist')" >
					<view class="name">	<img class="img" src="@/assets/img/homepage/stLine-location-l.svg" alt="">

						奥体中心</view>
					<view  class="value">小于50米</view>
				</view>
				<view class="item">
					<view class="name"><img class="img" src="@/assets/img/homepage/stLine-location-l.svg" alt="">

						玉泉</view>
					<view  class="value">小于50米</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.body {
		padding: 32rpx;
	}

	.Area {
		.img{
			margin:  0 8rpx;
		}
		
		margin-bottom: 32rpx;
		.top {
			margin-bottom: 8rpx;
			display: flex;
			justify-content: space-between;
			
			.name {
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				font-weight: bold;
			}

			.value {
				color: rgba(22, 119, 255, 1);
				font-size: 24rpx;
				    display: flex;
				    align-items: center;
					.img{
						width: 28rpx;
						height: 28rpx;
					}
			}
		}
		
		.list {
			.item {
				display: flex;
				justify-content: space-between;
				padding: 16rpx 0;
				.name {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					display: flex;
						    align-items: center;
					.img{
						width: 32rpx;
						height: 32rpx;
					}
					
				}
				
				.value {
					color: rgba(119,119,119,1);

					font-size: 28rpx;
				}
			}
		}
	}
	.Area2{
		.list{
			.item{
				border-bottom:1px solid rgba(232,232,232,1);;
				
			}
		}
	}
</style>