Browse Source

feat: 更新学习进度显示并优化课程详情页样式

- 在学习进度组件中显示具体进度数值
- 调整课程详情页的进度条逻辑和样式
- 移除课程详情页顶部标题栏
- 修改右侧功能菜单的背景色和连接线样式
whj 4 giờ trước cách đây
mục cha
commit
d82723d313
2 tập tin đã thay đổi với 9 bổ sung9 xóa
  1. 8 7
      pages/catalog/detail.uvue
  2. 1 2
      pages/index/components/physics.uvue

+ 8 - 7
pages/catalog/detail.uvue

@@ -335,11 +335,11 @@ onUnmounted(() => {
     <view class="course-detail-page" :class="{ 'hidden': !showProgress }">
       <!-- 顶部标题栏 -->
       <view class="flex-[1]  h-[100vh] relative">
-        <view class="flex flex-row w-full pr-[3vw] pl-[10vw] items-center justify-between absolute top-[30px]">
+        <!-- <view class="flex flex-row w-full pr-[3vw] pl-[10vw] items-center justify-between absolute top-[30px]">
           <text class="text-[5vh] font-bold">{{ course?.mainTitle }}</text>
           <text
             class="rounded-full p-[1vh] px-[2vh] border-2 border-[#fff] border-solid text-[#fff] text-[3vh] font-bold">课程收获</text>
-        </view>
+        </view> -->
 
       </view>
       <!-- 右侧功能菜单 -->
@@ -347,16 +347,17 @@ onUnmounted(() => {
         <view v-for="(item, i) in menuItems" :key="item.id" class="h-[20vh]  flex flex-row items-center ">
           <view
             class="h-[15vh] w-[20vh] bg-[#999999] rounded-2xl border-[.5vh] border-[#254AD9] border-b-[1vh] border-solid flex items-center justify-center gap-[1vh]"
-            :class="{ '!bg-[#fff]': progress > i }">
+            :class="{ '!bg-[#fff]': progress >= i }">
             <cl-image :src="item.icon" mode="heightFix" class="!h-[7vh]"></cl-image>
             <text class="text-[2vh] font-bold">{{ item.name }}</text>
           </view>
           <view class="flex items-center h-[20vh] ml-[2vh] ">
-            <view class="w-[1vh] bg-[#B4DBF7] flex-1" :class="{ '!bg-[#71C73D]': progress > i, '!opacity-0': i === 0 }">
+            <view class="w-[1vh] bg-[#B4DBF7] flex-1"
+              :class="{ '!bg-[#71C73D]': progress >= i, '!opacity-0': i === 0 }">
             </view>
-            <view class="w-[5vh] bg-[#fff] h-[5vh] rounded-full" :class="{ '!bg-[#71C73D]': progress > i }"></view>
+            <view class="w-[5vh] bg-[#fff] h-[5vh] rounded-full" :class="{ '!bg-[#71C73D]': progress >= i }"></view>
             <view class="w-[1vh] bg-[#B4DBF7] flex-1"
-              :class="{ '!bg-[#71C73D]': progress > i, '!opacity-0': i === menuItems.length - 1 }"></view>
+              :class="{ '!bg-[#71C73D]': progress >= i, '!opacity-0': i === menuItems.length - 1 }"></view>
           </view>
         </view>
       </view>
@@ -412,7 +413,7 @@ onUnmounted(() => {
     flex: 1;
 
     .before {
-      @apply absolute top-1/2 right-0 w-[340px] h-[40px] bg-[#2BA0F3] rounded-l-full;
+      @apply absolute top-1/2 right-0 w-[300px] h-[40px] bg-[#2BA0F3] rounded-l-full;
       transform: translateY(-30%);
     }
   }

+ 1 - 2
pages/index/components/physics.uvue

@@ -10,9 +10,8 @@ function handleView(url) {
 <template>
   <view class="bottom">
     <view class=" progress">
-      <view class="text-[26px] font-bold">学习进度</view>
+      <view class="text-[26px] font-bold">学习进度 {{ user.info.value?.studyCourseNum }}/100</view>
       <view class=" w-full flex flex-row items-center justify-center gap-2">
-
         <cl-progress class="flex-1" color="linear-gradient(0deg, #1FA5F5 37%, #A2D8FF 100%)"
           :value="user.info.value?.studyCourseNum" :show-text="false" :strokeWidth="16"
           :pt="{ outer: { className: '!rounded-full' }, inner: { className: '!rounded-full' } }"></cl-progress>