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

<template>
	<view class="jpmain  ">
		<view class="gradient-header">
			<view class="jpback">

			</view>
		</view>

		<view class="body">

			<view class="page-top" @click="gotoUrl('pages/main/ahtml/information')" >

				<view class="name">
					<view class="photo">
						<img class="img" src="@/assets/img/parkingDetails/item4.png" alt="">
					</view>
					<view class="text">
						<view class="text1">昵称</view>
						<view class="text2">13111111111</view>
					</view>
				</view>
				<view class="value">
					<u-icon name="arrow-right" size="24" color="#fff"></u-icon>
				</view>
			</view>
			<view class="page">
				<view class="page-main">

					<view class="item">
						<view class="name">1</view>
						<view class="value">车位</view>
					</view>
					<view class="item2">

					</view>
					<view class="item">
						<view class="name">1</view>
						<view class="value">白名单</view>
					</view>

				</view>
			</view>
			<view class="page">

				<view class="page-content">
					<view class="item" @click="gotoUrl('pages/main/ahtml/mylock/myLock')" >
						<view class="title">
							<img class="img" src="@/assets/img/center/icon1.png" alt="">
							我的地锁
						</view>
						<view class="goto">
							<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
						</view>
					</view>
					<view class="item">
						<view class="title">
							<img class="img" src="@/assets/img/center/icon1.png" alt="">
							我的地锁
						</view>
						<view class="goto">
							<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
						</view>
					</view>
				</view>
			</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;
	}

	.gradient-header {
		height: 0px;
	}

	.jpback {
		height: 268rpx;
		background: linear-gradient(180deg, rgba(22, 119, 255, 1) 20%, rgba(121, 177, 255, 1) 100%);
	}

	.page-top {

		color: #fff;
		display: flex;
		justify-content: space-between;
		margin: 48rpx 0;

		.name {

			display: flex;
			align-items: flex-end;

			.photo {
				border-radius: 50px;
				background-color: rgba(229, 229, 229, 1);
				height: 100rpx;
				width: 100rpx;
				overflow: hidden;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				margin-left: 24rpx;

				.text1 {
					font-weight: bold;
					font-size: 40rpx;
				}

				.text2 {

					font-size: 32rpx;

				}
			}

		}

		.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:0 32rpx;
		margin-bottom: 32rpx;
		font-size: 32rpx;
		color: rgb(16, 16, 16);

		.page-main {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding:24rpx;
			.item {
				.name {
					font-size: 56rpx;
					color: #333333;
					font-weight: bold;
				}

				.value {
					color: rgba(146, 146, 176, 1);
					font-size: 32rpx;
				}

				display: flex;
				flex-direction: column;
				align-items: center;


			}

			.item2 {
				border-right: 1px solid rgba(187, 187, 187, 0.43);
				height: 70rpx;
			}

		}

		.page-content {
			.item:not(:last-child) {
			  border-bottom:1px solid rgba(232,232,232,1);
			}
			.item {
				padding: 32rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					display: flex;
					justify-content: space-between;
					display: flex;
					align-items: center;
					color: rgba(51,51,51,1);
					.img {
						width: 32rpx;
						height: 32rpx;
						
						margin-right: 16rpx;
					}
				}
			}
		}



	}
</style>