diff --git a/pages/home/myHome.vue b/pages/home/myHome.vue
index d11a852..6fe364f 100644
--- a/pages/home/myHome.vue
+++ b/pages/home/myHome.vue
@@ -1,267 +1,94 @@
 <template>
-
-	<view
-		style="display: flex;flex-direction: column; height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440); box-sizing: border-box;"
-		id="page">
-
+	<view id="page">
+		<!-- 顶部 -->
 		<view class="top">
-			<NavBar ref="nav" navTitle=" " :showIcon="false" :start-change-height="page.startHeight"
-				:end-change-height="page.endHeight">
-			</NavBar>
-
-			<view style="display: flex;flex-direction: row;align-items: center;
-			margin-top: 25vw; margin-left: 8vw;">
-
-				<image style="width: 70px;height: 70px;border-radius: 50%;" :src="userInfo.photo" @click="showDiaLog">
-				</image>
-
-				<view style="display: flex;flex-direction: column;margin-left: 10px;">
-					<text style="font-size: 16px;color: #fff;" @click="showDiaLog">{{userInfo.nick}}</text>
-					<text style="font-size: 14px;color: #fff;">{{userInfo.mobile}}</text>
+			<NavBar ref="nav" navTitle=" " :showIcon="false" :start-change-height="page.startHeight" :end-change-height="page.endHeight"></NavBar>
+			<!-- 用户信息 -->
+			<view class="userinfo">
+				<!-- 头像 -->
+				<image class="head-img" :src="userInfo.photo" @click="showDiaLog"></image>
+				<view class="name-mob">
+					<!-- 昵称 -->
+					<text @click="showDiaLog">{{userInfo.nick}}</text>
+					<!-- 手机 -->
+					<text style="font-size:14px;">{{userInfo.mobile}}</text>
 				</view>
-
 			</view>
-
 		</view>
-
-		<view
-			style="background: #F7F7F7;flex-flow: 1; height: calc(100vh - 50vw - 48px); width: 100%; margin-top: -18vw;border-radius: 25px;">
-
-			<scroll-view scroll-y="true"
-				style=" height: 100%;  width: 100%; padding: 15px;border-radius: 25px; box-sizing: border-box;"
+		<view class="view">
+			<!-- 滚动视图 -->
+			<scroll-view scroll-y="true" class="scroll-view"
 				bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
-
-				<!-- <view
-					style=" display: flex;flex-direction: column;padding-top: 5vw;padding-left: 5vw;padding-right: 5vw;">
-
-					<view style="display: flex;flex-direction: row;align-items: center;">
-
-						<view
-							style="display: flex;flex-direction: column; flex: 1;justify-content: center;align-items: center;">
-
-							<image src="https://supervise.yxtsoft.com/lpk/image/reservation_icon.png"
-								style="width: 30px;height: 30px;"></image>
-							<text style="margin-top: 5px;">预约记录</text>
-						</view>
-						<view
-							style="display: flex;flex-direction: column; flex: 1;justify-content: center; align-items: center;">
-
-							<image src="https://supervise.yxtsoft.com/lpk/image/order_icon.png"
-								style="width: 30px;height: 30px;"></image>
-							<text style="margin-top: 5px;">订单</text>
-						</view>
-						<view
-							style="display: flex;flex-direction: column; flex: 1;justify-content: center;align-items: center; ">
-
-							<image src="https://supervise.yxtsoft.com/lpk/image/forward_icon.png"
-								style="width: 30px;height: 30px;"></image>
-							<text style="margin-top: 5px;">转赠记录</text>
-						</view>
-						<view
-							style="display: flex;flex-direction: column; flex: 1;justify-content: center;align-items: center; ">
-
-						</view>
-
-					</view>
-				</view> -->
 				<!-- 预约记录 -->
-				<view
-					style="display: flex;flex-direction: column; border-radius: 10px;background: #fff; padding: 10px;">
-
-					<text style="font-size: 15px; color: #101010;font-weight: 600;font-family: sans-serif;">预约记录</text>
-
-					<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;">
-
-						<view
-							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
-
-							<view style="position: relative;width: 35px;height: 35px;">
-								<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 5px; "
-									src="../../static/basket_icon.png" mode="aspectFill"></image>
-
-								<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
-								position: absolute;
-								  top: 2px;
-								  right: 0px;
-								  padding: 2px 5px;
-								  width: auto;">{{data.count}}</view>
-
-							</view>
-							<text style="font-size: 13px; color: #101010;margin-top: 5px;">全部预约</text>
-						</view>
-
-						<view
-							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
-
-							<view style="position: relative;width: 35px;height: 35px;">
-								<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 10px; "
-									src="../../static/basket_icon.png" mode="aspectFill"></image>
-
-								<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
-								position: absolute;
-								  top: 2px;
-								  right: 0px;
-								  padding: 2px 5px;
-								  width: auto;">{{data.count}}</view>
-
-							</view>
-							<text style="font-size: 13px; color: #101010;margin-top: 5px;">待提菜</text>
-						</view>
-
-						<view
-							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
-
-							<view style="position: relative;width: 35px;height: 35px;">
-								<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 10px; "
-									src="../../static/basket_icon.png" mode="aspectFill"></image>
-
-								<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
-								position: absolute;
-								  top: 2px;
-								  right: 0px;
-								  padding: 2px 5px;
-								  width: auto;">{{data.count}}</view>
-
+				<view class="icon-cow">
+					<text class="title">预约记录</text>
+					<view class="group">
+						<!-- 待提菜 -->
+						<view class="icon-name">
+							<view class="icon">
+								<image class="img" src="../../static/img/record-query/waiting_extraction.png" mode="aspectFill"></image>
+								<view v-if="data.count>0" class="count">{{data.count}}</view>
 							</view>
-							<text style="font-size: 13px; color: #101010;margin-top: 5px;">已提菜</text>
+							<text class="name">待提菜</text>
 						</view>
-
-						<view
-							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
-
-							<view style="position: relative;width: 35px;height: 35px;">
-								<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 10px; "
-									src="../../static/basket_icon.png" mode="aspectFill"></image>
-
-								<view v-if="data.count==0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
-								position: absolute;
-								  top: 2px;
-								  right: 0px;
-								  padding: 2px 5px;
-								  width: auto;">{{data.count}}</view>
-
+						<!-- 已提菜 -->
+						<view class="icon-name">
+							<view class="icon">
+								<image class="img" src="../../static/img/record-query/extracted.png" mode="aspectFill"></image>
 							</view>
-							<text style="font-size: 13px; color: #101010;margin-top: 5px;">过期未提</text>
+							<text class="name">已提菜</text>
 						</view>
-
+						<view class="icon-name"></view>
+						<view class="icon-name"></view>
 					</view>
 
 				</view>
-
 				<!-- 订单记录 -->
-				<view
-					style="display: flex;flex-direction: column; border-radius: 10px;background: #fff; padding: 10px; margin-top: 10px;">
-
-					<text style="font-size: 15px; color: #101010;font-weight: 600;font-family: sans-serif;">订单记录</text>
-
-					<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;">
-
-						<view
-							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
-
-							<view style="position: relative;width: 35px;height: 35px;">
-								<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 5px; "
-									src="../../static/basket_icon.png" mode="aspectFill"></image>
-
-								<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
-								position: absolute;
-								  top: 2px;
-								  right: 0px;
-								  padding: 2px 5px;
-								  width: auto;">{{data.count}}</view>
-
+				<view class="icon-cow">
+					<text class="title">订单记录</text>
+					<view class="group">
+						<!-- 待付款 -->
+						<view class="icon-name">
+							<view class="icon">
+								<image class="img" src="../../static/img/record-query/obligation.png" mode="aspectFill"></image>
+								<view v-if="data.count>0" class="count">{{data.count}}</view>
 							</view>
-							<text style="font-size: 13px; color: #101010;margin-top: 5px;">待付款</text>
+							<text class="name">待付款</text>
 						</view>
-
-						<view
-							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
-
-							<view style="position: relative;width: 35px;height: 35px;">
-								<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 10px; "
-									src="../../static/basket_icon.png" mode="aspectFill"></image>
-
-								<view v-if="data.count==0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
-								position: absolute;
-								  top: 2px;
-								  right: 0px;
-								  padding: 2px 5px;
-								  width: auto;">{{data.count}}</view>
-
+						<!-- 已提菜 -->
+						<view class="icon-name">
+							<view class="icon">
+								<image class="img" src="../../static/img/record-query/paid.png" mode="aspectFill"></image>
 							</view>
-							<text style="font-size: 13px; color: #101010;margin-top: 5px;">已付款</text>
-						</view>
-
-						<view
-							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
+							<text class="name">已付款</text>
 						</view>
-
-						<view
-							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
-						</view>
-
+						<view class="icon-name"></view>
+						<view class="icon-name"></view>
 					</view>
-
 				</view>
-
 				<!-- 转赠记录 -->
-				<view
-					style="display: flex;flex-direction: column; border-radius: 10px;background: #fff; padding: 10px; margin-top: 10px;">
-
-					<text style="font-size: 15px; color: #101010;font-weight: 600;font-family: sans-serif;">转赠记录</text>
-
-					<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;">
-
-						<view
-							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
-
-							<view style="position: relative;width: 35px;height: 35px;">
-								<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 5px; "
-									src="../../static/basket_icon.png" mode="aspectFill"></image>
-
-								<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
-								position: absolute;
-								  top: 2px;
-								  right: 0px;
-								  padding: 2px 5px;
-								  width: auto;">{{data.count}}</view>
-
+				<view class="icon-cow">
+					<text class="title">转赠记录</text>
+					<view class="group">
+						<!-- 赠与我的 -->
+						<view class="icon-name">
+							<view class="icon">
+								<image class="img" src="../../static/img/record-query/gifted_to_me.png" mode="aspectFill"></image>
 							</view>
-							<text style="font-size: 13px; color: #101010;margin-top: 5px;">赠与我的</text>
+							<text class="name">赠与我的</text>
 						</view>
-
-						<view
-							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
-
-							<view style="position: relative;width: 35px;height: 35px;">
-								<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 10px; "
-									src="../../static/basket_icon.png" mode="aspectFill"></image>
-
-								<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
-								position: absolute;
-								  top: 2px;
-								  right: 0px;
-								  padding: 2px 5px;
-								  width: auto;">{{data.count}}</view>
-
+						<!-- 我的转赠 -->
+						<view class="icon-name">
+							<view class="icon">
+								<image class="img" src="../../static/img/record-query/my_gift.png" mode="aspectFill"></image>
 							</view>
-							<text style="font-size: 13px; color: #101010;margin-top: 5px;">我的转赠</text>
-						</view>
-
-						<view
-							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
-
+							<text class="name">我的转赠</text>
 						</view>
-
-						<view
-							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
-
-						</view>
-
+						<view class="icon-name"></view>
+						<view class="icon-name"></view>
 					</view>
-
 				</view>
-
+				<!-- 推荐有礼 -->
 				<view style="display: flex;flex-direction: column; border-radius: 10px;background: #fff;
 					 padding: 10px; margin-top: 10px;width: 100%;box-sizing: border-box;">
 
@@ -288,7 +115,6 @@
 
 					</view>
 
-
 					<text style="font-size: 12px;color: #4B4B4B; margin-top: 8px;">邀请新朋友后，您和您的朋友将获得“蔬菜品鉴礼包”。</text>
 
 					<!-- <view style="display: flex;flex-direction: row;align-items: center; ">
@@ -312,15 +138,10 @@
 
 
 				</view>
-
-
 				<!-- </loading-state> -->
-
 			</scroll-view>
 
 		</view>
-
-
 	</view>
 </template>
 
@@ -444,6 +265,127 @@
 </script>
 
 <style>
+	#page {
+		display: flex;
+		flex-direction: column; 
+		height: 100vh;
+		background: -webkit-linear-gradient(left,#FEA65F,#FB9440); 
+		box-sizing: border-box;
+	}
+	/* 顶部 */
+	.top {
+		width: 100vw;
+		/* height: 126.66vw; */
+		height: 65vw;
+		/* 加载背景图 */
+		background-image: url(https://supervise.yxtsoft.com/lpk/image/my_bj.png);
+		/* 让背景图基于容器大小伸缩 */
+		background-size: 100% 100%;
+	}
+	/* 顶部-用户信息 */
+	.top .userinfo{
+	    display: flex;flex-direction: row;align-items: center;margin-top: 25vw; margin-left: 8vw;
+	}
+	/* 顶部-用户信息-头像 */
+	.top .userinfo .head-img{
+	    width: 60px;
+		height: 60px;
+		border-radius: 50%;
+	}
+	/* 顶部-用户信息-名称手机 */
+	.top .userinfo .name-mob{
+	    display: flex;
+		flex-direction: column;
+		margin-left: 10px;
+	}
+	/* 顶部-用户信息-名称手机-文本样式 */
+	.top .userinfo .name-mob text{
+		font-size: 16px;color: #fff;
+	}
+	/* 视图 */
+	.view{
+	    background: #F7F7F7;
+		flex-flow: 1; 
+		height: calc(100vh - 50vw - 48px); 
+		width: 100%; 
+		margin-top: -18vw;
+		border-radius: 25px;
+	}
+	/* 滚动视图 */
+	.scroll-view{
+	    height: 100%;
+		width: 100%; 
+		padding: 15px;
+		border-radius: 25px; 
+		box-sizing: border-box;
+	}
+	/* 图标显示行 */
+    .icon-cow {
+		display: flex;
+		flex-direction: column; 
+		border-radius: 10px;
+		background: #fff; 
+		padding: 12px;
+		margin-bottom:10px
+		
+	}
+	/* 图标显示行-标题 */
+	.icon-cow .title {
+	    font-size: 15px; 
+		color: #101010;
+		font-weight: 600;
+		font-family: sans-serif;
+	}
+    /* 图标显示行-图标群 */
+	.icon-cow .group {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		margin-top: 10px;
+	}
+	/* 图标显示行-图标群-图标和名称*/
+	.icon-cow .group .icon-name {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+	/* 图标显示行-图标群-图标和名称-图标*/
+	.icon-cow .group .icon-name .icon {
+		position: relative;
+		width: 35px;
+		height: 35px;
+	}
+	/* 图标显示行-图标群-图标和名称-图标-图片*/
+	.icon-cow .group .icon-name .icon .img{
+	    width: 28px;
+		height: 28px;
+		margin-left: 5px; 
+		margin-top: 5px;
+	}
+	/* 图标显示行-图标群-图标和名称-图标-数量*/
+	.icon-cow .group .icon-name .icon .count {	
+	    border-radius: 50%;
+		text-align: center;
+		background: #f00;
+		color: #fff;
+		font-size: 8px;
+		position: absolute;
+	    top: 2px;
+	    right: 0px;
+	    padding: 2px 5px;
+	    width: auto;
+	}
+	/* 图标显示行-图标群-图标和名称-图标名称*/
+	.icon-cow .group .icon-name .name {
+		font-size:13px; 
+		color: #101010;
+		margin-top:5px;
+	}
+	
+		
 	.sharebtn {
 		margin-right: -10px;
 		background: #fff;
@@ -459,13 +401,5 @@
 	}
 
 
-	.top {
-		width: 100vw;
-		/* height: 126.66vw; */
-		height: 65vw;
-		/* 加载背景图 */
-		background-image: url(https://supervise.yxtsoft.com/lpk/image/my_bj.png);
-		/* 让背景图基于容器大小伸缩 */
-		background-size: 100% 100%;
-	}
+
 </style>
\ No newline at end of file