路径

pages/study/index.vue

@@ -132,7 +132,29 @@
 					<text class="text">我的成长路径</text>
 					<image src="../../static/images/learnpath/why.png" class="image"></image>
 				</view>
-				<view class="learn_right">什么是成长路径</view>
+				<view class="learn_right">
+					<text class="text">什么是成长路径</text>
+					<image class="image" src="../../static/images/learnpath/whyWhite.png" mode=""></image>
+				</view>
+			</view>
+			<view class="line"></view>
+			<view class="learn_body">
+				<view class="body_job">
+					<view class="name">产品企划岗Band6～7成长路径</view>
+					<view class="job">
+						<text>京东方集团股份有限公司</text>
+						<text> 学习状态：进行中</text>
+					</view>
+				</view>
+				<view class="body_item">
+					<view class="body_top">
+						<image class="img" src="../../static/images/learnpath/explain.png" mode=""></image>
+						<text class="text">说明</text>
+					</view>
+					<view class="body_down">
+						请各位选课的同学提前阅读本课程的 “教学大纲与计划”、“课程考核要求”与“学习要求”，并按给定的中学化学教学主题分好小组每位同学在网上学习的活动轨迹都会自动被系统记录將作为大家个人线上参与的评价依据;请大家务必......
+					</view>
+				</view>
 			</view>
 		</view>
 		<u-modal :show="studyResetShow" :showCancelButton="true" @cancel="cancelResetStudy" @confirm="resetStudy"	ref="uModal" :asyncClose="true">
@@ -768,10 +790,19 @@
 		padding: 33px 25px 33px 25px;
 	}
 	.learn{
+		.line{
+			width: 100%;
+			height: 20rpx;
+			background: #F9F9F9;
+		}
 		.learn_header{
 			display: flex;
 			justify-content: space-between;
+			align-items: center;
+			margin-top: 20rpx;
+			margin-bottom: 30rpx;
 			.learn_left{
+				margin-left: 36rpx;
 				.text{
 					width: 192rpx;
 					height: 44rpx;
@@ -780,10 +811,13 @@
 					color: #333333;
 					line-height: 44rpx;
 					text-align: left;
+					margin-right: 14rpx;
+					vertical-align: middle;
 				}
 				.image{
 					width: 32rpx;
 					height: 32rpx;
+					vertical-align: middle;
 				}
 			}
 			.learn_right{
@@ -792,6 +826,80 @@
 				background: #387DF7;
 				box-shadow: 2rpx 4rpx 16rpx 0rpx rgba(56,125,247,0.34);
 				border-radius: 40rpx;
+				margin-right: 20rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				.text{
+					height: 40rpx;
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #FFFFFF;
+					line-height: 40rpx;
+					margin-right: 14rpx;
+					vertical-align: middle;
+				}
+				.image{
+					width: 40rpx;
+					height: 40rpx;
+					vertical-align: middle;
+				}
+			}
+		}
+		.learn_body{
+			.body_job{
+				background: linear-gradient( 180deg, #3161FA 0%, #5195FF 100%);
+				border-radius: 8rpx;
+				border: 2rpx solid #E4EDFE;
+				margin: 24rpx 28rpx 40rpx 30rpx;
+				padding: 40rpx 28rpx 32rpx 40rpx;
+				.name{
+					height: 44rpx;
+					font-weight: 600;
+					font-size: 32rpx;
+					color: #FFFFFF;
+					line-height: 44rpx;
+					margin-bottom: 20rpx;
+				}
+				.job{
+					height: 40rpx;
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #FFFFFF;
+					line-height: 40rpx;
+					display: flex;
+					justify-content: space-between;
+				}
+			}
+		}
+		.body_item{
+			margin-bottom: 30rpx;
+			margin-left: 34rpx;
+			.body_top{
+				.img{
+					width: 32rpx;
+					height: 32rpx;
+					vertical-align: middle;
+					margin-right: 20rpx;
+				}
+				.text{
+					height: 44rpx;
+					font-weight: 600;
+					font-size: 32rpx;
+					color: #333333;
+					line-height: 44rpx;
+					vertical-align: middle;
+				}
+			}
+			.body_down{
+				margin: 24rpx 30rpx 30rpx 28rpx;
+				padding: 22rpx 38rpx 26rpx 40rpx;
+				max-height: 328rpx;
+				background: #F7F7F7;
+				border-radius: 8rpx;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #333333;
 			}
 		}
 	}