diff --git a/pages/learnPath/learnPath.vue b/pages/learnPath/learnPath.vue
new file mode 100644
index 0000000..ad6a847
--- /dev/null
+++ b/pages/learnPath/learnPath.vue
@@ -0,0 +1,166 @@
+<template>
+	<view class="learn_path">
+		<view class="path_header">
+			<view class="text">成长路径图</view>
+		</view>
+		<view class="path_body">
+			<view class="body_header">
+				<view class="left">全岗位路径</view>
+				<view class="right">
+					<u-switch size="14" v-model="openDown" @change="change"></u-switch>
+					<text class="text">高亮显示未完成</text>
+				</view>
+			</view>
+			<view class="body_check">
+				<view class="left_check">
+					<view class="left"></view>
+					<view class="text">必修</view>
+				</view>
+				<view class="right_check">
+					<view class="right"></view>
+					<view class="text">选修</view>
+				</view>
+			</view>
+			<view class="end_learn">您的学习之旅已结束</view>
+			<view class="learn">
+				<view class="aaa"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				openDown: false,
+			}
+		},
+		mounted() {
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped>
+ .learn_path{
+	 background: #387DF7;
+	 .path_header{
+		 display: flex;
+		 justify-content: center;
+		 margin-bottom: 38rpx;
+		 .text{
+			 margin-top: 26rpx;
+			 height: 60rpx;
+			 font-weight: 600;
+			 font-size: 44rpx;
+			 color: #FFFFFF;
+			 line-height: 60rpx;
+		 }
+	 }
+	 .path_body{
+		 background: #FFFFFF;
+		 border-radius: 40rpx 40rpx 0rpx 0rpx;
+		 height: 100vh;
+		 .body_header{
+			 display: flex;
+			 justify-content: space-between;
+			 align-items: center;
+			 .left{
+				 width: 204rpx;
+				 height: 52rpx;
+				 line-height: 52rpx;
+				 text-align: center;
+				 background: #387DF7;
+				 border-radius: 26rpx;
+				 font-weight: 500;
+				 font-size: 28rpx;
+				 color: #FFFFFF;
+				 margin-left: 30rpx;
+				margin-top: 26rpx;
+			 }
+			 .right{
+				 display: flex;
+				 align-items: center;
+				 margin-top: 32rpx;
+				 margin-right: 34rpx;
+				 .text{
+					 height: 40rpx;
+					 font-weight: 500;
+					 font-size: 28rpx;
+					 color: #333333;
+					 line-height: 40rpx;
+					 margin-left: 10rpx;
+				 }
+			 }
+		 }
+		 .body_check{
+			display: flex;
+			justify-content: center;
+			margin-top: 34rpx;
+			 .left_check{
+				 display: flex;
+				 align-items: center;
+				 .left{
+					width: 32rpx;
+					 height: 32rpx;
+					 background: #34CA2B;
+					 border-radius: 4rpx; 
+				 }
+				 .text{
+					 height: 40rpx;
+					 font-weight: 400;
+					 font-size: 28rpx;
+					 color: #333333;
+					 line-height: 40rpx;
+					 margin-left: 18rpx;
+				 }
+			 }
+			 .right_check{
+				 display: flex;
+				 align-items: center;
+				 margin-left: 102rpx;
+				 .right{
+					 width: 32rpx;
+					 height: 32rpx;
+					 background: #FE9C4A;
+					 border-radius: 4rpx; 
+				 }
+				.text{
+					 height: 40rpx;
+					 font-weight: 400;
+					 font-size: 28rpx;
+					 color: #333333;
+					 line-height: 40rpx;
+					 margin-left: 18rpx;
+				}
+			 }
+		 }
+	 }
+	 .end_learn{
+		 text-align: right;
+		 margin-top: 30rpx;
+		 margin-right: 24rpx;
+		 height: 40rpx;
+		 font-weight: 400;
+		 font-size: 28rpx;
+		 color: #387DF7;
+		 line-height: 40rpx;
+		 margin-bottom: 30rpx;
+	 }
+	 .learn{
+		 width: 616rpx;
+		 height: 952rpx;
+		 background: url("../../static/images/learnpath/7learn.png") no-repeat;
+		 background-size: 100%;
+		 .aaa{
+			 width: 64rpx;
+			 height: 68rpx;
+			 background: linear-gradient( 180deg, #66B1FC 0%, #3C82F7 99%);
+		 }
+	 }
+ }
+</style>
diff --git a/pages/study/index.vue b/pages/study/index.vue
index 4488f83..96a106e 100644
--- a/pages/study/index.vue
+++ b/pages/study/index.vue
@@ -130,11 +130,15 @@
 			<view class="learn_header">
 				<view class="learn_left">
 					<text class="text">我的成长路径</text>
-					<image src="../../static/images/learnpath/why.png" class="image"></image>
+					<image @click="contentOn" src="../../static/images/learnpath/why.png" class="image"></image>
+					<view class="up_content" v-show="upContent">
+						<view class="text">根据您的归属组织、您所在岗位、职级，已为您自动匹配“产品企划岗Band6～7成长路径”，抓紧时间学习吧～</view>
+						<image @click="contentOut" class="down" src="../../static/images/learnpath/down.png" mode=""></image>
+					</view>
 				</view>
 				<view class="learn_right">
 					<text class="text">什么是成长路径</text>
-					<image class="image" src="../../static/images/learnpath/whyWhite.png" mode=""></image>
+					<image @click="onLearnModal" class="image" src="../../static/images/learnpath/whyWhite.png" mode=""></image>
 				</view>
 			</view>
 			<view class="line"></view>
@@ -145,6 +149,25 @@
 						<text>京东方集团股份有限公司</text>
 						<text> 学习状态：进行中</text>
 					</view>
+					<view class="plan_item">
+						<image class="image" src="../../static/images/learnpath/file.png" mode=""></image>
+						<text class="text" @click="planDown = true">共享文档</text>
+						<view class="plan_down" v-show="planDown">
+							<image @click="planDown = false" class="down" src="../../static/images/learnpath/down.png" mode=""></image>
+							<view class="header">
+								共享文档
+							</view>
+							<view class="body">
+								<view class="left">
+									<image class="img" src="" mode=""></image>
+									<text class="text">人工智能启蒙讲解讲义.pptx</text>
+								</view>
+								<view class="right">
+									下载
+								</view>
+							</view>
+						</view>
+					</view>
 				</view>
 				<view class="body_item">
 					<view class="body_top">
@@ -155,6 +178,30 @@
 						请各位选课的同学提前阅读本课程的 “教学大纲与计划”、“课程考核要求”与“学习要求”，并按给定的中学化学教学主题分好小组每位同学在网上学习的活动轨迹都会自动被系统记录將作为大家个人线上参与的评价依据;请大家务必......
 					</view>
 				</view>
+				<view class="body_item">
+					<view class="body_top">
+						<image class="img" src="../../static/images/learnpath/plan.png" mode=""></image>
+						<text class="text">学习进度</text>
+					</view>
+					<view class="body_plan">
+						<view class="plan_left">
+							<view class="left">
+								<view style="margin-bottom: 24rpx;">总任务：</view>
+								<view>当前任务：</view>
+							</view>
+							<view class="right">
+								<view style="margin-bottom: 24rpx;">10门</view>
+								<view>产品考试</view>
+							</view>
+						</view>
+						<view class="plan_right">
+							
+						</view>
+					</view>
+				</view>
+				<view class="go_learn" @click="goLearn">
+					开始学习
+				</view>
 			</view>
 		</view>
 		<u-modal :show="studyResetShow" :showCancelButton="true" @cancel="cancelResetStudy" @confirm="resetStudy"	ref="uModal" :asyncClose="true">
@@ -206,6 +253,24 @@
 				</view>
 			</view>
 		</u-overlay> -->
+		<u-modal :show="learnModal" :showConfirmButton="false" width="200px">
+			<view class="item_modal">
+				<view class="item_title">
+					成长路径说明
+				</view>
+				<view class="item_text">
+					本功能针对学员所在组织、岗位、职级自动匹配成长路径，完成本路径方可晋升
+				</view>
+				<view class="item_btn" @click="outLearnModal">
+					我已阅读
+				</view>
+				<view class="item_check">
+					<u-checkbox-group>
+						<u-checkbox v-model="checked" shape="square" label="下次进入不在弹窗"></u-checkbox>
+					</u-checkbox-group>
+				</view>
+			</view>
+		</u-modal>
 	</view>
 </template>
 <script>
@@ -222,6 +287,10 @@
 		},
 		data() {
 			return {
+				planDown: false,
+				upContent: false,
+				checked: false,
+				learnModal: false,
 				Applistatus:'',
 				autonomyStatusShow: false,
 				delData: {},
@@ -350,6 +419,23 @@
 			}, 500);
 		},
 		methods: {
+			goLearn() {
+				uni.navigateTo({
+					url: '/pages/learnPath/learnPath'
+				});
+			},
+			contentOn() {
+				this.upContent = true
+			},
+			contentOut() {
+				this.upContent = false
+			},
+			onLearnModal() {
+				this.learnModal = true
+			},
+			outLearnModal() {
+				this.learnModal = false
+			},
 			reSetList() {
 				this.studyList.forEach(item=>{
 					item.delcour = false;
@@ -788,6 +874,48 @@
 		font-weight: 600;
 		color: #333333;
 		padding: 33px 25px 33px 25px;
+		background: linear-gradient( 180deg, #E8ECFF 0%, #FFFFFF 100%);
+	}
+	.item_modal{
+		
+		.item_title{
+			margin: 0 auto;
+			margin-top: -22rpx;
+			height: 50rpx;
+			font-weight: 500;
+			font-size: 36rpx;
+			color: #333333;
+			line-height: 50rpx;
+			margin-bottom: 38rpx;
+		}
+		.item_text{
+			height: 96rpx;
+			font-weight: 400;
+			font-size: 26rpx;
+			color: #333333;
+			line-height: 48rpx;
+			margin-bottom: 40rpx;
+		}
+		.item_btn{
+			width: 220rpx;
+			height: 68rpx;
+			background: linear-gradient( 90deg, #5390FD 0%, #3162FA 100%);
+			border-radius: 8rpx;
+			margin: 0 auto;
+			text-align: center;
+			line-height: 68rpx;
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #FFFFFF;
+			margin-bottom: 56rpx;
+		}
+		.item_check{
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #666666;
+			line-height: 28rpx;
+			margin-bottom: -14rpx;
+		}
 	}
 	.learn{
 		.line{
@@ -802,6 +930,7 @@
 			margin-top: 20rpx;
 			margin-bottom: 30rpx;
 			.learn_left{
+				position: relative;
 				margin-left: 36rpx;
 				.text{
 					width: 192rpx;
@@ -819,6 +948,32 @@
 					height: 32rpx;
 					vertical-align: middle;
 				}
+				.up_content{
+					width: 712rpx;
+					height: 264rpx;
+					background: url("../../static/images/learnpath/downImg.png") no-repeat;
+					background-size: 100%;
+					position: absolute;
+					top: 20rpx;
+					left: -50rpx;
+					z-index: 600;
+					.text{
+						width: 488rpx;
+						height: 120rpx;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #333333;
+						line-height: 40rpx;
+						margin: 74rpx 152rpx 70rpx 72rpx;
+					}
+					.down{
+						width: 42rpx;
+						height: 42rpx;
+						position: absolute;
+						right: 52rpx;
+						top: 64rpx;
+					}
+				}
 			}
 			.learn_right{
 				width: 300rpx;
@@ -853,6 +1008,7 @@
 				border: 2rpx solid #E4EDFE;
 				margin: 24rpx 28rpx 40rpx 30rpx;
 				padding: 40rpx 28rpx 32rpx 40rpx;
+				position: relative;
 				.name{
 					height: 44rpx;
 					font-weight: 600;
@@ -870,6 +1026,86 @@
 					display: flex;
 					justify-content: space-between;
 				}
+				.plan_item{
+					position: absolute;
+					top: 216rpx;
+					right: 0;
+					.image{
+						width: 42rpx;
+						height: 36rpx;
+						margin-right: 20rpx;
+						vertical-align: middle;
+					}
+					.text{
+						height: 44rpx;
+						font-weight: 600;
+						font-size: 32rpx;
+						color: #409EFF;
+						line-height: 44rpx;
+						vertical-align: middle;
+					}
+					.plan_down{
+						position: absolute;
+						z-index: 900;
+						right: -44rpx;
+						top: 26rpx;
+						width: 780rpx;
+						max-height: 756rpx;
+						background: url("../../static/images/learnpath/downppt.png") no-repeat;
+						background-size: 100%;
+						margin-bottom: 36rpx;
+						padding-bottom: 36rpx;
+						.down{
+							width: 52rpx;
+							height: 52rpx;
+							position: absolute;
+							top: 60rpx;
+							right: 66rpx;
+						}
+						.header{
+							margin: 0 auto;
+							margin-top: 80rpx;
+							width: 144rpx;
+							height: 56rpx;
+							font-weight: 600;
+							font-size: 36rpx;
+							color: #202020;
+							line-height: 56rpx;
+							margin-bottom: 22rpx;
+						}
+						.body{
+							display: flex;
+							justify-content: space-between;
+							.left{
+								margin-left: 80rpx;
+								.img{
+									width: 40rpx;
+									height: 40rpx;
+									margin-right: 24rpx;
+								}
+								.text{
+									height: 40rpx;
+									font-weight: 400;
+									font-size: 28rpx;
+									color: #666666;
+									line-height: 40rpx;
+								}
+							}
+							.right{
+								text-align: center;
+								width: 140rpx;
+								height: 56rpx;
+								line-height: 56rpx;
+								border-radius: 8rpx;
+								border: 2rpx solid #387DF7;
+								font-weight: 400;
+								font-size: 28rpx;
+								color: #387DF7;
+								margin-right: 80rpx;
+							}
+						}
+					}
+				}
 			}
 		}
 		.body_item{
@@ -901,6 +1137,46 @@
 				font-size: 28rpx;
 				color: #333333;
 			}
+			.body_plan{
+				margin: 32rpx 30rpx 30rpx 28rpx;
+				height: 228rpx;
+				background: linear-gradient( 186deg, #E5EDFB 0%, #F7F9FC 100%);
+				border-radius: 8rpx;
+				display: flex;
+				.plan_left{
+					margin: 62rpx 70rpx 60rpx 48rpx;
+					display: flex;
+					.left{
+						height: 40rpx;
+						font-weight: 400;
+						font-size: 28rpx;
+						color: #848593;
+						line-height: 40rpx;
+						margin-right: 12rpx;
+					}
+					.right{
+						height: 42rpx;
+						font-weight: 600;
+						font-size: 30rpx;
+						color: #3B3C4A;
+						line-height: 42rpx;
+					}
+				}
+			}
+		}
+		.go_learn{
+			width: 472rpx;
+			height: 96rpx;
+			background: linear-gradient( 112deg, #5491FD 0%, #2A58FA 100%);
+			border-radius: 48rpx;
+			font-weight: 500;
+			font-size: 28rpx;
+			color: #FFFFFF;
+			line-height: 40rpx;
+			margin: 0 auto;
+			line-height: 96rpx;
+			text-align: center;
+			margin-bottom: 22rpx;
 		}
 	}
 	.delcoures{
diff --git a/static/images/learnpath/7learn.png b/static/images/learnpath/7learn.png
new file mode 100644
index 0000000..9873a24
Binary files /dev/null and b/static/images/learnpath/7learn.png differ
diff --git a/static/images/learnpath/credit.png b/static/images/learnpath/credit.png
new file mode 100644
index 0000000..31eee17
Binary files /dev/null and b/static/images/learnpath/credit.png differ
diff --git a/static/images/learnpath/down.png b/static/images/learnpath/down.png
new file mode 100644
index 0000000..f67eb1d
Binary files /dev/null and b/static/images/learnpath/down.png differ
diff --git a/static/images/learnpath/downImg.png b/static/images/learnpath/downImg.png
new file mode 100644
index 0000000..922af9d
Binary files /dev/null and b/static/images/learnpath/downImg.png differ
diff --git a/static/images/learnpath/downppt.png b/static/images/learnpath/downppt.png
new file mode 100644
index 0000000..592d155
Binary files /dev/null and b/static/images/learnpath/downppt.png differ
diff --git a/static/images/learnpath/plane.png b/static/images/learnpath/plane.png
new file mode 100644
index 0000000..a35746f
Binary files /dev/null and b/static/images/learnpath/plane.png differ
diff --git a/static/images/learnpath/task.png b/static/images/learnpath/task.png
new file mode 100644
index 0000000..b1686c2
Binary files /dev/null and b/static/images/learnpath/task.png differ