代码格式化

pages/main/ahtml/lockInfo.vue

@@ -189,8 +189,8 @@
 	
 	
 	.jpbutton{
-		border-radius: 50px;
-		width: 80px;
+		border-radius: 100rpx;
+		width: 160rpx;
 		color: #fff;
 		padding: 8rpx;
 		    display: flex;

pages/main/ahtml/nonwhitelist.vue

@@ -1,54 +1,58 @@
-<template>
-	<view class="page">
-		<img class="img" src="@/assets/img/nonwhitelist/info.png" alt="">
-		<view class="text1">暂无权限</view>
-		<view class="text2">此车位仅限车主及白名单用户使用</view>
-		<view class="botton">返回首页</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
-	}
-</script>
-
-<style  scoped lang="scss" >
-	.page{
-		padding-top:120rpx;
-		    display: flex;
-		    flex-direction: column;
-		    align-items: center;
-			.img{
-				width: 500rpx;
-				height: 500rpx;
-			}
-		.text1{
-			color: rgba(51,51,51,1);
-			font-weight: bold;
-			font-size: 48rpx;
-			margin-bottom: 16rpx;
-		}
-		.text2{
-			color: rgba(51,51,51,1);
-			font-size: 36rpx;
-			margin-bottom: 100px;
-		}
-		.botton{
-			border-radius: 50px;
-			width: 360rpx;
-			text-align: center;
-			border: 1px solid rgba(187,187,187,1);
-			color: rgba(22,119,255,1);
-			padding:16rpx;
-
-		}
-	}
-</style>
+<template>
+	<view class="page">
+		<img class="img" src="@/assets/img/nonwhitelist/info.png" alt="">
+		<view class="text1">暂无权限</view>
+		<view class="text2">此车位仅限车主及白名单用户使用</view>
+		<view class="botton">返回首页</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page {
+		padding-top: 120rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		.img {
+			width: 500rpx;
+			height: 500rpx;
+		}
+
+		.text1 {
+			color: rgba(51, 51, 51, 1);
+			font-weight: bold;
+			font-size: 48rpx;
+			margin-bottom: 16rpx;
+		}
+
+		.text2 {
+			color: rgba(51, 51, 51, 1);
+			font-size: 36rpx;
+			margin-bottom: 200rpx;
+		}
+
+		.botton {
+			border-radius: 100rpx;
+			width: 360rpx;
+			text-align: center;
+			border: 1px solid rgba(187, 187, 187, 1);
+			color: rgba(22, 119, 255, 1);
+			padding: 16rpx;
+
+		}
+	}
+</style>

pages/main/ahtml/parkingDetails.vue

@@ -4,11 +4,11 @@
 			<view class="name">
 				<view class="stationName">
 					<img class="img" src="@/assets/img/parkingDetails/item1.png" alt="">
-					<span class="item1" >荆鹏软件园</span>
+					<span class="item1">荆鹏软件园</span>
 				</view>
 				<view class="address">
 					<img class="img" src="@/assets/img/if-location-pin@1x-2.png" alt="">
-					<span class="item1" >小于50米</span>
+					<span class="item1">小于50米</span>
 				</view>
 			</view>
 			<view class="value">
@@ -38,68 +38,74 @@
 					</view>
 				</view>
 
-			</view>
-		
+			</view>
+
 			<view class="data ">
 				<view class="info">
 					<view class="name">请选择空闲车位</view>
 					<view class="value">
-						
-							<img class="img" src="@/assets/img/parkingDetails/item3.png" alt="">
-							<span class="item1">使用中</span>
-						
+
+						<img class="img" src="@/assets/img/parkingDetails/item3.png" alt="">
+						<span class="item1">使用中</span>
+
 						<img class="img" src="@/assets/img/parkingDetails/item4.png" alt="">
-							
-								<span>空闲</span>
+
+						<span>空闲</span>
 
 					</view>
 				</view>
 				<view class="list">
 					<view class="item">
-						<view class="name">
-							<img class="img" src="@/assets/img/parkingDetails/item3.png" alt="">
-							
-							1号车位</view>
-						<view class="value">
-							<view class="jpbutton jpbutton1">
-								<img class="img" src="@/assets/img/button/lock.png" alt="">
-								降锁</view>
+						<view class="name">
+							<img class="img" src="@/assets/img/parkingDetails/item3.png" alt="">
+
+							1号车位
+						</view>
+						<view class="value">
+							<view class="jpbutton jpbutton1">
+								<img class="img" src="@/assets/img/button/lock.png" alt="">
+								降锁
+							</view>
 						</view>
 					</view>
-					<view class="item">
-						<view class="name">
-							
-							<img class="img" src="@/assets/img/parkingDetails/item4.png" alt="">
-								
-							1号车位</view>
-						<view class="value">
-							<view class="jpbutton jpbutton2">
-								<img class="img" src="@/assets/img/button/if-spinner.png" alt="">
-							</view>
-						</view>
-					</view>
-					<view class="item">
-						<view class="name">
-							<img class="img" src="@/assets/img/parkingDetails/item3.png" alt="">
-							
-							1号车位</view>
-						<view class="value">
-							<view class="jpbutton jpbutton3">
-								<img class="img" src="@/assets/img/button/ze-success.png" alt="">
-								已降锁</view>
-						</view>
-					</view>
-					<view class="item">
-						<view class="name">
-							
-							<img class="img" src="@/assets/img/parkingDetails/item4.png" alt="">
-								
-							1号车位</view>
-						<view class="value">
-							<view class="jpbutton jpbutton4">
-								使用中
-							</view>
-						</view>
+					<view class="item">
+						<view class="name">
+
+							<img class="img" src="@/assets/img/parkingDetails/item4.png" alt="">
+
+							1号车位
+						</view>
+						<view class="value">
+							<view class="jpbutton jpbutton2">
+								<img class="img" src="@/assets/img/button/if-spinner.png" alt="">
+							</view>
+						</view>
+					</view>
+					<view class="item">
+						<view class="name">
+							<img class="img" src="@/assets/img/parkingDetails/item3.png" alt="">
+
+							1号车位
+						</view>
+						<view class="value">
+							<view class="jpbutton jpbutton3">
+								<img class="img" src="@/assets/img/button/ze-success.png" alt="">
+								已降锁
+							</view>
+						</view>
+					</view>
+					<view class="item">
+						<view class="name">
+
+							<img class="img" src="@/assets/img/parkingDetails/item4.png" alt="">
+
+							1号车位
+						</view>
+						<view class="value">
+							<view class="jpbutton jpbutton4">
+								使用中
+							</view>
+						</view>
 					</view>
 				</view>
 			</view>
@@ -120,165 +126,192 @@
 	}
 </script>
 
-<style  scoped lang="scss" >
+<style scoped lang="scss">
 	.title {
 		background-color: rgba(22, 119, 255, 1);
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		padding:40rpx 32rpx;
-		color: rgba(255,255,255,1);
+		padding: 40rpx 32rpx;
+		color: rgba(255, 255, 255, 1);
 
-		.name{
+		.name {
 			display: flex;
 			align-items: center;
 
-			.stationName {
-				font-size: 40rpx;
+			.stationName {
+				font-size: 40rpx;
 
 				display: flex;
-				align-items: center;
-				.item1{
-					margin: 0 24rpx;
-				}
-				
+				align-items: center;
+
+				.item1 {
+					margin: 0 24rpx;
+				}
+
+			}
+
+			.address {
+				font-size: 28rpx;
+
+				display: flex;
+				align-items: center;
+
+				.item1 {
+					margin: 0 8rpx;
+				}
+			}
+		}
+
+		.value {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			.item2 {
+				font-size: 24rpx;
+
+			}
+		}
+	}
+
+	.describe {
+		font-size: 32rpx;
+		color: rgba(119, 119, 119, 1);
+		padding-bottom: 32rpx;
+		border-bottom: 1px solid rgba(232, 232, 232, 1);
+
+		.item1 {
+			span {
+				color: rgba(51, 51, 51, 1);
+			}
+
+			padding-bottom: 16rpx;
+		}
+
+		.item-a {
+			span {
+				font-weight: bold;
+				color: rgba(51, 51, 51, 1);
+			}
+		}
+
+		.item-b {
+			span {
+				color: rgba(0, 185, 98, 1);
+				font-weight: bold;
 			}
+		}
+
+		.item-c {
+			color: rgba(22, 119, 255, 1);
+			display: flex;
+			align-items: center;
+
+		}
+
+		.item2 {
+			display: flex;
+			justify-content: space-between;
+		}
 
-			.address {
-				font-size: 28rpx;
+	}
+
+	.data {
+		.img {
+			width: 32rpx;
+			height: 32rpx;
+		}
+
+		.info {
+			margin: 32rpx 0;
+			padding: 16rpx;
+			display: flex;
+			justify-content: space-between;
+			border-radius: 8rpx;
+
+			border: 1px solid rgba(216, 220, 226, 1);
+
+			.value {
+				display: flex;
+				align-items: center;
+
+				.item1 {
+					margin-right: 40rpx;
+				}
+
+				span {
+					margin-left: 8rpx;
+				}
+			}
+		}
 
+		.list {
+			.item {
 				display: flex;
-				align-items: center;
-				.item1{
-					margin: 0 8rpx;
+				justify-content: space-between;
+				margin-bottom: 24rpx;
+
+				.name {
+					font-weight: bold;
+					font-size: 36rpx;
+					display: flex;
+					align-items: center;
+
+					.img {
+						width: 50rpx;
+						height: 50rpx;
+						margin-right: 16rpx;
+					}
 				}
 			}
-		}
-		.value{
-			    display: flex;
-			    flex-direction: column;
-			    align-items: center;
-				.item2{
-					font-size: 24rpx;
-
-				}
 		}
-	}
-	.describe{
-		font-size: 32rpx;
-		color: rgba(119,119,119,1);
-		padding-bottom: 32rpx;
-		border-bottom: 1px solid rgba(232,232,232,1);
-		.item1{
-			span{
-				color: rgba(51,51,51,1);
-			}
-			padding-bottom: 16rpx;
-		}
-		.item-a{
-			span{
-				font-weight: bold;
-				color: rgba(51,51,51,1);
-			}
-		}
-		.item-b{
-			span{
-				color: rgba(0,185,98,1);
-				font-weight: bold;
-			}
-		}
-		.item-c{
-			color: rgba(22,119,255,1);
-			    display: flex;
-			    align-items: center;
-
-		}
-		.item2{
-			    display: flex;
-			    justify-content: space-between;
-		}
-		
-	}
-	
-	.data{
-		.img{
-			width: 32rpx;
-			height: 32rpx;
-		}
-		.info{
-			margin: 32rpx 0;
-			padding: 16rpx ;
-			    display: flex;
-			    justify-content: space-between;
-				border-radius: 8rpx;
-				
-				border: 1px solid rgba(216,220,226,1);
-				.value{
-					    display: flex;
-					    align-items: center;
-						.item1{
-							margin-right: 40rpx;
-						}
-						span{
-							margin-left: 8rpx;
-						}
-				}
-		}
-		.list{
-			.item{
-				    display: flex;
-				    justify-content: space-between;
-					margin-bottom: 24rpx;
-					.name{
-						font-weight: bold;
-						font-size: 36rpx;
-						display: flex;
-						    align-items: center;
-							.img{
-								width: 50rpx;
-								height: 50rpx;
-								margin-right: 16rpx;
-							}
-					}
-			}
-		}
-	}
-	.jpbutton{
-		border-radius: 50px;
-		width: 80px;
-		color: #fff;
-		padding: 8rpx;
-		    display: flex;
-		    align-items: center;
-		    justify-content: center;
-	}
-	.jpbutton1{
-		background-color: #2979FF;
-	}
-	.jpbutton2{
-		background-color: #2979FF;
-		 .img {
-		            width: 40rpx;
-		            height: 40rpx;
-		            animation: spin 2s linear infinite; /* 添加无限旋转动画 */
-
-		        }
-		
-		       /* 定义旋转动画 */
-		               @keyframes spin {
-		                   from {
-		                       transform: rotate(0deg); /* 起始角度 */
-		                   }
-		                   to {
-		                       transform: rotate(360deg); /* 结束角度 */
-		                   }
-		               }
-	}
-	.jpbutton3{
-		background-color: #00B962;
-	}
-	.jpbutton4{
-		background-color: #A7A2A2;
-	}
-	
+	}
+
+	.jpbutton {
+		border-radius: 100rpx;
+		width: 160rpx;
+		color: #fff;
+		padding: 8rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.jpbutton1 {
+		background-color: #2979FF;
+	}
+
+	.jpbutton2 {
+		background-color: #2979FF;
+
+		.img {
+			width: 40rpx;
+			height: 40rpx;
+			animation: spin 2s linear infinite;
+			/* 添加无限旋转动画 */
+
+		}
+
+		/* 定义旋转动画 */
+		@keyframes spin {
+			from {
+				transform: rotate(0deg);
+				/* 起始角度 */
+			}
+
+			to {
+				transform: rotate(360deg);
+				/* 结束角度 */
+			}
+		}
+	}
+
+	.jpbutton3 {
+		background-color: #00B962;
+	}
+
+	.jpbutton4 {
+		background-color: #A7A2A2;
+	}
 </style>