学习统计

pages/learningStatistics/learningStatistics.vue

@@ -19,6 +19,13 @@
 		<!-- 总览学习进度 -->
 		<view class="studyProgressBox">
 			<h4>总览学习进度</h4>
+			<view class="progressBox">
+				<text>0</text>
+				<view class="progressLine">
+					<view class="bgLine" :style="{width:userStudyCountList.progressBarTotal+'%'}">{{userStudyCountList.progressBarTotal}}%</view>
+				</view>
+				<text>100%</text>
+			</view>
 		</view>
 	</view>
 </template>
@@ -110,6 +117,28 @@
 					border-radius: 4rpx;
 				}
 			}
+			.progressBox{
+				display: flex;
+				align-items: center;
+				padding: 0 40rpx;
+				.progressLine{
+					width: 90%;
+					height: 60rpx;
+					border-radius: 36rpx;
+					border: 4rpx solid #0867F5;
+					margin: 0 20rpx;
+					.bgLine{
+						height: 100%;
+						background-color: #0867F5;
+						border-top-left-radius: 36rpx;
+						border-bottom-left-radius: 36rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						color: #fff;
+					}
+				}
+			}
 		}
 	}
 </style>