yexuejc007/PlayEdu-h5
1
0
Fork 0
mirror of https://github.com/PlayEdu/h5.git synced 2025-06-29 06:02:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

课程详情页初步

Browse Source
This commit is contained in:
禺狨 2023-06-29 17:21:39 +08:00
parent e262ca34ff
commit 3dbf1c081f
2 changed files with 127 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/pages/course/index.module.scss
View File

@ -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;
}
}
}
}

68
src/pages/course/index.tsx
View File

@ -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>
);
};