GoCo/OL-LearnPlatform

Fork 0

username af756a13e2 第一版学生端页面

2025-08-04 02:13:12 +08:00

4.9 KiB

Raw Blame History

学习进度统计组件实现说明

🎯 概述

根据提供的设计图，实现了一个完整的学习进度统计组件 LearningProgressStats.vue，包含三个圆形进度图表（课程、作业、考试）和一个总体学习进度条。

📁 文件位置

src/
├── components/
│   └── common/
│       └── LearningProgressStats.vue  # 学习进度统计组件
└── views/
    └── CourseDetailEnrolled.vue       # 课程详情页面（已报名状态）

🎨 设计特点

1. 圆形进度图表

数量: 3个（课程、作业、考试）
样式: 粗边框圆环（stroke-width: 12px）
颜色: 蓝色主题 (#1890ff)
动画: 平滑的进度动画效果
阴影: 立体阴影效果

2. 总体进度条

样式: 粗进度条（height: 12px）
背景: 渐变背景效果
边框: 加粗边框设计
阴影: 进度条阴影效果

3. 字体样式

百分比: 24px, 粗体 (font-weight: 700)
标签: 16px, 中等粗体 (font-weight: 600)
进度文字: 18px, 粗体
数字: 22-24px, 超粗体

🔧 组件Props

interface Props {
  courseProgress?: number      // 课程进度百分比
  homeworkProgress?: number    // 作业进度百分比
  examProgress?: number        // 考试进度百分比
  completedItems?: number      // 已完成项目数
  totalItems?: number          // 总项目数
}

📊 默认数据

// 默认值（与设计图一致）
courseProgress: 31.7%
homeworkProgress: 22.5%
examProgress: 9.6%
completedItems: 13
totalItems: 54

🎮 使用方法

基本用法

<template>
  <LearningProgressStats
    :course-progress="31.7"
    :homework-progress="22.5"
    :exam-progress="9.6"
    :completed-items="13"
    :total-items="54"
  />
</template>

<script setup>
import LearningProgressStats from '@/components/common/LearningProgressStats.vue'
</script>

动态数据

<template>
  <LearningProgressStats
    :course-progress="courseProgress"
    :homework-progress="homeworkProgress"
    :exam-progress="examProgress"
    :completed-items="completedItems"
    :total-items="totalItems"
  />
</template>

<script setup>
import { ref } from 'vue'
import LearningProgressStats from '@/components/common/LearningProgressStats.vue'

const courseProgress = ref(31.7)
const homeworkProgress = ref(22.5)
const examProgress = ref(9.6)
const completedItems = ref(13)
const totalItems = ref(54)
</script>

🎨 样式特性

1. 圆形进度环

/* 背景圆环 */
stroke: #e8f4fd
stroke-width: 12px
opacity: 0.4

/* 进度圆环 */
stroke: #1890ff
stroke-width: 12px
stroke-linecap: round

2. 容器样式

/* 主容器 */
background: #ffffff
border-radius: 16px
padding: 32px
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12)
border: 3px solid #e8f4fd

/* 进度条容器 */
background: linear-gradient(135deg, #f8fcff 0%, #e8f4fd 100%)
border-radius: 12px
border-top: 3px solid #e8f4fd

3. 进度条样式

/* 进度条背景 */
height: 12px
background: #e8f4fd
border-radius: 6px
border: 2px solid #d9ecff

/* 进度条填充 */
background: linear-gradient(90deg, #1890ff 0%, #40a9ff 100%)
box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3)

📱 响应式设计

桌面端 (>768px)

圆形进度图: 120px × 120px
字体大小: 24px (百分比)
间距: 正常间距

平板端 (≤768px)

圆形进度图: 100px × 100px
字体大小: 16px (百分比)
间距: 紧凑间距

移动端 (≤480px)

布局: 垂直排列
圆形进度图: 居中显示
最大宽度: 200px

🔮 图标占位符

当前使用emoji作为图标占位符：

📚 课程
📝 作业
📋 考试

等待您提供具体的图标文件后，可以替换为实际的SVG图标。

🚀 实际应用

学习进度统计组件已集成到课程详情页面（已报名状态）：

访问路径

课程详情页面: /course/1/enrolled
位置: 右侧边栏的学习进度区域

显示内容

三个圆形进度图表（课程、作业、考试）
总体学习进度条
完成项目数统计 (13/54)
实时进度数据更新

🎯 设计图匹配度

✅ 完全匹配的特性:

三个圆形进度图表布局
粗边框圆环设计
蓝色主题色彩
百分比数字显示
底部总体进度条
进度数字显示 (13/54)
整体卡片样式

🔄 待完善的特性:

等待提供具体的图标文件
可能需要微调颜色深浅
可能需要调整具体的间距

📝 下一步计划

图标替换: 等待您提供三个中心点的图标文件
颜色调整: 根据实际需求微调颜色
动画优化: 可以添加更多动画效果
数据集成: 与实际的学习数据API集成

🔗 相关文件

组件文件: src/components/common/LearningProgressStats.vue
应用页面: src/views/CourseDetailEnrolled.vue
查看地址: http://localhost:3001/course/1/enrolled

4.9 KiB Raw Blame History Unescape Escape