yexuejc007/PlayEdu-frontend
1
0
Fork 0
mirror of https://github.com/PlayEdu/frontend.git synced 2025-12-20 15:15:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

屏幕最小高度

Browse Source
This commit is contained in:
禺狨
2023-03-30 10:12:31 +08:00
parent c76557541b
commit c1b0bf28f7
6 changed files with 202 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/index.scss
View File

@@ -35,6 +35,24 @@ body {
min-height: 100vh; min-height: 100vh;
} }
.main-body {
width: 100%;
height: auto;
min-height: 900px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.container {
width: 1200px;
min-height: 900px;
height: auto;
margin: 0 auto;
display: flex;
flex-direction: column
}
h1 { h1 {
font-size: 3.2em; font-size: 3.2em;
line-height: 1.1; line-height: 1.1;
@@ -221,13 +239,6 @@ h1 {
color: $primaryColor; color: $primaryColor;
} }
.container {
width: 1200px;
min-height: calc(100vh - 260px);
height: auto;
margin: 0 auto;
}
.login-box { .login-box {
.ant-btn { .ant-btn {
font-size: 18px !important; font-size: 18px !important;

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

@@ -8,7 +8,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
padding: 24px; padding: 24px 24px 24px 24px;
.info { .info {
width: 720px; width: 720px;
height: 90px; height: 90px;

3
src/pages/index/index.module.scss
View File

@@ -2,7 +2,7 @@
width: 1200px; width: 1200px;
height: auto; height: auto;
margin: 0 auto; margin: 0 auto;
margin-top: 50px; padding-top: 50px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@@ -133,7 +133,6 @@
gap: 24px; gap: 24px;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
position: relative; position: relative;
min-height: calc(100vh - 630px);
} }
.extra { .extra {

360
src/pages/index/index.tsx
View File

@@ -108,199 +108,201 @@ const IndexPage = () => {
}; };
return ( return (
<> <div className="main-body">
<div className={styles["top-cont"]}> <div className="content">
<div className={styles["top-item"]}> <div className={styles["top-cont"]}>
<div className={styles["title"]}> <div className={styles["top-item"]}>
<img className={styles["icon"]} src={myLesoon} /> <div className={styles["title"]}>
<span>课程进度</span> <img className={styles["icon"]} src={myLesoon} />
</div> <span>课程进度</span>
<div className={styles["info"]}>
<div className={styles["info-item"]}>
<span>必修课：已完成课时</span>
<strong> {stats.required_finished_course_count || 0} </strong>
<span>/ {stats.required_course_count || 0}</span>
</div> </div>
{stats.nun_required_hour_count > 0 && ( <div className={styles["info"]}>
<div className={styles["info-item"]}> <div className={styles["info-item"]}>
<span>选修课：已完成课时</span> <span>必修课：已完成课时</span>
<strong> {stats.required_finished_course_count || 0} </strong>
<span>/ {stats.required_course_count || 0}</span>
</div>
{stats.nun_required_hour_count > 0 && (
<div className={styles["info-item"]}>
<span>选修课：已完成课时</span>
<strong>
{" "}
{stats.nun_required_finished_course_count || 0}{" "}
</strong>
<span>/ {stats.required_finished_course_count || 0}</span>
</div>
)}
</div>
</div>
<div className={styles["top-item"]}>
<div className={styles["title"]}>
<img className={styles["icon"]} src={studyTime} />
<span>学习时长</span>
</div>
<div className={styles["info"]}>
<div className={styles["info-item"]}>
今日：
{studyTimeFormat(stats.today_learn_duration)[0] !== 0 && (
<>
<strong>
{" "}
{studyTimeFormat(stats.today_learn_duration)[0] || 0}{" "}
</strong>
天
</>
)}
{studyTimeFormat(stats.today_learn_duration)[1] !== 0 && (
<>
<strong>
{" "}
{studyTimeFormat(stats.today_learn_duration)[1] || 0}{" "}
</strong>
小时
</>
)}
<strong> <strong>
{" "} {" "}
{stats.nun_required_finished_course_count || 0}{" "} {studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "}
</strong> </strong>
<span>/ {stats.required_finished_course_count || 0}</span> 分钟
<strong>
{" "}
{studyTimeFormat(stats.today_learn_duration)[3] || 0}{" "}
</strong>
秒
</div>
<div className={styles["info-item"]}>
累计：
{studyTimeFormat(stats.learn_duration || 0)[0] !== 0 && (
<>
<strong>
{" "}
{studyTimeFormat(stats.learn_duration || 0)[0] || 0}{" "}
</strong>
天
</>
)}
{studyTimeFormat(stats.learn_duration || 0)[1] !== 0 && (
<>
<strong>
{" "}
{studyTimeFormat(stats.learn_duration || 0)[1] || 0}{" "}
</strong>
小时
</>
)}
<strong>
{" "}
{studyTimeFormat(stats.learn_duration || 0)[2] || 0}{" "}
</strong>
分钟
<strong>
{" "}
{studyTimeFormat(stats.learn_duration || 0)[3] || 0}{" "}
</strong>
秒
</div> </div>
)}
</div>
</div>
<div className={styles["top-item"]}>
<div className={styles["title"]}>
<img className={styles["icon"]} src={studyTime} />
<span>学习时长</span>
</div>
<div className={styles["info"]}>
<div className={styles["info-item"]}>
今日：
{studyTimeFormat(stats.today_learn_duration)[0] !== 0 && (
<>
<strong>
{" "}
{studyTimeFormat(stats.today_learn_duration)[0] || 0}{" "}
</strong>
天
</>
)}
{studyTimeFormat(stats.today_learn_duration)[1] !== 0 && (
<>
<strong>
{" "}
{studyTimeFormat(stats.today_learn_duration)[1] || 0}{" "}
</strong>
小时
</>
)}
<strong>
{" "}
{studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "}
</strong>
分钟
<strong>
{" "}
{studyTimeFormat(stats.today_learn_duration)[3] || 0}{" "}
</strong>
秒
</div>
<div className={styles["info-item"]}>
累计：
{studyTimeFormat(stats.learn_duration || 0)[0] !== 0 && (
<>
<strong>
{" "}
{studyTimeFormat(stats.learn_duration || 0)[0] || 0}{" "}
</strong>
天
</>
)}
{studyTimeFormat(stats.learn_duration || 0)[1] !== 0 && (
<>
<strong>
{" "}
{studyTimeFormat(stats.learn_duration || 0)[1] || 0}{" "}
</strong>
小时
</>
)}
<strong>
{" "}
{studyTimeFormat(stats.learn_duration || 0)[2] || 0}{" "}
</strong>
分钟
<strong>
{" "}
{studyTimeFormat(stats.learn_duration || 0)[3] || 0}{" "}
</strong>
秒
</div> </div>
</div> </div>
</div> </div>
</div> <div className={styles["tabs"]}>
<div className={styles["tabs"]}> {items.map((item: any) => (
{items.map((item: any) => ( <div
<div key={item.key}
key={item.key} className={
className={ item.key === tabKey
item.key === tabKey ? styles["tab-active-item"]
? styles["tab-active-item"] : styles["tab-item"]
: styles["tab-item"] }
} onClick={() => {
onClick={() => { onChange(item.key);
onChange(item.key); }}
}} >
> <div className={styles["tit"]}>{item.label}</div>
<div className={styles["tit"]}>{item.label}</div> {item.key === tabKey && (
{item.key === tabKey && ( <Image
<Image className={styles["banner"]}
className={styles["banner"]} width={40}
width={40} height={8}
height={8} preview={false}
preview={false} src={iconRoute}
src={iconRoute} style={{ marginTop: -16 }}
style={{ marginTop: -16 }} />
/>
)}
</div>
))}
</div>
{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 && coursesList.length === 0 && (
<Row
style={{
width: 1200,
margin: "0 auto",
paddingTop: 14,
minHeight: 301,
}}
>
<Col span={24}>
<Empty />
</Col>
</Row>
)}
{!loading && coursesList.length > 0 && (
<div className={styles["courses-list"]}>
{coursesList.map((item: any) => (
<div key={item.id}>
{learnCourseRecords[item.id] && (
<CoursesModel
id={item.id}
title={item.title}
thumb={item.thumb}
isRequired={item.is_required}
progress={learnCourseRecords[item.id].progress / 100}
></CoursesModel>
)} )}
{!learnCourseRecords[item.id] &&
learnCourseHourCount[item.id] &&
learnCourseHourCount[item.id] > 0 && (
<CoursesModel
id={item.id}
title={item.title}
thumb={item.thumb}
isRequired={item.is_required}
progress={1}
></CoursesModel>
)}
{!learnCourseRecords[item.id] &&
!learnCourseHourCount[item.id] && (
<CoursesModel
id={item.id}
title={item.title}
thumb={item.thumb}
isRequired={item.is_required}
progress={0}
></CoursesModel>
)}
</div> </div>
))} ))}
</div> </div>
)} {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 && coursesList.length === 0 && (
<Row
style={{
width: 1200,
margin: "0 auto",
paddingTop: 14,
minHeight: 301,
}}
>
<Col span={24}>
<Empty />
</Col>
</Row>
)}
{!loading && coursesList.length > 0 && (
<div className={styles["courses-list"]}>
{coursesList.map((item: any) => (
<div key={item.id}>
{learnCourseRecords[item.id] && (
<CoursesModel
id={item.id}
title={item.title}
thumb={item.thumb}
isRequired={item.is_required}
progress={learnCourseRecords[item.id].progress / 100}
></CoursesModel>
)}
{!learnCourseRecords[item.id] &&
learnCourseHourCount[item.id] &&
learnCourseHourCount[item.id] > 0 && (
<CoursesModel
id={item.id}
title={item.title}
thumb={item.thumb}
isRequired={item.is_required}
progress={1}
></CoursesModel>
)}
{!learnCourseRecords[item.id] &&
!learnCourseHourCount[item.id] && (
<CoursesModel
id={item.id}
title={item.title}
thumb={item.thumb}
isRequired={item.is_required}
progress={0}
></CoursesModel>
)}
</div>
))}
</div>
)}
</div>
<div className={styles["extra"]}>{systemConfig.pcIndexFooterMsg}</div> <div className={styles["extra"]}>{systemConfig.pcIndexFooterMsg}</div>
</> </div>
); );
}; };

1
src/pages/latest-learn/index.module.scss
View File

@@ -1,6 +1,5 @@
.content { .content {
width: 1200px; width: 1200px;
min-height: calc(100vh - 350px);
height: auto; height: auto;
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;

2
src/pages/latest-learn/index.tsx
View File

@@ -26,7 +26,7 @@ const LatestLearnPage = () => {
}; };
return ( return (
<div> <div className="main-body">
<div className={styles["content"]}> <div className={styles["content"]}>
{loading && ( {loading && (
<Row style={{ width: 1200 }}> <Row style={{ width: 1200 }}>