修改

App.vue

@@ -17,6 +17,7 @@
 	.app {
 		width: 100%;
 		height: 100%;
+		text-align: justify;
 		color: #000000;
 	}
 </style>

pages/myinformation/myinformation.vue

@@ -5,12 +5,142 @@
 				我的
 			</view>
 			<image src="../../static/pages/userbanner.png" mode="" class="userbanner"></image>
-			<image src="../../static/pages/headsculpture.png" mode="" class="headsculpture"></image>
+			<image src="../../static/headsculpture.png" mode="" class="headsculpture"></image>
-			<view class="name">
+			<view class="namesigning">
+				<span class="name">
 					张三
-			</view>
+				</span>
 				<view class="signing">
-
+					未签约
+				</view>
+			</view>
+			<view class="phone">
+				17869283647
+			</view>
+			<view class="switch btn">
+				切换家庭成员
+			</view>
+			<view class="manage btn">
+				管理家庭成员
+			</view>
+			<view class="Threecategories">
+				<view class="item">
+					<view class="number">
+						0
+					</view>
+					<view class="text">
+						行为积分
+					</view>
+				</view>
+				<view class="item">
+					<view class="number">
+						0
+					</view>
+					<view class="text">
+						健康豆
+					</view>
+				</view>
+				<view class="item">
+					<view class="number">
+						0
+					</view>
+					<view class="text">
+						优惠券
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="myorder">
+			<view class="title">
+				我的订单
+			</view>
+			<view class="righttitle">
+				查看全部
+				<image src="../../static/huijiantou.png" mode=""></image>
+			</view>
+			<view class="orderStatus">
+				<view class="item">
+					<image src="../../static/pages/daifukuan.png" mode=""></image>
+					<view class="text">
+						待付款
+					</view>
+				</view>
+				<view class="item">
+					<image src="../../static/pages/daishouhuo.png" mode=""></image>
+					<view class="text">
+						待收货
+					</view>
+				</view>
+				<view class="item">
+					<image src="../../static/pages/daipingjia.png" mode=""></image>
+					<view class="text">
+						待评价
+					</view>
+				</view>
+				<view class="item">
+					<image src="../../static/pages/yiwancheng.png" mode=""></image>
+					<view class="text">
+						已完成
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="myorder">
+			<view class="title">
+				常用功能
+			</view>
+			<view class="orderStatus">
+				<view class="item">
+					<image src="../../static/pages/jiankangdangan.png" mode=""></image>
+					<view class="text">
+						健康档案
+					</view>
+				</view>
+				<view class="item">
+					<image src="../../static/pages/wodeyuyue.png" mode=""></image>
+					<view class="text">
+						我的预约
+					</view>
+				</view>
+				<view class="item">
+					<image src="../../static/pages/fuwupingjia.png" mode=""></image>
+					<view class="text">
+						服务评价
+					</view>
+				</view>
+				<view class="item"></view>
+			</view>
+		</view>
+		<view class="myorder titles">
+			<view class="title">
+				护理服务订单
+			</view>
+			<view class="righttitle">
+				<image src="../../static/huijiantou.png" mode=""></image>
+			</view>
+		</view>
+		<view class="myorder titles">
+			<view class="title">
+				专家咨询订单
+			</view>
+			<view class="righttitle">
+				<image src="../../static/huijiantou.png" mode=""></image>
+			</view>
+		</view>
+		<view class="myorder titles">
+			<view class="title">
+				签约信息
+			</view>
+			<view class="righttitle">
+				<image src="../../static/huijiantou.png" mode=""></image>
+			</view>
+		</view>
+		<view class="myorder titles">
+			<view class="title">
+				退出登录
+			</view>
+			<view class="righttitle">
+				<image src="../../static/huijiantou.png" mode=""></image>
 			</view>
 		</view>
 	</view>
@@ -28,28 +158,159 @@
 
 <style lang="scss">
 	.app {
+		.titles {
+			height: 80rpx;
+		}
+
+		.myorder {
+			position: relative;
+
+			.orderStatus {
+				text-align: center;
+				margin: 60rpx auto 30rpx;
+				width: 90%;
+				display: flex;
+				justify-content: space-around;
+				padding-bottom: 30rpx;
+
+				.item {
+					width: 25%;
+
+					.text {
+						font-size: 26rpx;
+						color: #333333;
+						margin-top: 10rpx;
+					}
+
+					image {
+						width: 70rpx;
+						height: 60rpx;
+					}
+				}
+			}
+
+			.righttitle {
+				font-size: 26rpx;
+				color: #969494;
+				position: absolute;
+				right: 30rpx;
+				top: 5rpx;
+
+				image {
+					vertical-align: middle;
+					padding-left: 20rpx;
+					width: 13rpx;
+					height: 23rpx;
+					display: inline-block;
+				}
+			}
+
+			.title {
+				margin-left: 30rpx;
+				font-size: 32rpx;
+				color: #4B4B4B;
+			}
+		}
+
 		.topbanner {
 			width: 100%;
-			height: 450rpx;
+			height: 430rpx;
 			position: relative;
+			color: #FFFFFF;
+			margin-bottom: 50rpx;
+
+			.Threecategories {
+				width: 100%;
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				display: flex;
+				justify-content: space-around;
+				padding-bottom: 30rpx;
+
+				.item {
+					width: 33%;
+					text-align: center;
+
+					.text {
+						font-size: 22rpx;
+					}
+
+					.number {
+						font-size: 36rpx;
+						padding-bottom: 10rpx;
+					}
+				}
+			}
+
+			.btn {
+				position: absolute;
+				top: 40%;
+				right: 2%;
+				width: 170rpx;
+				height: 40rpx;
+				line-height: 40rpx;
+				text-align: center;
+				background: #51b9a0;
+				border-radius: 5rpx;
+				font-size: 24rpx;
+			}
+
+			.manage {
+				position: absolute;
+				top: 54%;
+				right: 2%;
+			}
+
+			.phone {
+				position: absolute;
+				top: 56%;
+				left: 30%;
+				font-size: 24rpx;
+			}
+
+			.namesigning {
+				position: absolute;
+				top: 38%;
+				left: 30%;
+
+				.name {
+					display: inline-block;
+					font-size: 36rpx;
+				}
+
+				.signing {
+					text-align: center;
+					margin-left: 30rpx;
+					height: 36rpx;
+					line-height: 36rpx;
+					display: inline-block;
+					width: 90rpx;
+					background: #FFFFFF;
+					border: 2rpx solid #FFA115;
+					border-radius: 5rpx;
+					font-size: 22rpx;
+					color: #FFA115;
+				}
+			}
+
 
 			.title {
 				position: absolute;
-				top: 20%;
+				top: 15%;
 				left: 0%;
 				width: 100%;
 				text-align: center;
 				font-size: 34rpx;
 				font-weight: 600;
-				color: #FFFFFF;
 			}
 
 			.headsculpture {
 				position: absolute;
-				top: 40%;
+				top: 35%;
-				left: 8%;
+				left: 5%;
-				width: 120rpx;
+				width: 150rpx;
-				height: 120rpx;
+				height: 150rpx;
 			}
 
 			.userbanner {