课程详情初步

src/pages/index/compenents/courses-model.tsx

@@ -1,9 +1,12 @@
 import React, { useState, useEffect } from "react";
 import { Image, Progress } from "antd";
+import { useNavigate } from "react-router-dom";
 import styles from "./courses-model.module.scss";
 import mediaIcon from "../../../assets/images/commen/icon-medal.png";
+import { Navigate } from "react-router-dom";
 
 interface PropInterface {
+  id: number;
   title: string;
   thumb: string;
   isRequired: number;
@@ -11,13 +14,20 @@ interface PropInterface {
 }
 
 export const CoursesModel: React.FC<PropInterface> = ({
+  id,
   title,
   thumb,
   isRequired,
   progress,
 }) => {
+  const navigate = useNavigate();
   return (
-    <div className={styles["item"]}>
+    <div
+      className={styles["item"]}
+      onClick={() => {
+        navigate(`/course/${id}`);
+      }}
+    >
       <div className={styles["top-content"]}>
         <Image
           width={120}

src/pages/index/index.module.scss

@@ -79,7 +79,6 @@
   width: 1200px;
   margin: 0 auto;
   margin-top: 80px;
-  margin-bottom: 80px;
   text-align: center;
   height: 40px;
   font-size: 16px;

src/pages/index/index.tsx

@@ -188,6 +188,7 @@ const IndexPage = () => {
             <div key={item.id}>
               {learnCourseRecords[item.id] && (
                 <CoursesModel
+                  id={item.id}
                   title={item.title}
                   thumb={item.thumb}
                   isRequired={item.is_required}
@@ -196,6 +197,7 @@ const IndexPage = () => {
               )}
               {!learnCourseRecords[item.id] && (
                 <CoursesModel
+                  id={item.id}
                   title={item.title}
                   thumb={item.thumb}
                   isRequired={item.is_required}