样式优化

src/components/bar-footer/index.module.scss

@@ -3,8 +3,14 @@
   bottom: 0;
   left: 0;
   right: 0;
-  height: 55px;
+  min-height: 55px;
   box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.04);
   background: #ffffff;
   z-index: 100;
+  box-sizing: border-box;
+}
+@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
+  .footer {
+    padding-bottom: 34px !important;
+  }
 }

src/main.scss

@@ -137,3 +137,17 @@ code {
 .adm-tab-bar-item-icon {
   height: 28px !important;
 }
+
+.sp-line {
+  width: 200%;
+  height: 1px;
+  height: 1px;
+  background: rgba(0, 0, 0, 0.05);
+  transform: scale(0.5);
+  -ms-transform: scale(0.5);
+  -o-transform: scale(0.5);
+  -webkit-transform: scale(0.5);
+  -moz-transform: scale(0.5);
+  transform-origin: top left;
+  margin-top: 30px;
+}

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

@@ -21,29 +21,45 @@ export const CoursesModel: React.FC<PropInterface> = ({
 }) => {
   const navigate = useNavigate();
   return (
-    <div
-      className={styles["item"]}
-      onClick={() => {
-        navigate(`/course/${id}`);
-      }}
-    >
-      <Image
-        width={100}
-        height={75}
-        style={{ borderRadius: 8, marginRight: 15 }}
-        src={thumb}
-      />
-      <div className={styles["info"]}>
-        <div className={styles["title"]}>{title}</div>
-        <div className={styles["status-content"]}>
-          {isRequired === 1 && <div className={styles["type"]}>必修课</div>}
-          {isRequired === 0 && (
-            <div className={styles["active-type"]}>选修课</div>
-          )}
-          {progress == 0 && (
-            <>
+    <>
+      <div
+        className={styles["item"]}
+        onClick={() => {
+          navigate(`/course/${id}`);
+        }}
+      >
+        <Image
+          width={100}
+          height={75}
+          style={{ borderRadius: 8, marginRight: 15 }}
+          src={thumb}
+        />
+        <div className={styles["info"]}>
+          <div className={styles["title"]}>{title}</div>
+          <div className={styles["status-content"]}>
+            {isRequired === 1 && <div className={styles["type"]}>必修课</div>}
+            {isRequired === 0 && (
+              <div className={styles["active-type"]}>选修课</div>
+            )}
+            {progress == 0 && (
+              <>
+                <ProgressBar
+                  percent={0}
+                  style={{
+                    flex: 1,
+                    "--fill-color": "#FF4D4F",
+                    "--track-color": "#F6F6F6",
+                    "--track-width": "8px",
+                    "--text-width": "27px",
+                  }}
+                />
+                <span className={styles["no-pro"]}>未学习</span>
+              </>
+            )}
+            {progress > 0 && progress < 100 && (
               <ProgressBar
-                percent={0}
+                percent={progress}
+                text
                 style={{
                   flex: 1,
                   "--fill-color": "#FF4D4F",
@@ -52,35 +68,22 @@ export const CoursesModel: React.FC<PropInterface> = ({
                   "--text-width": "27px",
                 }}
               />
-              <span className={styles["no-pro"]}>未学习</span>
-            </>
-          )}
-          {progress > 0 && progress < 100 && (
-            <ProgressBar
-              percent={progress}
-              text
-              style={{
-                flex: 1,
-                "--fill-color": "#FF4D4F",
-                "--track-color": "#F6F6F6",
-                "--track-width": "8px",
-                "--text-width": "27px",
-              }}
-            />
-          )}
-          {progress >= 100 && (
-            <div className={styles["success"]}>
-              <Image
-                width={20}
-                height={20}
-                src={mediaIcon}
-                style={{ marginRight: 5 }}
-              />
-              <span>恭喜你学完此课程!</span>
-            </div>
-          )}
+            )}
+            {progress >= 100 && (
+              <div className={styles["success"]}>
+                <Image
+                  width={20}
+                  height={20}
+                  src={mediaIcon}
+                  style={{ marginRight: 5 }}
+                />
+                <span>恭喜你学完此课程!</span>
+              </div>
+            )}
+          </div>
         </div>
       </div>
-    </div>
+      <div className="sp-line"></div>
+    </>
   );
 };

src/pages/index/index.module.scss

@@ -121,13 +121,20 @@
   overflow-y: auto;
   .item {
     width: 100%;
+    float: left;
     height: auto;
     box-sizing: border-box;
     padding-top: 30px;
-    padding-bottom: 30px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    display: flex;
+    flex-direction: column;
     &:first-child {
       padding-top: 20px;
     }
   }
 }
+
+@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
+  .list-box {
+    padding-bottom: 89px !important;
+  }
+}

src/pages/member/index.module.scss

@@ -22,7 +22,7 @@
     float: left;
     height: auto;
     box-sizing: border-box;
-    padding: 20px 20px;
+    padding: 20px 20px 75px 20px;
     .top-content {
       width: 100%;
       display: flex;
@@ -189,3 +189,9 @@
     margin-top: 10px;
   }
 }
+
+@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
+  .content-box {
+    padding-bottom: 109px !important;
+  }
+}

src/pages/study/index.module.scss

@@ -13,7 +13,7 @@
   float: left;
   height: auto;
   box-sizing: border-box;
-  padding: 0px 20px;
+  padding: 0px 20px 55px 20px;
   text-align: left;
   overflow-x: hidden;
   overflow-y: auto;
@@ -93,3 +93,9 @@
     }
   }
 }
+
+@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
+  .list-box {
+    padding-bottom: 89px !important;
+  }
+}