iot-platform-app/pages/user/user.vue

<template>
	<view class="user">
		<view class="user-info">
			<view class="user-img">
				<image src="../../static/images/people@2x.png" mode=""></image>
			</view>
			<view class="user-text">
				<view class="name">
					admin
				</view>
				<view class="address">
					福建宏星电子科技有限公司
				</view>
			</view>
			<view class="">
				<uni-icons color="#fff" type="right" size="30"></uni-icons>
			</view>
		</view>
		<ul class="user-list">
			<li>
				<view class="list-left">
					<image src="../../static/images/icon_sbxx@2x.png" mode=""></image>
					<view class="text">
						设备信息
					</view>
					<uni-icons style="color:#fff" type="right" size="30"></uni-icons>
				</view>
				<view class="">
					<uni-icons color="#999" type="right" size="30"></uni-icons>
				</view>
			</li>
			<li>
				<view class="list-left">
					<image src="../../static/images/icon_qhyy@2x.png" mode=""></image>
					<view class="text">
						切换语言
					</view>
					<uni-icons style="color:#fff" type="right" size="30"></uni-icons>
				</view>
				<view class="">
					<uni-icons color="#999" type="right" size="30"></uni-icons>
				</view>
			</li>
		</ul>
		<view class="login-out" @click="logout">
			退出登录
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				
			}
		},
		methods:{
			logout(){
				uni.navigateTo({
					url: '/pages/user/login'
				})
			},
		},
		created(){
			
		},
	}
</script>

<style lang="less">
	.user{
		.user-list{
			background-color: #fff;
			border-radius: 20rpx;
			position: relative;
			top: -100rpx;
			li{
				height: 120rpx;
				line-height: 120rpx;
				display: flex;
				justify-content: space-between;
				padding: 0 24rpx;
				.list-left{
					display: flex;
					image{
						width: 48rpx;
						height: 48rpx;
						margin: 36rpx 16rpx 36rpx  0;
					}
				}
			}
		}
		.user-info{
			background: linear-gradient(180deg,#3370ff, #f1f1f1);
			height: 500rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;
			color: #fff;
			.user-text{
				position: relative;
				left: -10%;
			}
			.name{
				font-size: 40rpx;
			}
			.address{
				font-size: 28rpx;
				margin-top: 10rpx;
			}
			.user-img{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background-color: #fff;
				image{
					width: 100rpx;
					height: 100rpx;
					margin: 10rpx;
				}
			}
			
		}
		.user-info>view{
			position: relative;
			top: -50rpx;
		}
		text{
			color: #fff;
		}
		.login-out{
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			margin: 0 auto;
			position: fixed;
			left: 45rpx;
			right: 45rpx; 
			bottom: 180rpx;
			background-color: #EAF0FF;
			color: #3370FF;
			border-radius: 45rpx;
		}
	}
</style>