首页课程模块初步

src/pages/index/compenents/courses-model.module.scss

@@ -0,0 +1,99 @@
+@keyframes scaleMarginTop {
+  0% {
+    margin-top: 0;
+  }
+
+  100% {
+    margin-top: -5px;
+  }
+}
+.item {
+  width: 100%;
+  height: 186px;
+  background: #ffffff;
+  border-radius: 12px;
+  border: 2px solid #f6f6f6;
+  box-sizing: border-box;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  &:hover {
+    box-shadow: 0px 4px 16px 8px rgba(0, 0, 0, 0.04);
+    animation: scaleMarginTop 0.5s;
+  }
+  .top-content {
+    width: 100%;
+    height: 90px;
+    display: flex;
+    justify-content: space-between;
+    .info {
+      width: 192px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .title {
+        width: 100%;
+        height: 48px;
+        font-size: 16px;
+        font-weight: 500;
+        color: rgba(0, 0, 0, 0.88);
+        line-height: 24px;
+        text-align: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+      .type {
+        width: 52px;
+        height: 24px;
+        background: rgba(255, 77, 79, 0.1);
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #ff4d4f;
+        line-height: 24px;
+      }
+      .active-type {
+        width: 52px;
+        height: 24px;
+        background: rgba(#ff9900, 0.1);
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #ff9900;
+        line-height: 24px;
+      }
+    }
+  }
+  .status-content {
+    width: 100%;
+    height: 24px;
+    margin-top: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    span {
+      height: 24px;
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.45);
+      line-height: 24px;
+    }
+    .success {
+      width: 100%;
+      height: 24px;
+      display: flex;
+      span {
+        height: 24px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #ff4d4f;
+        line-height: 24px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from "react";
+import { Image, Progress } from "antd";
+import styles from "./courses-model.module.scss";
+import mediaIcon from "../../../assets/images/commen/icon-medal.png";
+
+interface PropInterface {
+  title: string;
+  thumb: string;
+  isRequired: number;
+  progress: number;
+}
+
+export const CoursesModel: React.FC<PropInterface> = ({
+  title,
+  thumb,
+  isRequired,
+  progress,
+}) => {
+  return (
+    <div className={styles["item"]}>
+      <div className={styles["top-content"]}>
+        <Image
+          width={120}
+          height={90}
+          style={{ borderRadius: 10 }}
+          src={thumb}
+          preview={false}
+        />
+        <div className={styles["info"]}>
+          <div className={styles["title"]}>{title}</div>
+          {isRequired === 1 && <div className={styles["type"]}>必修课</div>}
+          {isRequired === 0 && (
+            <div className={styles["active-type"]}>选修课</div>
+          )}
+        </div>
+      </div>
+      <div className={styles["status-content"]}>
+        {progress == 0 && (
+          <>
+            <Progress
+              style={{ width: 270 }}
+              percent={0}
+              strokeColor="#FF4D4F"
+              trailColor="#F6F6F6"
+              showInfo={false}
+            />
+            <span>未学习</span>
+          </>
+        )}
+        {progress > 0 && progress < 100 && (
+          <Progress
+            percent={progress}
+            strokeColor="#FF4D4F"
+            trailColor="#F6F6F6"
+          />
+        )}
+        {progress === 100 && (
+          <div className={styles["success"]}>
+            <Image width={24} height={24} src={mediaIcon} preview={false} />
+            <span className="ml-8">恭喜你学完此套课程!</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};