jp-floorlock-manage/pages/userTab/dataUser.vue

<template>
	<view>
		<u-navbar title="用户详情"></u-navbar>
		<view class="gradient-header">
			<view class="jpback">

			</view>
		</view>
		<view class="main">
			<view class="statistics ">
				<view class="data1">
					<view class="imgclass">
						<img class="img" src="@/assets/img/默认头像.png" mode=""></img>

					</view>
					<view class="item">
						<view class="name">
							软件园
						</view>
						<view class="value">
							<image class="img img1" src="@/assets/img/userTab/index1-2.svg" mode=""></image>
							123111
							<image class="img img2" src="@/assets/img/userTab/index1-1.svg" mode=""></image>
							123111
						</view>
					</view>


				</view>
			</view>

			<u-divider border-color="#CFD2D5">已经到底了</u-divider>

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

<script>
	import jpContent from '@/components/JPcontent.vue'
	import * as echarts from 'echarts';
	export default {
		components: {

			jpContent
		},
		data() {
			return {
				echartsList: {},
				jpContentMap: {
					body1: 2,
					body2: 2,
					body3: 2,
					body4: 2,
					body5: 2,
					body6: 2,
					body7: 2,
					body8: 2,
					body9: 2,
					body10: 2,
				},
			};
		}
	}
</script>

<style lang="scss">
	.gradient-header {
		height: 0px;
	}

	.jpback {
		height: 268rpx;
		background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(203, 234, 255, 0) 100%);
	}

	.main {

		padding: 32rpx;

		.no_statistics {
			margin-bottom: 24rpx;
		}

		.statistics {
			border-radius: 8px;
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
			margin-bottom: 24rpx;
			padding: 40rpx;

			.title {
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;
				font-weight: bold;

				.img {
					width: 36rpx;
					height: 36rpx;
					vertical-align: middle;
					border-radius: 999px;

				}

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

					.change-img {
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
					}

					text {

						margin-left: 8rpx;
					}
				}


				.text {
					color: rgba(16, 16, 16, 1);
					font-size: 36rpx;
					margin-left: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;

					.tag {
						border-radius: 4px;
						border: 1px solid rgba(187, 187, 187, 1);
						color: rgba(51, 51, 51, 1);

						font-size: 24rpx;
						padding: 1px 8rpx;
						margin-left: 8rpx;
					}

				}

				.change {
					margin-left: 16rpx;
					font-size: 24rpx;
					color: #838383;

				}

				.check-all {
					margin-left: auto;
					color: rgba(131, 131, 131, 1);
					font-size: 24rpx;
				}
			}
		}
	}

	.data1 {
		display: flex;

		.imgclass {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 72rpx;
			height: 72rpx;
			border-radius: 4px;
			background-color: #E5E5E5;
		}

		.item {
			margin-left: 16rpx;

			.name {
				font-size: 36rpx;
				color: rgba(16, 16, 16, 1);
			}

			.value {
				display: flex;
				align-items: center;
				color: rgba(119, 119, 119, 1);
				font-size: 24rpx;

				.img {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}

				.img1 {}

				.img2 {
					margin-left: 20rpx;
				}
			}
		}
	}
</style>