diff --git a/pages/me/index.vue b/pages/me/index.vue
index f7babeaa..8fefa745 100644
--- a/pages/me/index.vue
+++ b/pages/me/index.vue
@@ -1,46 +1,297 @@
 <template>
 	<view class="main_div max_page">
-		<view class="empty_div">
-			<image class="img" src="/static/images/common/default_img.png"></image>
-			<view class="text">
-				页面建设中，敬请期待…
+		<nav-bar :is_seat="false"></nav-bar>
+
+		<view class="bg_div">
+			<image src="/static/images/me/bg.png" class="bg_img"></image>
+			<view class="user_data_div">
+				<!-- 用户个人信息 -->
+				<view class="personal_information">
+					<view class="profile">
+						<image class="img_100" src="/static/images/test/touxiang.png"></image>
+					</view>
+					<view class="personal_information_data">
+						<view class="name_sex_div">
+							<view class="name">
+								顾青裴
+							</view>
+							<view class="sex">
+								<!-- <image class="img_100" src="/static/images/me/man.png"></image> -->
+								<image class="img_100" src="/static/images/me/wuman.png"></image>
+							</view>
+						</view>
+						<view class="work_number_div">
+							工号：15688749934
+						</view>
+						<view class="fl1"></view>
+					</view>
+				</view>
+				<!-- 用户学习时间信息 -->
+				<view class="study_information">
+					<view class="item">
+						<view class="top">累计学习时长</view>
+						<view class="bottom">
+							<uv-count-to :startVal="15" :endVal="15" :useEasing="true" :decimals="1"></uv-count-to>h
+						</view>
+					</view>
+					<view class="item">
+						<view class="top">累计完成任务</view>
+						<view class="bottom">
+							<uv-count-to :startVal="24" :endVal="24" :useEasing="true"></uv-count-to>
+						</view>
+					</view>
+					<view class="item">
+						<view class="top">累计获得积分</view>
+						<view class="bottom">
+							<uv-count-to :startVal="125" :endVal="125" :useEasing="true"></uv-count-to>
+						</view>
+					</view>
+				</view>
 			</view>
 		</view>
+		<!-- 4个导航 -->
+		<view class="navigation_div">
+			<view class="group">
+				<view class="item">
+					<image class="icon" src="@/static/images/me/study.png"></image>
+					<view class="title">学习记录</view>
+				</view>
+				<view class="item">
+					<image class="icon" src="@/static/images/me/todo.png"></image>
+					<view class="title">待办任务</view>
+				</view>
+				<view class="item">
+					<image class="icon" src="@/static/images/me/examination.png"></image>
+					<view class="title">考试记录</view>
+				</view>
+				<view class="item">
+					<image class="icon" src="@/static/images/me/report.png"></image>
+					<view class="title">我的报告</view>
+				</view>
+			</view>
+		</view>
+		<view class="cell_div">
+			<uv-cell-group :border="false">
+				<uv-cell title='消息通知' :isLink="true"></uv-cell>
+				<uv-cell title='排行榜' :isLink="true"></uv-cell>
+				<uv-cell title='问答记录' :isLink="true"></uv-cell>
+				<uv-cell title='竞赛记录' :isLink="true" :clickable="false" :border="false"></uv-cell>
+			</uv-cell-group>
+		</view>
+		<view class="cell_div">
+			<uv-cell-group :border="false">
+				<uv-cell title='设置' :isLink="true"></uv-cell>
+				<uv-cell title='客服' :isLink="true"></uv-cell>
+				<uv-cell title='退出登录' :isLink="true" :clickable="false" :border="false"></uv-cell>
+			</uv-cell-group>
+		</view>
+		<tabbar-shadow></tabbar-shadow>
 	</view>
 </template>
-<script>
+
+<script setup>
+	import {
+		ref,
+		computed
+	} from 'vue';
+	import {
+		onPullDownRefresh
+	} from '@dcloudio/uni-app'
+	onPullDownRefresh(() => {
+		console.log('下拉刷新');
+		// uni.stopPullDownRefresh();
+	})
 </script>
+
 <style scoped lang="scss">
-	.main_div{
-		background-color: #f9faff;
-		// background-color: red;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: space-around;
+	$bg-margin-left: 50rpx;
+
+	// 下方单元格
+	.cell_div {
+		margin: 30rpx $bg-margin-left 0 $bg-margin-left;
+		background: #FFFFFF;
+		border-radius: 15rpx;
+		z-index: 101;
+		overflow: hidden;
+
+		// 为了让线缩进来24单位
+		:deep(.uv-line) {
+			width: calc(100% - 48rpx) !important;
+			margin: 0 24rpx !important;
+		}
+
+		:deep(.uv-cell__body) {
+			padding: 12px 15px;
+		}
+
+
 	}
-	.empty_div{
-		// margin-top: 40%;
+
+	// 快捷导航栏
+	.navigation_div {
+		margin: 30rpx $bg-margin-left 0 $bg-margin-left;
+		padding: 24rpx 0 20rpx 0;
+		background-color: #FFFFFF;
+		border-radius: 23rpx;
 		display: flex;
 		flex-direction: column;
-		align-items: center;
-		// 
-		.img{
-			width: 388rpx;
-			height: 335rpx;
+		justify-content: space-around;
+		z-index: 101;
+
+		.group {
+			display: flex;
+			justify-content: space-around;
 		}
-		.text{
-			
-			margin-top: 20rpx;
-			height: 40rpx;
-			
-			font-family: PingFangSC, PingFang SC;
-			font-weight: 400;
-			font-size: 29rpx;
-			color: #4375C9;
-			line-height: 40rpx;
-			text-align: center;
-			font-style: normal;
+
+		.item {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+
+			// background-color: red;
+			.icon {
+				width: 88rpx;
+				height: 86rpx;
+			}
+
+			.title {
+				margin-top: 10rpx;
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 25rpx;
+				color: #323E57;
+				line-height: 35rpx;
+				text-align: left;
+				font-style: normal;
+			}
 		}
 	}
+
+	.bg_div {
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		padding: 0 $bg-margin-left;
+		z-index: 50;
+
+		.bg_img {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			z-index: -1;
+			height: 858rpx;
+		}
+
+		// 个人信息
+		.user_data_div {
+			margin-top: 158rpx;
+			background: linear-gradient(180deg, rgba(241, 245, 255, .5) 0%, #F6F9FE 50%, #FFFFFF 100%);
+			border-radius: 14rpx;
+			border: 2rpx solid #ffffff;
+			box-shadow: #F6F8FF 0 0 2rpx;
+
+			.personal_information {
+				padding: 20rpx 0 0 26rpx;
+				display: flex;
+
+				// 个人头像框框
+				.profile {
+					border-radius: 100%;
+					border: 2px solid #ffffff;
+					width: 108rpx;
+					height: 108rpx;
+					overflow: hidden;
+				}
+
+				// 头像右边的信息
+				.personal_information_data {
+					display: flex;
+					flex-direction: column;
+					margin-left: 26rpx;
+
+					// 上边的姓名性别盒子
+					.name_sex_div {
+						display: flex;
+						margin-top: 6rpx;
+
+						.name {
+							font-family: PingFangSC;
+							font-weight: 600;
+							font-size: 28rpx;
+							color: #000000;
+							line-height: 40rpx;
+						}
+
+						.sex {
+							margin-left: 10rpx;
+							width: 30rpx;
+							height: 30rpx;
+						}
+					}
+
+					.work_number_div {
+						font-family: PingFangSC;
+						font-weight: 400;
+						font-size: 25rpx;
+						color: #666666;
+						line-height: 38rpx;
+						text-align: left;
+						font-style: normal;
+					}
+				}
+			}
+
+			.study_information {
+
+				display: flex;
+				justify-content: space-around;
+				z-index: 20;
+				margin: 30rpx 50rpx;
+
+				.item {
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+
+					.top {
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 25rpx;
+						color: #666666;
+						line-height: 35rpx;
+						text-align: center;
+						font-style: normal;
+					}
+
+					.bottom {
+						margin-top: 5%;
+						font-weight: bold;
+						font-size: 50rpx;
+						color: #000000;
+						line-height: 58rpx;
+						text-align: left;
+						font-style: normal;
+						text-align: center;
+
+						// 数字滚动组件
+						:deep(.uv-count-num) {
+							font-weight: bold !important;
+							font-size: 50rpx !important;
+							color: #000000 !important;
+						}
+					}
+				}
+			}
+
+		}
+	}
+
+	.main_div {
+		display: flex;
+		flex-direction: column;
+		background-color: #F6F8FF;
+	}
 </style>
\ No newline at end of file