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

<template>
	<view class="jpmain  ">
		<view class="gradient-header">
			<view class="jpback">
				
			</view>
		</view>
		<view class="page-top">
			<!-- <view class="name">
				<img class="img" src="@/assets/img/lockInfo/info1.png" alt="">
			</view> -->
			<!-- <view class="name">
				<img class="img" src="@/assets/img/lockInfo/info2.png" alt="">
			</view> -->
			<view class="name">
				<img class="img" src="@/assets/img/parkingDetails/item4.png" alt="">
			</view>
			<view  class="value">
				未降锁
			</view>
		</view>
		<view class="body">
			
		
		<view class="page">
			<view class="page-main">
				
				<view class="name">
					1号车位<span class="tag">公共车位</span>
				</view>
				<view class="value">
					<view class="jpbutton jpbutton1">
						<img class="img" src="@/assets/img/button/lock.png" alt="">
						降锁</view>
				</view>
			</view>
		</view>
		<view class="page">

			<view class="page-content">
				<view class="tip1">
					<view class="tip-title">温馨提示</view>
					
					<view class="step">

						1、微信扫描位于充电桩立柱或站内墙面上的二维码。
					</view>
					<view class="step">

						2、选择空闲车位。
					</view>
					<view class="step">

						3、选择需要降锁的车位，点击“降锁”按钮。
					</view>
					<view class="step">

						4、降锁完成后提示操作完成，并提示尽快停车。
					</view>
				</view>
				<view class="tip2">
					<view class="tip-title">温馨提示</view>

					<view class="step">1、顺利降锁后有三分钟时间，请及时就位；超时地锁自动升起，请重新扫码降锁。</view>
					<view class="step">2、请按降锁流程说明停车，严禁使用外力降锁。</view>
					<view class="step">3、地锁服务热线 400-0000-000</view>

				</view>
			</view>
		</view>

		</view>
	</view>
</template>

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

			}
		},
		methods: {

		}
	}
</script>

<style  scoped lang="scss">
	/* styles.css */
	page {
		background-color: rgba(242, 244, 246, 1);
	}

	.body {
		padding: 32rpx;
	}
	.gradient-header{
		height: 0px;
	}
	.jpback {
		height: 800rpx;
		background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(203, 234, 255, 0) 100%);
	}
	.page-top{
		padding :40rpx;
		padding-top: 120rpx;
		display: flex;
		    flex-direction: column;
		    align-items: center;
		.name{
			width: 320rpx;
			height: 320rpx;
			display: flex;
			align-items: flex-end;
			.img{
				width: 320rpx;
				    
			}
		}
		.value{
			margin-top: 24rpx;
			font-size: 40rpx;
			font-weight: bold;
			color: #333333;
		}
	}
	.page {
		
		border-radius: 16rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);

		padding: 32rpx;
		margin-bottom: 32rpx;
		font-size: 32rpx;
		color: rgb(16, 16, 16);
		.page-main{
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
				.name{
					color: rgba(51,51,51,1);
					font-size: 36rpx;
					display: flex;
					
					align-items: center;

					.tag{
						margin-left: 8rpx;
						color: rgba(119,119,119,1);
						border-radius: 8rpx;
						padding:1px 4rpx;
						font-size: 24rpx;
						border: 1px solid rgba(187,187,187,1);
					}
				}
				
		}
		.page-content{
			.step{
				margin-bottom: 16rpx;
			}
			.tip-title{
				color:#101010;
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 24rpx;
			}
			.tip1{
				.step{
					color:#101010
				}
				border-bottom: 1px solid rgba(241,241,241,1);
				margin-bottom: 24rpx;
				padding-bottom: 8rpx;
			}
			.tip2{
				
				.step{
					color:#333333
				}
			}
		}
		
		

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