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

<template>
	<view class="jpmain ">
		<view class="title">
			<view class="name">
				<view class="stationName">
					<img class="img" src="@/assets/img/parkingDetails/item1.png" alt="">
					<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>
				</view>
			</view>
			<view class="value">
				<view class="item1">
					<img class="img" src="@/assets/img/parkingDetails/item2.png" alt="">
				</view>
				<view class="item2">切换</view>
			</view>
		</view>
		<view class="body">


			<view class="describe ">
				<view class="item1">
					地址：<span>荆州市沙市区江津东路155号</span>
				</view>
				<view class="item2">
					<view class="item-a">
						车位总数：<span>4个</span>
					</view>
					<view class="item-b">
						空闲车位：<span>4个</span>
					</view>
					<view class="item-c">
						<img class="img" src="@/assets/img/if-location-pin@1x.png" alt="">
						降锁说明
					</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/item4.png" alt="">

						<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>
					</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>
		</view>
	</view>
</template>

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

			}
		},
		methods: {

		}
	}
</script>

<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);

		.name {
			display: flex;
			align-items: center;

			.stationName {
				font-size: 40rpx;

				display: flex;
				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;
		}

	}

	.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: 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>