tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
杨航
2026-01-15 15:38:03 +08:00
parent 3552596a70
commit 15498494b0
1 changed files with 40 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/course/study.vue
+40 -14
View File
@@ -47,13 +47,13 @@
课程学习 课程学习
</view> </view>
<view class="study-num"> <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-block">
<view class="bg-gray"> <view class="bg-gray">
<view class="bg-blue" :style="`width: ${showOrder/pgrphNum * 100}%;`"></view> <view class="bg-blue" :style="`width: ${showOrder/pgrphNum * 100}%;`"></view>
</view> </view>
</view> </view>
<text>{{ pgrphNum }}</text>
</view> </view>
<scroll-view class="talking-list" :scroll-y="true" :scroll-top="scrollTop" :show-scrollbar="false" :scroll-with-animation="true"> <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 { .study-num {
height: 56rpx; height: 110rpx;
line-height: 46rpx; line-height: 46rpx;
font-size: 36rpx; font-size: 36rpx;
text-align: center; text-align: left;
padding-top: 10rpx; padding-left: 30rpx;
padding-right: 30rpx;
padding-top: 20rpx;
box-sizing: border-box; box-sizing: border-box;
background: url(@/static/images/course/study-bg.png) no-repeat; background: url(@/static/images/course/study-bg.png) no-repeat;
border-radius: 30rpx 30rpx 0 0; border-radius: 30rpx 30rpx 0 0;
display: flex; font-size: 29rpx;
flex-direction: row;
justify-content: center;
.color-blue { .color-blue {
color: #06f; color: #06f;
display: inline; 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{ .bg-block{
display: inline-block; display: block;
width: 200rpx; width: 100%;
height: 100%; height: 56rpx;
// padding: 4rpx 0 12rpx; // padding: 4rpx 0 12rpx;
position: relative; position: relative;
margin: 0 30rpx; // margin: 0 30rpx;
} }
.bg-gray{ .bg-gray{
width: 100%; width: 100%;
background-color: #e6eafd; background-color: #ededed;
overflow: hidden; overflow: hidden;
border-radius: 15rpx; border-radius: 15rpx;
position: absolute; position: absolute;
top: 13rpx; top: 13rpx;
left:0; left:0;
height: 20rpx; height: 16rpx;
.bg-blue{ .bg-blue{
height: 100%; height: 100%;
float: left; float: left;