huertian/ppms-uni-vue3-huertian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: 调整课程详情样式

Browse Source
This commit is contained in:
Timothy Yin 2024-09-20 17:16:34 +08:00
parent 3492fc6c5c
commit 37f952911c
2 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@ -19,7 +19,6 @@ declare module 'vue' {
WdInput: typeof import('wot-design-uni/components/wd-input/wd-input.vue')['default']
WdProgress: typeof import('wot-design-uni/components/wd-progress/wd-progress.vue')['default']
WdStatusTip: typeof import('wot-design-uni/components/wd-status-tip/wd-status-tip.vue')['default']
WdSte: typeof import('wot-design-uni/components/wd-ste/wd-ste.vue')['default']
WdStep: typeof import('wot-design-uni/components/wd-step/wd-step.vue')['default']
WdSteps: typeof import('wot-design-uni/components/wd-steps/wd-steps.vue')['default']
WdTabbar: typeof import('wot-design-uni/components/wd-tabbar/wd-tabbar.vue')['default']

16
src/pages/lesson/index.vue
View File

@ -12,6 +12,7 @@ const toast = useToast()
const lesson = ref<Lesson | null>(null)
const lessonSteps = computed(() => lesson.value ? getLessonSteps(lesson.value) : [])
const lessonStages = computed(() => lesson.value ? extractLessonStage(lesson.value) : null)
const lessonProgress = computed(() => lesson.value ? calcLessonProgress(lesson.value) : 0)
onMounted(() => {
if (!route.params?.courseId) {
@ -34,6 +35,14 @@ onMounted(() => {
<template>
<div>
<div class="pattern p-4 flex flex-col gap-6 relative">
<div class="flex flex-col gap-0">
<h2 class="text-sm text-white font-black op-50">{{ lesson?.m_lesson_name }}</h2>
<h1 class="text-lg text-white font-bold">{{ lesson?.course_name }}</h1>
</div>
<p class="text-xs text-white font-bold op-50" style="line-height: 1;">创建于 {{ lesson?.created_at }}</p>
<wd-icon :name="lessonProgress === 100 ? 'check-circle' : 'hourglass'" custom-class="absolute text-white top-2 right-2 op-35" size="64px" />
</div>
<div class="p-4">
<wd-steps :active="lessonStages?.step || 0" vertical>
<wd-step v-for="(step, index) in lessonSteps" :key="index" :title="step.title"
@ -43,4 +52,9 @@ onMounted(() => {
</div>
</template>
<style scoped></style>
<style scoped>
.pattern {
background-color: #4d80f0;
background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
</style>