Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f9cbcffd 1 parent 00435895

refactor(StudyPage, CourseList): 优化布局和样式，提升用户体验 

- 在StudyPage.vue中，将学习统计部分的布局从列表形式改为网格形式，使其更直观
- 在CourseList.vue中，重新设计课程列表的布局，增加缩略图样式和进度条显示，提升可读性
Inline Side-by-side
Showing 2 changed files with 62 additions and 39 deletions
......@@ -6,18 +6,29 @@
<div class="course-list">
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<div v-for="course in courses" :key="course.id"
class="course-item bg-white mb-3 rounded-lg overflow-hidden">
<van-cell :title="course.title" :label="course.type" class="pb-2">
<template #icon>
<van-image :src="course.thumbnail" width="120" height="68" fit="cover" class="mr-3 rounded" />
</template>
</van-cell>
<div class="px-4 pb-4">
<div class="flex justify-between items-center text-sm text-gray-600 mb-2">
<span>已学习 {{ formatDuration(course.studyTime) }}</span>
<span>{{ course.progress }}%</span>
class="course-item bg-white p-3 rounded-lg overflow-hidden flex">
<div class="relative w-[120px] h-full flex-shrink-0">
<van-image :src="course.thumbnail" width="120" height="100%" fit="cover" class="item-cover">
<div class="absolute bg-white/80 px-2 py-0.5 text-xs rounded"
style="right: 0.25rem; bottom: 0.5rem">
{{ course.type }}
</div>
</van-image>
</div>
<div class="flex-1 p-3 flex flex-col" style="padding-top: 0; padding-right: 0">
<div class="text-sm font-medium mb-2 mt-0">{{ course.title }}</div>
<div class="mt-auto">
<div class="flex items-center w-full">
<span class="text-sm text-gray-400 shrink-0" style="font-size: 0.75rem; width: 5rem">已学习 {{
formatDuration(course.studyTime) }}</span>
<div class="flex-1 mx-4">
<van-progress :percentage="course.progress" :stroke-width="4" color="#4080ff"
:show-pivot="false" />
</div>
<span class="text-sm text-gray-400 shrink-0 text-center"
style="font-size: 0.75rem; width: 2rem; text-align: right">{{ course.progress }}%</span>
</div>
</div>
<van-progress :percentage="course.progress" :stroke-width="4" color="#4080ff" />
</div>
</div>
</van-list>
......@@ -25,42 +36,46 @@
</template>
<script setup>
import { ref } from 'vue'
import { ref } from "vue";
// 接收课程列表数据
const props = defineProps({
courses: {
type: Array,
default: () => []
}
})
default: () => [],
},
});
// 列表加载状态
const loading = ref(false)
const finished = ref(true) // 由于使用的是传入的静态数据，所以直接设置为完成状态
const loading = ref(false);
const finished = ref(true); // 由于使用的是传入的静态数据，所以直接设置为完成状态
// 加载更多
const onLoad = () => {
loading.value = false
}
loading.value = false;
};
// 格式化时长显示
const formatDuration = (seconds) => {
const hours = Math.floor(seconds / 3600)
const minutes = Math.floor((seconds % 3600) / 60)
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
if (hours > 0) {
return `${hours}小时${minutes}分钟`
return `${hours}小时${minutes}分钟`;
}
return `${minutes}分钟`
}
return `${minutes}分钟`;
};
</script>
<style scoped>
.course-list {
padding: 0.5rem;
padding: 0rem;
}
.course-item {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
:deep(.van-image__img) {
border-radius: 0.5rem;
}
</style>
......
......@@ -31,18 +31,14 @@
<van-tab title="学习记录" name="record">
<div class="p-4">
<div class="flex space-x-4 mb-4">
<button
class="rounded-full px-6 py-2 text-sm transition-colors"
<button class="rounded-full px-6 py-2 text-sm transition-colors"
:class="courseType === 'column' ? 'bg-green-500 text-white' : 'bg-gray-100 text-gray-600'"
@click="courseType = 'column'"
>
@click="courseType = 'column'">
专栏
</button>
<button
class="rounded-full px-6 py-2 text-sm transition-colors"
<button class="rounded-full px-6 py-2 text-sm transition-colors"
:class="courseType === 'single' ? 'bg-green-500 text-white' : 'bg-gray-100 text-gray-600'"
@click="courseType = 'single'"
>
@click="courseType = 'single'">
单课
</button>
</div>
......@@ -54,12 +50,24 @@
<!-- 学习统计标签 -->
<van-tab title="学习统计" name="stats">
<div class="p-4">
<van-cell-group inset>
<van-cell title="总学习时长" :value="formatDuration(stats.totalDuration)" />
<van-cell title="已完成课程" :value="`${stats.completedCourses}门`" />
<van-cell title="学习天数" :value="`${stats.studyDays}天`" />
<van-cell title="平均每日学习" :value="formatDuration(stats.avgDailyDuration)" />
</van-cell-group>
<div class="grid grid-cols-2 gap-4">
<div class="bg-white rounded-lg p-4 shadow-sm">
<div class="text-gray-500 text-sm mb-1">总学习时长</div>
<div class="text-black font-medium">{{ formatDuration(stats.totalDuration) }}</div>
</div>
<div class="bg-white rounded-lg p-4 shadow-sm">
<div class="text-gray-500 text-sm mb-1">已完成课程</div>
<div class="text-black font-medium">{{ stats.completedCourses }}门</div>
</div>
<div class="bg-white rounded-lg p-4 shadow-sm">
<div class="text-gray-500 text-sm mb-1">学习天数</div>
<div class="text-black font-medium">{{ stats.studyDays }}天</div>
</div>
<div class="bg-white rounded-lg p-4 shadow-sm">
<div class="text-gray-500 text-sm mb-1">平均每日学习</div>
<div class="text-black font-medium">{{ formatDuration(stats.avgDailyDuration) }}</div>
</div>
</div>
</div>
</van-tab>
</van-tabs>
......