路径

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>

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{