update

src/modules/course/my/components/ViewTop.vue

+<script setup lang="ts">
+</script>
+<template>
+<div class="top-info">
+  <div class="cover"></div>
+</div>
+</template>
+<style lang="scss" scoped>
+.top-info{
+  display: flex;
+  .cover{
+    width: 240px;
+    height: 180px;
+    background: url(https://webapp-pub.ezijing.com/upload/admin/0d58c61cda01afd20d8ec0274b4d8a08.jpg);
+    background-size: cover;
+  }
+}
+</style>

src/modules/course/my/index.ts

@@ -7,7 +7,8 @@ export const routes: Array<RouteRecordRaw> = [
     component: AppLayout,
     children: [
       { path: '', component: () => import('./views/List.vue') },
-      { path: '/course/my/StepTwo', component: () => import('./views/StepTwo.vue') }
+      { path: '/course/my/StepTwo', component: () => import('./views/StepTwo.vue') },
+      { path: '/course/my/view', component: () => import('./views/View.vue') }
     ]
   }
 ]

src/modules/course/my/views/View.vue

+<script setup lang="ts">
+import ViewTop from '../components/ViewTop.vue'
+</script>
+<template>
+<AppCard title="查阅课程">
+  <div class="course-view">
+    <div class="course-left_info">
+      <ViewTop></ViewTop>
+    </div>
+  </div>
+</AppCard>
+</template>
+<style lang="scss" scoped>
+.course-view{
+  display: flex;
+  .course-left_info{
+    width: 840px;
+    // height: 200px;
+    // background: red;
+  }
+}
+</style>