From c1b0bf28f758d3146ae1012cf9ed2c81cb841b9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com>
Date: Thu, 30 Mar 2023 10:12:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B1=8F=E5=B9=95=E6=9C=80=E5=B0=8F=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.scss                           |  25 +-
 src/pages/course/index.module.scss       |   2 +-
 src/pages/index/index.module.scss        |   3 +-
 src/pages/index/index.tsx                | 360 ++++++++++++-----------
 src/pages/latest-learn/index.module.scss |   1 -
 src/pages/latest-learn/index.tsx         |   2 +-
 6 files changed, 202 insertions(+), 191 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index 5a83a5f..c37285b 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -35,6 +35,24 @@ body {
   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 {
   font-size: 3.2em;
   line-height: 1.1;
@@ -221,13 +239,6 @@ h1 {
   color: $primaryColor;
 }
 
-.container {
-  width: 1200px;
-  min-height: calc(100vh - 260px);
-  height: auto;
-  margin: 0 auto;
-}
-
 .login-box {
   .ant-btn {
     font-size: 18px !important;
diff --git a/src/pages/course/index.module.scss b/src/pages/course/index.module.scss
index 1880b84..1f5c8aa 100644
--- a/src/pages/course/index.module.scss
+++ b/src/pages/course/index.module.scss
@@ -8,7 +8,7 @@
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  padding: 24px;
+  padding: 24px 24px 24px 24px;
   .info {
     width: 720px;
     height: 90px;
diff --git a/src/pages/index/index.module.scss b/src/pages/index/index.module.scss
index 9696e25..c672292 100644
--- a/src/pages/index/index.module.scss
+++ b/src/pages/index/index.module.scss
@@ -2,7 +2,7 @@
   width: 1200px;
   height: auto;
   margin: 0 auto;
-  margin-top: 50px;
+  padding-top: 50px;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -133,7 +133,6 @@
   gap: 24px;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   position: relative;
-  min-height: calc(100vh - 630px);
 }
 
 .extra {
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index c03056e..26d1f4e 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -108,199 +108,201 @@ const IndexPage = () => {
   };
 
   return (
-    <>
-      <div className={styles["top-cont"]}>
-        <div className={styles["top-item"]}>
-          <div className={styles["title"]}>
-            <img className={styles["icon"]} src={myLesoon} />
-            <span>课程进度</span>
-          </div>
-          <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 className="main-body">
+      <div className="content">
+        <div className={styles["top-cont"]}>
+          <div className={styles["top-item"]}>
+            <div className={styles["title"]}>
+              <img className={styles["icon"]} src={myLesoon} />
+              <span>课程进度</span>
             </div>
-            {stats.nun_required_hour_count > 0 && (
+            <div className={styles["info"]}>
               <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>
                   {" "}
-                  {stats.nun_required_finished_course_count || 0}{" "}
+                  {studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "}
                 </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 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 className={styles["tabs"]}>
-        {items.map((item: any) => (
-          <div
-            key={item.key}
-            className={
-              item.key === tabKey
-                ? styles["tab-active-item"]
-                : styles["tab-item"]
-            }
-            onClick={() => {
-              onChange(item.key);
-            }}
-          >
-            <div className={styles["tit"]}>{item.label}</div>
-            {item.key === tabKey && (
-              <Image
-                className={styles["banner"]}
-                width={40}
-                height={8}
-                preview={false}
-                src={iconRoute}
-                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>
+        <div className={styles["tabs"]}>
+          {items.map((item: any) => (
+            <div
+              key={item.key}
+              className={
+                item.key === tabKey
+                  ? styles["tab-active-item"]
+                  : styles["tab-item"]
+              }
+              onClick={() => {
+                onChange(item.key);
+              }}
+            >
+              <div className={styles["tit"]}>{item.label}</div>
+              {item.key === tabKey && (
+                <Image
+                  className={styles["banner"]}
+                  width={40}
+                  height={8}
+                  preview={false}
+                  src={iconRoute}
+                  style={{ marginTop: -16 }}
+                />
               )}
-
-              {!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>
-      )}
+        {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>
   );
 };
 
diff --git a/src/pages/latest-learn/index.module.scss b/src/pages/latest-learn/index.module.scss
index 12f94b7..148003d 100644
--- a/src/pages/latest-learn/index.module.scss
+++ b/src/pages/latest-learn/index.module.scss
@@ -1,6 +1,5 @@
 .content {
   width: 1200px;
-  min-height: calc(100vh - 350px);
   height: auto;
   margin: 0 auto;
   box-sizing: border-box;
diff --git a/src/pages/latest-learn/index.tsx b/src/pages/latest-learn/index.tsx
index 80ed0ec..2e1f501 100644
--- a/src/pages/latest-learn/index.tsx
+++ b/src/pages/latest-learn/index.tsx
@@ -26,7 +26,7 @@ const LatestLearnPage = () => {
   };
 
   return (
-    <div>
+    <div className="main-body">
       <div className={styles["content"]}>
         {loading && (
           <Row style={{ width: 1200 }}>