JLBA202505130001_关于吉林银行新建AI智能培训系统的需求_fix: 学习进度条样式调整

src/pages/course/study.vue

@@ -47,13 +47,13 @@
         课程学习
       </view>
       <view class="study-num">
-        <view class="color-blue">{{ showOrder }}</view>
+        <view  class="color-black ml-40">学习中<text class="color-gray">（<text class="color-black">{{ showOrder }}</text>/{{ pgrphNum }}）</text></view>
         <view class="bg-block">
 					<view class="bg-gray">
 						<view class="bg-blue" :style="`width: ${showOrder/pgrphNum * 100}%;`"></view>
 					</view>
 				</view>
-        <text>{{ pgrphNum }}</text>
+        
 				
       </view>
       <scroll-view class="talking-list" :scroll-y="true" :scroll-top="scrollTop" :show-scrollbar="false" :scroll-with-animation="true">
@@ -1319,38 +1319,64 @@ const chooseRateNow = item => {
     }
 
     .study-num {
-      height: 56rpx;
+      height: 110rpx;
       line-height: 46rpx;
 			font-size: 36rpx;
-      text-align: center;
-      padding-top: 10rpx;
+      text-align: left;
+			padding-left: 30rpx;
+			padding-right: 30rpx;
+      padding-top: 20rpx;
 			box-sizing: border-box;
       background: url(@/static/images/course/study-bg.png) no-repeat;
       border-radius: 30rpx 30rpx 0 0;
-			display: flex;
-			flex-direction: row;
-			justify-content: center;
+			font-size: 29rpx;
       .color-blue {
         color: #06f;
         display: inline;
       }
+			.color-black{
+				color: #333;
+				position: relative;
+				height: 44rpx;
+				line-height: 44rpx;
+				&.ml-40{
+					padding-left: 24rpx;
+					
+					&::before{
+						content: '';
+						display: block;
+						width: 12rpx;
+						height: 12rpx;
+						overflow: hidden;
+						position: absolute;
+						border-radius: 50%;
+						background-color: #06f;
+						top: 50%;
+						left: 0;
+						transform: translateY(-50%);
+					}
+				}
+			}
+			.color-gray{
+				color: #999;
+			}
 			.bg-block{
-				display: inline-block;
-				width: 200rpx;
-				height: 100%;
+				display: block;
+				width: 100%;
+				height: 56rpx;
 				// padding: 4rpx 0 12rpx;
 				position: relative;
-				margin: 0 30rpx;
+				// margin: 0 30rpx;
 			}
 			.bg-gray{
 				width: 100%;
-				background-color: #e6eafd;
+				background-color: #ededed;
 				overflow: hidden;
 				border-radius: 15rpx;
 				position: absolute;
 				top: 13rpx;
 				left:0;
-				height: 20rpx;
+				height: 16rpx;
 				.bg-blue{
 					height: 100%;
 					float: left;