zlpt_app/pages/user/user.vue

<template>
	<view>
		<view class="upper-bgd">
			<view class="user">
				<view class="user-lef">
					<image src="../../static/bg2.jpg" mode=""></image>
				</view>
				<view class="user-rig">
					<view class="rig-upper">
						<view>用户名</view>
						<view>标准用户</view>
						<view>安徽博诺思</view>
					</view>
					<view class="rig-lower">
						180****2231
					</view>
				</view>
			</view>
			<view class="setting" @click="openSetting">
				<image src="/static/setting.png" mode=""></image>
			</view>
		</view>
		<view class="sliders">
			<view @click="jumpMyLoan">
				<image src="/static/sufferLoan.png" mode=""></image>
			</view>
			<view @click="jumpMyOffer">
				<image src="../../static/offerLoan.png" mode=""></image>
			</view>
		</view>
		<h3 style="width: 85%; margin: 30rpx auto;">我的内容</h3>
		<view class="my-cont">
			<view class="single-mode">
				<image src="/static/myPage.png" mode=""></image>
				<span>我的主页</span>
			</view>
			<view class="single-mode" @click="jumpMyFavorite">
				<image src="/static/myLike.png" mode=""></image>
				<span>我的收藏</span>
			</view>
			<view class="single-mode" @click="jumpMyItem">
				<image src="/static/myItem.png" mode=""></image>
				<span>我的商品</span>
			</view>
			<view class="single-mode" @click="jumpMyDriver">
				<image src="/static/myDriver.png" mode=""></image>
				<span>我的机手</span>
			</view>
		</view>
		<!-- <button @click="exitLogin">退出登录</button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			openSetting () {
				console.log('setting');
				uni.navigateTo({
					url: '/pages/setting/setting'
				})
			},
			jumpMyLoan () {
				uni.navigateTo({
					url: '/pages/myLoan/myLoan'
				})
			},
			jumpMyOffer () {
				uni.navigateTo({
					url: '/pages/myOffer/myOffer'
				})
			},
			jumpMyFavorite () {
				uni.navigateTo({
					url: '/pages/myFavorite/myFavorite'
				})
			},
			jumpMyItem () {
				uni.navigateTo({
					url: '/pages/myItem/myItem'
				})
			},
			jumpMyDriver () {
				uni.navigateTo({
					url: '/pages/myDriver/myDriver'
				})
			}
		}
	}
</script>

<style lang="scss">
	body{
		background-color: #F4FAFF;
	}
	.upper-bgd{
		width: 100%;
		height: 40vh;
		background: url('/static/userBg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding-top: 12vh;
		position: relative;
		.user{
			width: 85%;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 15rpx;
			display: flex;
			.user-lef{
				width: 25%;
				height: 150rpx;
				border-radius: 50%;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.user-rig{
				flex: 1;
				box-sizing: border-box;
				padding: 15rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.rig-upper{
					width: 100%;
					display: flex;
					view{
						margin-right: 15rpx;
						box-sizing: border-box;
						padding: 8rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 12px;
						background: linear-gradient(90deg, #43EDFF, #4689EB);
					}
					view:first-child{
						background: transparent;
						font-size: 16px;
					}
				}
				.rig-lower{
					margin-top: 15rpx;
					color: #fff;
					font-size: 12px;
				}
			}
		}
		.setting{
			position: absolute;
			width: 50rpx;
			height: 50rpx;
			top: 30rpx;
			right: 30rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.sliders{
		width: 85%;
		height: 150rpx;
		margin: 0 auto;
		margin-top: -10vh;
		margin-bottom: 5vh;
		display: flex;
		view{
			width: 50%;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.my-cont{
		width: 85%;
		margin: 0 auto;
		background-color: #fff;
		box-sizing: border-box;
		padding: 25rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		border-radius: 15rpx;
		.single-mode{
			width: 16%;
			height: 150rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			image{
				width: 100%;
				height: 65%;
			}
			span{
				font-size: 20rpx;
			}
		}
	}
</style>