样式优化

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,6 +21,7 @@ export const CoursesModel: React.FC<PropInterface> = ({
 }) => {
   const navigate = useNavigate();
   return (
+    <>
       <div
         className={styles["item"]}
         onClick={() => {
@@ -82,5 +83,7 @@ export const CoursesModel: React.FC<PropInterface> = ({
           </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;
+    display: flex;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    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;
+  }
+}