jp-floorlock-phone/pages/ahtml/mylock/myLock.vue

<template>
	<view class="jpmain  ">


		<view class="body">
			

			<view class="page">

				<view class="page-content">
					<view class="item"  @click="gotoUrl('pages/main/ahtml/mylock/infoLock')" >
						<view class="title">

							<view class="name">
								<img class="img" src="@/assets/img/mylock/item1.png" alt="">

								1号车位地锁

							</view>
							<view class="value">
								<span>荆鹏软件园</span>
								<span>公共车位</span>
								<span class="status">审批中</span>
							</view>
						</view>
						<view class="goto">

							<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>

						</view>
					</view>
					<view class="item">
						<view class="title">

							<view class="name">
								<img class="img" src="@/assets/img/mylock/item1.png" alt="">

								1号车位地锁

							</view>
							<view class="value">
								<span>荆鹏软件园</span>
								<span>公共车位</span>
								<span class="status">审批中</span>
							</view>
						</view>
						<view class="goto">

							<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
						</view>
					</view>
					<view class="item">
						<view class="title">

							<view class="name">
								<img class="img" src="@/assets/img/mylock/item1.png" alt="">

								1号车位地锁

							</view>
							<view class="value">
								<span>荆鹏软件园</span>
								<span>公共车位</span>
								<span class="status">审批中</span>
							</view>
						</view>
						<view class="goto">

							<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
						</view>
					</view>
					<view class="item">
						<view class="title">

							<view class="name">
								<img class="img" src="@/assets/img/mylock/item1.png" alt="">

								1号车位地锁

							</view>
							<view class="value">
								<span>荆鹏软件园</span>
								<span>公共车位</span>
								<span class="status">审批中</span>
							</view>
						</view>
						<view class="goto">

							<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
						</view>
					</view>

				</view>
			</view>



		</view>
		<view class="floating-button" @click="gotoUrl('pages/main/ahtml/mylock/bindLock')">
			<view class="button">
				<img class="img" src="@/assets/img/mylock/item2.png" alt="">

				绑定新地锁
			</view>

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

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

			}
		},
		methods: {

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

	.body {
		padding: 32rpx;
	}





	.page {

		.page-content {

			.item {
				padding: 32rpx;
				margin-bottom: 32rpx;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;

				.title {


					.name {
						color: rgba(22, 119, 255, 1);
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 8rpx;
						.img{
							width: 36rpx;
							height: 32rpx;
							margin-right: 8rpx;
						}

					}

					.value {
						color: rgba(119, 119, 119, 1);
						font-size: 24rpx;

						span {
							margin-right: 8rpx;
						}
					}

				}

				.goto {

					color: rgba(119, 119, 119, 1);

				}

			}
		}


	}

	.floating-button {
		position: fixed;
		bottom: 120rpx;
		width: 100%;
		display: flex;

		justify-content: center;

		.button {
			border-radius: 50px;
			background-color: rgba(49, 51, 52, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 28rpx;
			width: 240rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12rpx;
			.img{
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}
	}
</style>