diff --git a/components.d.ts b/components.d.ts
index 6e917f9..083c60d 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -15,8 +15,10 @@ declare module 'vue' {
     WdCollapse: typeof import('wot-design-uni/components/wd-collapse/wd-collapse.vue')['default']
     WdCollapseItem: typeof import('wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue')['default']
     WdForm: typeof import('wot-design-uni/components/wd-form/wd-form.vue')['default']
+    WdIcon: typeof import('wot-design-uni/components/wd-icon/wd-icon.vue')['default']
     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']
     WdTabbar: typeof import('wot-design-uni/components/wd-tabbar/wd-tabbar.vue')['default']
     WdTabbarItem: typeof import('wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue')['default']
     WdToast: typeof import('wot-design-uni/components/wd-toast/wd-toast.vue')['default']
diff --git a/package.json b/package.json
index 3c663a8..b35aef9 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "@dcloudio/uni-stacktracey": "3.0.0-4020420240722002",
     "@dcloudio/vite-plugin-uni": "3.0.0-4020420240722002",
     "@uni-helper/vite-plugin-uni-components": "^0.1.0",
+    "@unocss/transformer-directives": "^0.62.4",
     "@vue/runtime-core": "^3.4.21",
     "@vue/tsconfig": "^0.1.3",
     "add": "^2.0.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 34cc0b2..ce68391 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -84,6 +84,9 @@ importers:
       '@uni-helper/vite-plugin-uni-components':
         specifier: ^0.1.0
         version: 0.1.0(rollup@4.21.3)
+      '@unocss/transformer-directives':
+        specifier: ^0.62.4
+        version: 0.62.4
       '@vue/runtime-core':
         specifier: ^3.4.21
         version: 3.5.5
@@ -1494,55 +1497,46 @@ packages:
     resolution: {integrity: sha512-btVgIsCjuYFKUjopPoWiDqmoUXQDiW2A4C3Mtmp5vACm7/GnyuprqIDPNczeyR5W8rTXEbkmrJux7cJmD99D2g==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.21.3':
     resolution: {integrity: sha512-zmjbSphplZlau6ZTkxd3+NMtE4UKVy7U4aVFMmHcgO5CUbw17ZP6QCgyxhzGaU/wFFdTfiojjbLG3/0p9HhAqA==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.21.3':
     resolution: {integrity: sha512-nSZfcZtAnQPRZmUkUQwZq2OjQciR6tEoJaZVFvLHsj0MF6QhNMg0fQ6mUOsiCUpTqxTx0/O6gX0V/nYc7LrgPw==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.21.3':
     resolution: {integrity: sha512-MnvSPGO8KJXIMGlQDYfvYS3IosFN2rKsvxRpPO2l2cum+Z3exiExLwVU+GExL96pn8IP+GdH8Tz70EpBhO0sIQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.21.3':
     resolution: {integrity: sha512-+W+p/9QNDr2vE2AXU0qIy0qQE75E8RTwTwgqS2G5CRQ11vzq0tbnfBd6brWhS9bCRjAjepJe2fvvkvS3dno+iw==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.21.3':
     resolution: {integrity: sha512-yXH6K6KfqGXaxHrtr+Uoy+JpNlUlI46BKVyonGiaD74ravdnF9BUNC+vV+SIuB96hUMGShhKV693rF9QDfO6nQ==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.21.3':
     resolution: {integrity: sha512-R8cwY9wcnApN/KDYWTH4gV/ypvy9yZUHlbJvfaiXSB48JO3KpwSpjOGqO4jnGkLDSk1hgjYkTbTt6Q7uvPf8eg==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.21.3':
     resolution: {integrity: sha512-kZPbX/NOPh0vhS5sI+dR8L1bU2cSO9FgxwM8r7wHzGydzfSjLRCFAT87GR5U9scj2rhzN3JPYVC7NoBbl4FZ0g==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.21.3':
     resolution: {integrity: sha512-S0Yq+xA1VEH66uiMNhijsWAafffydd2X5b77eLHfRmfLsRSpbiAWiRHV6DEpz6aOToPsgid7TI9rGd6zB1rhbg==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.21.3':
     resolution: {integrity: sha512-9isNzeL34yquCPyerog+IMCNxKR8XYmGd0tHSV+OVx0TmE0aJOo9uw4fZfUuk2qxobP5sug6vNdZR6u7Mw7Q+Q==}
@@ -1641,6 +1635,9 @@ packages:
   '@unocss/core@0.62.3':
     resolution: {integrity: sha512-Pfyrj8S7jq9K1QXD6Z5BCeiQavaHpbMN5q958/kmdbNGp57hOg1e346fMJAvgPjLBR+lE/hgZEsDrijtRiZXnw==}
 
+  '@unocss/core@0.62.4':
+    resolution: {integrity: sha512-Cc+Vo6XlaQpyVejkJrrzzWtiK9pgMWzVVBpm9VCVtwZPUjD4GSc+g7VQCPXSsr7m03tmSuRySJx72QcASmauNQ==}
+
   '@unocss/extractor-arbitrary-variants@0.62.3':
     resolution: {integrity: sha512-9ZscWyXEwDZif+b56xZyJFHwJOjdMXmj+6x96jOsnRNBzwT9eW7YcGCErP1ih/q1S6KmuRrHM/JOXMBQ6H4qlw==}
 
@@ -1684,6 +1681,10 @@ packages:
     resolution: {integrity: sha512-qI37jHH//XzyR5Y2aN3Kpo4lQrQO+CaiXpqPSwMLYh2bIypc2RQVpqGVtU736x0eA6IIx41XEkKzUW+VtvJvmg==}
     engines: {node: '>=14'}
 
+  '@unocss/rule-utils@0.62.4':
+    resolution: {integrity: sha512-XUwLbLUzL+VSHCJNK5QBHC9RbFehumge1/XJmsRfmh0+oxgJoO1gvEvxi57gYEmdJdMRJHRJZ66se6+cB0Ymvw==}
+    engines: {node: '>=14'}
+
   '@unocss/scope@0.62.3':
     resolution: {integrity: sha512-TJGmFfsMrTo8DBJ7CJupIqObpgij+w4jCHMBf1uu0/9jbm63dH6WGcrl3zf5mm6UBTeLmB0RwJ8K4hs7LtrBDQ==}
 
@@ -1699,6 +1700,9 @@ packages:
   '@unocss/transformer-directives@0.62.3':
     resolution: {integrity: sha512-HqHwFOA7DfxD/A1ROZIp8Dr8iZcE0z4w3VQtViWPQ89Fqmb7p2wCPGekk+8yW5PAltpynvHE4ahJEto5xjdg6w==}
 
+  '@unocss/transformer-directives@0.62.4':
+    resolution: {integrity: sha512-bq9ZDG6/mr6X2mAogAo0PBVrLSLT0900MPqnj/ixadYHc7mRpX+y6bc/1AgWytZIFYSdNzf7XDoquZuwf42Ucg==}
+
   '@unocss/transformer-variant-group@0.62.3':
     resolution: {integrity: sha512-oNX1SdfWemz0GWGSXACu8NevM0t2l44j2ancnooNkNz3l1+z1nbn4vFwfsJCOqOaoVm4ZqxaiQ8HIx81ZSiU1A==}
 
@@ -6673,6 +6677,8 @@ snapshots:
 
   '@unocss/core@0.62.3': {}
 
+  '@unocss/core@0.62.4': {}
+
   '@unocss/extractor-arbitrary-variants@0.62.3':
     dependencies:
       '@unocss/core': 0.62.3
@@ -6748,6 +6754,11 @@ snapshots:
       '@unocss/core': 0.62.3
       magic-string: 0.30.11
 
+  '@unocss/rule-utils@0.62.4':
+    dependencies:
+      '@unocss/core': 0.62.4
+      magic-string: 0.30.11
+
   '@unocss/scope@0.62.3': {}
 
   '@unocss/transformer-attributify-jsx-babel@0.62.3':
@@ -6773,6 +6784,12 @@ snapshots:
       '@unocss/rule-utils': 0.62.3
       css-tree: 2.3.1
 
+  '@unocss/transformer-directives@0.62.4':
+    dependencies:
+      '@unocss/core': 0.62.4
+      '@unocss/rule-utils': 0.62.4
+      css-tree: 2.3.1
+
   '@unocss/transformer-variant-group@0.62.3':
     dependencies:
       '@unocss/core': 0.62.3
diff --git a/src/api/BussApi.ts b/src/api/BussApi.ts
index fbc9d1c..fa391e6 100644
--- a/src/api/BussApi.ts
+++ b/src/api/BussApi.ts
@@ -29,7 +29,10 @@ export default class BussApi {
       .then((res) => res.data);
   }
 
-  static lessons(page: number = 1, limit: number = 20): Promise<PagedData<Lesson>> {
+  static lessons(
+    page: number = 1,
+    limit: number = 20
+  ): Promise<PagedData<Lesson>> {
     const user = useUser();
     return http
       .server()
@@ -41,4 +44,16 @@ export default class BussApi {
       })
       .then((res) => res.data);
   }
+
+  static course(id: number): Promise<Lesson> {
+    const user = useUser();
+    return http
+      .server()
+      .get(`/lesson/task/${id}`, {
+        headers: {
+          Authorization: `Bearer ${user.token}`,
+        },
+      })
+      .then((res) => res.data);
+  }
 }
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index facab9f..31bcbd8 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -12,17 +12,22 @@ const router = useRouter()
 const expandedCourse = ref(['lesson'])
 const groupLessons = ref<{ [key: string]: Lesson[] }>({})
 
-const openLessonDetail = (lessonName: string) => {
-  console.log(router.routes);
-
+const openLessonDetail = (courseId: number) => {
   router.push({
     name: 'lesson',
     params: {
-      lessonName
+      courseId: `${courseId}`
     }
   })
 }
 
+const calcProgress = (course: Lesson) => {
+  const total = 4
+  let finished = 0
+  if (!!course?.script_file) finished++
+  return Math.floor((finished / total) * 100)
+}
+
 onMounted(() => {
   toast.loading({
     msg: '加载中...'
@@ -45,19 +50,20 @@ onMounted(() => {
   <page-wrapper>
     <div>
       <wd-collapse v-model="expandedCourse">
-        <wd-collapse-item v-for="(lessons, lessonName) in groupLessons" :title="`${lessonName}`" :name="`${lessonName}`"
-          :key="lessonName">
+        <wd-status-tip v-if="Object.keys(groupLessons).length === 0" image="content" tip="没有课程" />
+        <wd-collapse-item v-else v-for="(lessons, lessonName) in groupLessons" :title="`${lessonName || '无标题课程'}`"
+          :name="`${lessonName}`" :key="lessonName">
           <div class="w-full">
-            <!-- <wd-card type="rectangle" v-for="(course, i) in lessons" :title="course.course_name">
-              todo
-            </wd-card> -->
-            <div v-for="(course, i) in lessons" :key="i" @click="openLessonDetail(`${lessonName}`)"
-              class="w-full flex justify-between items-center gap-20" style="justify-content: space-between;">
-              <div class="">
-                {{ course.course_name || '无标题课程' }}
+            <wd-status-tip v-if="lessons.length === 0" image="content" tip="没有微课视频" />
+            <div v-else v-for="(course, i) in lessons" :key="i" @click="openLessonDetail(course.id)"
+              class="w-full py-2 flex justify-between items-center gap-20 border-b border-b-solid border-neutral-200 last:border-b-0 first:pt-0 last:pb-0">
+              <div class="flex items-center gap-1">
+                <wd-icon :name="calcProgress(course) === 100 ? 'check-circle' : 'hourglass'" size="16px"></wd-icon>
+                <span>{{ course.course_name || '无标题视频' }}</span>
               </div>
-              <div class="flex-1">
-                <wd-progress :percentage="30" />
+              <div class="w-32 flex items-center gap-3">
+                <wd-progress :percentage="calcProgress(course)" />
+                <wd-icon name="arrow-right" size="16px" class="op-85"></wd-icon>
               </div>
             </div>
           </div>
diff --git a/src/pages/lesson/index.vue b/src/pages/lesson/index.vue
index 01d7836..d9964ce 100644
--- a/src/pages/lesson/index.vue
+++ b/src/pages/lesson/index.vue
@@ -1,13 +1,35 @@
 <script lang="ts" setup>
+import BussApi from '@/api/BussApi';
+import type { Lesson } from '@/types/api/lesson';
 import { useRoute } from 'uni-mini-router';
+import { onMounted, ref } from 'vue';
+import { useToast } from 'wot-design-uni';
 
 const route = useRoute()
+const toast = useToast()
+
+const course = ref<Lesson | null>(null)
+
+onMounted(() => {
+  if (!route.params?.courseId) {
+    toast.error({
+      msg: '参数错误'
+    })
+    return
+  }
+  toast.loading({
+    msg: '加载中...'
+  })
+  BussApi.course(route.params.courseId).then(courseData => {
+    toast.close()
+    course.value = courseData
+  })
+})
 </script>
 
 <template>
   <div>
-    <h1>lesson detail</h1>
-    <p>{{ decodeURI(route.params?.lessonName) }}</p>
+    <pre>{{ JSON.stringify(course, null, 2) }}</pre>
   </div>
 </template>
 
diff --git a/uno.config.ts b/uno.config.ts
index 83deb75..7b63321 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -4,13 +4,17 @@ import {
   transformerClass,
 } from "unocss-preset-weapp/transformer";
 
+import transformerDirectives from "@unocss/transformer-directives";
+
 const { presetWeappAttributify, transformerAttributify } =
   extractorAttributify();
 
 export default {
   presets: [
     // https://github.com/MellowCo/unocss-preset-weapp
-    presetWeapp(),
+    presetWeapp({
+      whRpx: false,
+    }),
     // attributify autocomplete
     presetWeappAttributify(),
   ],
@@ -22,6 +26,10 @@ export default {
   ],
 
   transformers: [
+    transformerDirectives({
+      enforce: "pre",
+    }),
+
     // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
     transformerAttributify(),