zx_flk_app/pages/userManagement/userManagement.vue

<template>
	<view class="user-card">
		<view class="flex-row align-center user-card-heard">
			<img style="width: 48rpx;height: 48rpx;" src="https://qiniu.bms16.com/FieeNq75ybyjIzQO6fmNcdTlRsp5" alt="">
			<text style="margin-left: 16rpx;">共享用户</text>
		</view>
		<view class="user-card-text">家人、朋友长期共用车辆，授权账户可以使用感应解锁，寻车定位，查看设置等功能；</view>
		<!-- <view v-for="(item,index) in userList" :key="index"> -->
		<view @tap="navUserSet" data-item="item" class="user-list flex-row align-center" >
			<img class="user-heard-img" src="https://qiniu.bms16.com/FprjgdYTzB9LDkHZT1F-p_kQKNty" alt="">
			<view class="user-name-view">
				<view class="user-name">名字</view>
				<view class="user-email">154535486@mail</view>
			</view>
			<img class="user-nav-img" src="https://qiniu.bms16.com/FqnbZ2iKHmzCGJA8XD30sf5g_CAm" alt="">
		</view>
		<view class="user-list flex-row align-center">
			<img class="user-heard-img" src="https://qiniu.bms16.com/FprjgdYTzB9LDkHZT1F-p_kQKNty" alt="">
			<view class="user-name-view">
				<view class="user-name">名字</view>
				<view class="user-email">154535486@mail</view>
			</view>
			<img class="user-nav-img" src="https://qiniu.bms16.com/FqnbZ2iKHmzCGJA8XD30sf5g_CAm" alt="">
		</view>
		<view @tap="addUser" class="flex-row user-card-btn align-center">
			<img style="width: 20rpx;height: 20rpx;" src="https://qiniu.bms16.com/FvP_5VTgawzExIHW3kJahXAvE04z" alt="">
			<text style="margin-left: 6rpx;">添加成员</text>
		</view>
	</view>
</template>

<script>
	var config = require('../../common/config.js');
	export default {
		data() {
			return {
				userList:[]
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
		},
		methods: {
			addUser(){
				uni.navigateTo({
					url:'/pages/powerSetting/powerSetting'
				})
			},
			navUserSet(e){
				const params=e.currentTarget.dataset.item
				uni.navigateTo({
					url:'/pages/powerSetting/powerSetting?params='+JSON.stringify(params)
				})
			}
		}
	};
</script>
<style>
.user-card{
	background: #FFFFFF;
	border-radius: 40rpx;
	border: 4rpx solid #FFFFFF;
	margin: 24rpx;
	padding: 32rpx 32rpx 48rpx ;
}
.align-center{
	align-items: center;
}
.user-card-heard{
	font-weight: 600;
	font-size: 40rpx;
	color: #060809;
	margin-bottom: 16rpx;
}
.user-card-text{
	font-weight: 400;
	font-size: 28rpx;
	color: #060809;
	margin-bottom: 40rpx;
	opacity: 0.4;
}
.user-card-btn{
	justify-content: center;
	font-weight: 600;
	font-size: 32rpx;
	color: #060809;
}
.user-heard-img{
	width: 112rpx;
	height: 112rpx;
	border-radius: 50%;
}
.user-name-view{
	margin-bottom: 48rpx;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	margin-left: 24rpx;
	padding: 0 18rpx;
}
.user-name{
	font-weight: 600;
	font-size: 32rpx;
	color: #060809;
	padding-bottom:20rpx ;
}
.user-email{
	font-weight: 500;
	font-size: 24rpx;
	color: #060809;
	opacity: 0.6;
}
.user-nav-img{
	width: 28rpx;
	height: 28rpx;
}
</style>