diff --git a/src/pages/course/index.module.scss b/src/pages/course/index.module.scss
index 6cb2518..43306cb 100644
--- a/src/pages/course/index.module.scss
+++ b/src/pages/course/index.module.scss
@@ -5,4 +5,65 @@
   background-color: #ff4d4f;
   box-sizing: border-box;
   padding: 8px 20px 20px 20px;
+  .title {
+    width: 100%;
+    height: 48px;
+    font-size: 16px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.88);
+    line-height: 24px;
+    text-align: left;
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  .info-content {
+    width: 100%;
+    height: 80px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      text-align: left;
+      .record {
+        width: auto;
+        height: 20px;
+        font-size: 14px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.88);
+        line-height: 20px;
+        margin-top: 10px;
+        strong {
+          font-size: 20px;
+        }
+      }
+      .type {
+        width: auto;
+        height: 12px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 12px;
+        margin-top: 20px;
+      }
+    }
+
+    .progress-box {
+      width: 80px;
+      height: 80px;
+      .num {
+        font-size: 16px;
+        font-weight: 600;
+        color: #ffffff;
+        line-height: 16px;
+      }
+    }
+  }
 }
diff --git a/src/pages/course/index.tsx b/src/pages/course/index.tsx
index 14053aa..0903dbc 100644
--- a/src/pages/course/index.tsx
+++ b/src/pages/course/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Image, ProgressBar, SpinLoading } from "antd-mobile";
+import { Image, ProgressCircle, SpinLoading } from "antd-mobile";
 import styles from "./index.module.scss";
 import { useNavigate, useParams } from "react-router-dom";
 import backIcon from "../../assets/images/commen/icon-back-n.png";
@@ -50,7 +50,71 @@ const CoursePage = () => {
           onClick={() => navigate(-1)}
         />
       </div>
-      <div className={styles["top-content"]}></div>
+      <div className={styles["top-content"]}>
+        <div className={styles["title"]}>{course.title}</div>
+        <div className={styles["info-content"]}>
+          <div className={styles["info"]}>
+            <div className={styles["record"]}>
+              已学完课时
+              <strong>
+                {learnRecord ? learnRecord.finished_count : 0}
+              </strong> / {course.class_hour}
+            </div>
+            {course.is_required === 1 && (
+              <div className={styles["type"]}>必修课</div>
+            )}
+            {course.is_required === 0 && (
+              <div className={styles["type"]}>选修课</div>
+            )}
+          </div>
+          <div className={styles["progress-box"]}>
+            {JSON.stringify(learnRecord) === "{}" &&
+              JSON.stringify(learnHourRecord) === "{}" && (
+                <ProgressCircle
+                  percent={0}
+                  style={{
+                    "--size": "80px",
+                    "--fill-color": "#FFFFFF",
+                    "--track-color": "#F6F6F6",
+                    "--track-width": "7px",
+                  }}
+                >
+                  <span className={styles.num}>0%</span>
+                </ProgressCircle>
+              )}
+            {JSON.stringify(learnRecord) === "{}" &&
+              JSON.stringify(learnHourRecord) !== "{}" && (
+                <ProgressCircle
+                  percent={1}
+                  style={{
+                    "--size": "80px",
+                    "--fill-color": "#FFFFFF",
+                    "--track-color": "#F6F6F6",
+                    "--track-width": "7px",
+                  }}
+                >
+                  <span className={styles.num}>1%</span>
+                </ProgressCircle>
+              )}
+            {JSON.stringify(learnRecord) !== "{}" &&
+              JSON.stringify(learnHourRecord) !== "{}" && (
+                <ProgressCircle
+                  percent={Math.floor(learnRecord.progress / 100)}
+                  style={{
+                    "--size": "80px",
+                    "--fill-color": "#FFFFFF",
+                    "--track-color": "#F6F6F6",
+                    "--track-width": "7px",
+                  }}
+                >
+                  <span className={styles.num}>
+                    {Math.floor(learnRecord.progress / 100)}%
+                  </span>
+                </ProgressCircle>
+              )}
+          </div>
+        </div>
+      </div>
     </div>
   );
 };