diff --git a/src/pages/course/index.tsx b/src/pages/course/index.tsx
index b97335c..24b7bd7 100644
--- a/src/pages/course/index.tsx
+++ b/src/pages/course/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Image, Progress } from "antd";
+import { Row, Col, Spin, Image, Progress } from "antd";
 import styles from "./index.module.scss";
 import { useParams } from "react-router-dom";
 import { course as Course } from "../../api/index";
@@ -9,7 +9,7 @@ import { Empty } from "../../compenents";
 
 const CoursePage = () => {
   const params = useParams();
-  const [loading, setLoading] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(true);
   const [course, setCourse] = useState<any>({});
   const [chapters, setChapters] = useState<any>([]);
   const [hours, setHours] = useState<any>({});
@@ -23,177 +23,159 @@ const CoursePage = () => {
 
   const getDetail = () => {
     setLoading(true);
-    Course.detail(Number(params.courseId)).then((res: any) => {
-      setCourse(res.data.course);
-      setChapters(res.data.chapters);
-      setHours(res.data.hours);
-      if (res.data.learn_record) {
-        setLearnRecord(res.data.learn_record);
-      }
-      if (res.data.learn_hour_records) {
-        setLearnHourRecord(res.data.learn_hour_records);
-      }
-      if (res.data.chapters.length === 0) {
-        setTotalHours(res.data.hours[0]);
-      } else if (res.data.chapters.length > 0) {
-        const arr: any = [];
-        for (let key in res.data.hours) {
-          res.data.hours[key].map((item: any) => {
-            arr.push(item);
-          });
+    Course.detail(Number(params.courseId))
+      .then((res: any) => {
+        setCourse(res.data.course);
+        setChapters(res.data.chapters);
+        setHours(res.data.hours);
+        if (res.data.learn_record) {
+          setLearnRecord(res.data.learn_record);
         }
-        setTotalHours(arr);
-      }
-      setLoading(false);
-    });
+        if (res.data.learn_hour_records) {
+          setLearnHourRecord(res.data.learn_hour_records);
+        }
+        if (res.data.chapters.length === 0) {
+          setTotalHours(res.data.hours[0]);
+        } else if (res.data.chapters.length > 0) {
+          const arr: any = [];
+          for (let key in res.data.hours) {
+            res.data.hours[key].map((item: any) => {
+              arr.push(item);
+            });
+          }
+          setTotalHours(arr);
+        }
+        setLoading(false);
+      })
+      .catch((e) => {
+        setLoading(false);
+      });
   };
 
   return (
     <div className="container">
-      <div className={styles["top-cont"]}>
-        <div className="j-b-flex">
-          <div className="d-flex">
-            <Image
-              width={120}
-              height={90}
-              style={{ borderRadius: 10 }}
-              preview={false}
-              src={course.thumb}
-            />
-            <div className={styles["info"]}>
-              <div className={styles["title"]}>{course.title}</div>
-              <div className={styles["status"]}>
-                {course.is_required === 1 && (
-                  <div className={styles["type"]}>必修课</div>
-                )}
-                {course.is_required === 0 && (
-                  <div className={styles["active-type"]}>选修课</div>
-                )}
-                {learnRecord.progress / 100 >= 100 && (
-                  <div className={styles["success"]}>
-                    <Image
-                      width={24}
-                      height={24}
-                      src={mediaIcon}
-                      preview={false}
-                    />
-                    <span className="ml-8">恭喜你学完此课程!</span>
+      {loading && (
+        <Row
+          style={{
+            width: 1200,
+            margin: "0 auto",
+            paddingTop: 14,
+            minHeight: 301,
+          }}
+        >
+          <div className="float-left d-j-flex mt-50">
+            <Spin size="large" />
+          </div>
+        </Row>
+      )}
+      {!loading && (
+        <>
+          <div className={styles["top-cont"]}>
+            <div className="j-b-flex">
+              <div className="d-flex">
+                <Image
+                  width={120}
+                  height={90}
+                  style={{ borderRadius: 10 }}
+                  preview={false}
+                  src={course.thumb}
+                />
+                <div className={styles["info"]}>
+                  <div className={styles["title"]}>{course.title}</div>
+                  <div className={styles["status"]}>
+                    {course.is_required === 1 && (
+                      <div className={styles["type"]}>必修课</div>
+                    )}
+                    {course.is_required === 0 && (
+                      <div className={styles["active-type"]}>选修课</div>
+                    )}
+                    {learnRecord.progress / 100 >= 100 && (
+                      <div className={styles["success"]}>
+                        <Image
+                          width={24}
+                          height={24}
+                          src={mediaIcon}
+                          preview={false}
+                        />
+                        <span className="ml-8">恭喜你学完此课程!</span>
+                      </div>
+                    )}
                   </div>
-                )}
+                </div>
               </div>
+              {JSON.stringify(learnRecord) === "{}" &&
+                JSON.stringify(learnHourRecord) === "{}" && (
+                  <Progress
+                    type="circle"
+                    strokeColor="#FF4D4F"
+                    trailColor="#F6F6F6"
+                    size={90}
+                    strokeWidth={8}
+                    percent={0}
+                    format={(percent) => `${percent}%`}
+                  />
+                )}
+              {JSON.stringify(learnRecord) === "{}" &&
+                JSON.stringify(learnHourRecord) !== "{}" && (
+                  <Progress
+                    type="circle"
+                    strokeColor="#FF4D4F"
+                    trailColor="#F6F6F6"
+                    size={90}
+                    strokeWidth={8}
+                    percent={1}
+                    format={(percent) => `${percent}%`}
+                  />
+                )}
+              {JSON.stringify(learnRecord) !== "{}" &&
+                JSON.stringify(learnHourRecord) !== "{}" && (
+                  <Progress
+                    type="circle"
+                    strokeColor="#FF4D4F"
+                    trailColor="#F6F6F6"
+                    size={90}
+                    strokeWidth={8}
+                    percent={learnRecord.progress / 100}
+                    format={(percent) => `${percent}%`}
+                  />
+                )}
             </div>
+            {course.short_desc && (
+              <div className={styles["desc"]}>{course.short_desc}</div>
+            )}
           </div>
-          {JSON.stringify(learnRecord) === "{}" &&
-            JSON.stringify(learnHourRecord) === "{}" && (
-              <Progress
-                type="circle"
-                strokeColor="#FF4D4F"
-                trailColor="#F6F6F6"
-                size={90}
-                strokeWidth={8}
-                percent={0}
-                format={(percent) => `${percent}%`}
-              />
+          <div className={styles["chapters-hours-cont"]}>
+            {chapters.length === 0 && JSON.stringify(hours) === "{}" && (
+              <Empty />
             )}
-          {JSON.stringify(learnRecord) === "{}" &&
-            JSON.stringify(learnHourRecord) !== "{}" && (
-              <Progress
-                type="circle"
-                strokeColor="#FF4D4F"
-                trailColor="#F6F6F6"
-                size={90}
-                strokeWidth={8}
-                percent={1}
-                format={(percent) => `${percent}%`}
-              />
-            )}
-          {JSON.stringify(learnRecord) !== "{}" &&
-            JSON.stringify(learnHourRecord) !== "{}" && (
-              <Progress
-                type="circle"
-                strokeColor="#FF4D4F"
-                trailColor="#F6F6F6"
-                size={90}
-                strokeWidth={8}
-                percent={learnRecord.progress / 100}
-                format={(percent) => `${percent}%`}
-              />
-            )}
-        </div>
-        {course.short_desc && (
-          <div className={styles["desc"]}>{course.short_desc}</div>
-        )}
-      </div>
-      <div className={styles["chapters-hours-cont"]}>
-        {chapters.length === 0 && JSON.stringify(hours) === "{}" && <Empty />}
-        {chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
-          <div className={styles["hours-list-box"]}>
-            {hours[0].map((item: any, index: number) => (
-              <div key={item.id} className={styles["hours-it"]}>
-                {learnHourRecord[item.id] && (
-                  <HourCompenent
-                    id={item.id}
-                    cid={item.course_id}
-                    title={item.title}
-                    record={learnHourRecord[item.id]}
-                    records={learnHourRecord}
-                    duration={item.duration}
-                    progress={
-                      (learnHourRecord[item.id].finished_duration * 100) /
-                      learnHourRecord[item.id].total_duration
-                    }
-                    totalHours={totalHours}
-                    onChange={() => getDetail()}
-                  ></HourCompenent>
-                )}
-                {!learnHourRecord[item.id] && (
-                  <HourCompenent
-                    id={item.id}
-                    cid={item.course_id}
-                    title={item.title}
-                    record={null}
-                    records={learnHourRecord}
-                    duration={item.duration}
-                    progress={0}
-                    totalHours={totalHours}
-                    onChange={() => getDetail()}
-                  ></HourCompenent>
-                )}
-              </div>
-            ))}
-          </div>
-        )}
-        {chapters.length > 0 && JSON.stringify(hours) !== "{}" && (
-          <div className={styles["hours-list-box"]}>
-            {chapters.map((item: any, index: number) => (
-              <div key={item.id} className={styles["chapter-it"]}>
-                <div className={styles["chapter-name"]}>{item.name}</div>
-                {hours[item.id].map((it: any, int: number) => (
-                  <div key={it.id} className={styles["hours-it"]}>
-                    {learnHourRecord[it.id] && (
+            {chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
+              <div className={styles["hours-list-box"]}>
+                {hours[0].map((item: any, index: number) => (
+                  <div key={item.id} className={styles["hours-it"]}>
+                    {learnHourRecord[item.id] && (
                       <HourCompenent
-                        id={it.id}
+                        id={item.id}
                         cid={item.course_id}
-                        title={it.title}
-                        record={learnHourRecord[it.id]}
+                        title={item.title}
+                        record={learnHourRecord[item.id]}
                         records={learnHourRecord}
-                        duration={it.duration}
+                        duration={item.duration}
                         progress={
-                          (learnHourRecord[it.id].finished_duration * 100) /
-                          learnHourRecord[it.id].total_duration
+                          (learnHourRecord[item.id].finished_duration * 100) /
+                          learnHourRecord[item.id].total_duration
                         }
-                        onChange={() => getDetail()}
                         totalHours={totalHours}
+                        onChange={() => getDetail()}
                       ></HourCompenent>
                     )}
-                    {!learnHourRecord[it.id] && (
+                    {!learnHourRecord[item.id] && (
                       <HourCompenent
-                        id={it.id}
+                        id={item.id}
                         cid={item.course_id}
-                        title={it.title}
+                        title={item.title}
                         record={null}
                         records={learnHourRecord}
-                        duration={it.duration}
+                        duration={item.duration}
                         progress={0}
                         totalHours={totalHours}
                         onChange={() => getDetail()}
@@ -202,10 +184,52 @@ const CoursePage = () => {
                   </div>
                 ))}
               </div>
-            ))}
+            )}
+            {chapters.length > 0 && JSON.stringify(hours) !== "{}" && (
+              <div className={styles["hours-list-box"]}>
+                {chapters.map((item: any, index: number) => (
+                  <div key={item.id} className={styles["chapter-it"]}>
+                    <div className={styles["chapter-name"]}>{item.name}</div>
+                    {hours[item.id].map((it: any, int: number) => (
+                      <div key={it.id} className={styles["hours-it"]}>
+                        {learnHourRecord[it.id] && (
+                          <HourCompenent
+                            id={it.id}
+                            cid={item.course_id}
+                            title={it.title}
+                            record={learnHourRecord[it.id]}
+                            records={learnHourRecord}
+                            duration={it.duration}
+                            progress={
+                              (learnHourRecord[it.id].finished_duration * 100) /
+                              learnHourRecord[it.id].total_duration
+                            }
+                            onChange={() => getDetail()}
+                            totalHours={totalHours}
+                          ></HourCompenent>
+                        )}
+                        {!learnHourRecord[it.id] && (
+                          <HourCompenent
+                            id={it.id}
+                            cid={item.course_id}
+                            title={it.title}
+                            record={null}
+                            records={learnHourRecord}
+                            duration={it.duration}
+                            progress={0}
+                            totalHours={totalHours}
+                            onChange={() => getDetail()}
+                          ></HourCompenent>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                ))}
+              </div>
+            )}
           </div>
-        )}
-      </div>
+        </>
+      )}
     </div>
   );
 };