zhengyi/pages/user/user.vue

<template>
	<view class="container">
		<!-- 用户信息 -->
		<view class="user">
			<!-- 背景图片 -->
			<image src="../../static/img/img17.png" mode="scaleToFill"></image>
			<!-- 用户头像和信息 -->
			<view class="infor">
				<!-- 用户信息 -->
				<view class="infor-left">
					<image src="../../static/error/missing-face.png" mode=""></image>
					<view class="info-box">
						<view class="username">李丹丹</view>
						<view class="phone">13911111111</view>
					</view>
				</view>
				<!-- 设置 -->
				<view class="infor-right">
					<image src="../../static/img/img18.png" mode="scaleToFill"></image>
					<view class="setting">设置</view>
				</view>
			</view>
			<!-- 我的订单 -->
			<view class="order-box">
				<view class="my-order">
					<view class="order">我的订单</view>
					<image src="../../static/img/xiangxia.png" mode="scaleToFill"></image>
				</view>
				<!-- 订单栏 -->
				<view class="order-section">
					<view class="order-item">
						<image src="../../static/img/img19.png" mode="scaleToFill"></image>
						<view class="text">待付款</view>
					</view>
					<view class="order-item">
						<image src="../../static/img/img20.png" mode="scaleToFill"></image>
						<view class="text">待发货</view>
					</view>
					<view class="order-item">
						<image src="../../static/img/img21.png" mode="scaleToFill"></image>
						<view class="text">待收获</view>
					</view>
					<view class="order-item">
						<image src="../../static/img/img22.png" mode="scaleToFill"></image>
						<view class="text">已完成</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 下部分 -->
		<view class="item-box">
			<!-- 我的余额 -->
			<view class="order-section">
				<view class="order-item">
					<image src="../../static/img/img26.png" mode="scaleToFill"></image>
					<view class="text">我的余额</view>
				</view>
				<view class="order-item" @click="nav('/pages/user/accounts')">
					<image src="../../static/img/img23.png" mode="scaleToFill"></image>
					<view class="text">我的佣金</view>
				</view>
				<view class="order-item">
					<image src="../../static/img/img24.png" mode="scaleToFill"></image>
					<view class="text">我的积分</view>
				</view>
				<view class="order-item">
					<image src="../../static/img/img25.png" mode="scaleToFill"></image>
					<view class="text">我的推广</view>
				</view>
			</view>
			<!-- 底部列表 -->
			<view class="btm">
				<view class="ul-btm">
					<image src="../../static/img/img27.png" mode="scaleToFill"></image>
					<view class="text">我的接点</view>
					<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
				</view>
				<view class="ul-btm">
					<image src="../../static/img/img28.png" mode="scaleToFill"></image>
					<view class="text">邀请海报</view>
					<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
				</view>
				<view class="ul-btm">
					<image src="../../static/img/img29.png" mode="scaleToFill"></image>
					<view class="text">会员注册</view>
					<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
				</view>
				<view class="ul-btm">
					<image src="../../static/img/img30.png" mode="scaleToFill"></image>
					<view class="text">收货地址</view>
					<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
				</view>
				<view class="ul-btm">
					<image src="../../static/img/img31.png" mode="scaleToFill"></image>
					<view class="text">联系客服</view>
					<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			nav(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #fff;
	}

	.user {
		image {
			width: 750rpx;
			height: 480rpx;
			position: relative;
		}

		.infor {
			height: 126.5rpx;
			width: 100%;
			// background-color: pink;
			display: flex;
			position: absolute;
			top: 0;
			display: flex;
			justify-content: space-around; // 水平平均分布
			align-items: center; // 垂直居中 
			margin-top: 138rpx;

			.infor-left {
				width: 100%;
				height: 126.5rpx;
				display: flex;
				align-items: center;
				padding-left: 23rpx;

				image {
					width: 126.5rpx;
					height: 126.5rpx;
				}

				.info-box {
					margin-left: 21rpx;
				}

				.username {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #3F7C1F;
				}

				.phone {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #3F7C1F;
				}
			}

			.infor-right {
				width: 165rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 32px 0px 0px 32px;
				display: flex;
				align-items: center; // 垂直居中 
				padding-left: 20rpx;

				image {
					width: 32rpx;
					height: 31rpx;
				}

				.setting {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #3F7C1F;
					padding-left: 10rpx;
				}
			}
		}

		// 我的订单
		.order-box {
			width: 710rpx;
			height: 221rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
			border-radius: 20rpx;
			position: absolute;
			top: 335rpx;
			// display: flex;
			// justify-content: center; // 水平居中
			margin-left: 20rpx;

			.my-order {
				height: 73rpx;
				width: 100%;
				border-bottom: 2rpx solid #F5F5F5;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.order {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					margin-left: 36rpx;
					margin-right: 520rpx;
				}

				image {
					width: 12rpx;
					height: 22rpx;
				}
			}

			.order-section {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.order-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-top: 30rpx;

					image {
						width: 42rpx;
						height: 42rpx;
					}

					.text {
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
		}
	}

	.item-box {
		padding-top: 80rpx;
		height: 900rpx;

		// background-color: #fff;
		// background-color: pink;
		.order-section {
			display: flex;
			align-items: center;
			justify-content: space-between; // 水平平均分布

			.order-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;

				image {
					width: 90rpx;
					height: 90rpx;
				}

				.text {
					margin-top: 10rpx;
					font-size: 26rpx;
					color: #3B3B3B;
				}
			}
		}
	}

	.btm {
		margin-top: 40rpx;
		padding-bottom: 200rpx;
		margin-left: 42rpx;

		.ul-btm {
			width: 100%;
			height: 100rpx;
			display: flex;
			// justify-content: center; // 水平居中
			align-items: center; // 水平居中

			// justify-content: center; // 垂直居中
			image {
				width: 35rpx;
				height: 35rpx;
			}

			.text {
				margin-right: 468rpx;
				margin-left: 30rpx;
			}

			.jiantou {
				width: 16rpx;
				height: 30rpx;
			}
		}
	}
</style>