From 37f952911c5dfe3ec0544d18c348f629438cc159 Mon Sep 17 00:00:00 2001
From: HoshinoSuzumi <master@uniiem.com>
Date: Fri, 20 Sep 2024 17:16:34 +0800
Subject: [PATCH] =?UTF-8?q?ui:=20=E8=B0=83=E6=95=B4=E8=AF=BE=E7=A8=8B?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts            |  1 -
 src/pages/lesson/index.vue | 16 +++++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 56a1c04..7888117 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -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']
diff --git a/src/pages/lesson/index.vue b/src/pages/lesson/index.vue
index 147befb..0262917 100644
--- a/src/pages/lesson/index.vue
+++ b/src/pages/lesson/index.vue
@@ -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>