修改样式

src/views/home/index.module.less

@@ -162,7 +162,7 @@
     }
 
     p {
-      text-align: justify;
+      text-align: center;
       font-size: 14px;
       font-weight: 600;
       color: #FFFFFF;
@@ -216,7 +216,7 @@
   background-size: 86px 66px;
   border-radius: 16px;
   padding: 22px 29px 34px 54px;
-  // flex: 1 auto;
+  flex: 1 auto;
 
   .toolTips {
     width: 370px;
@@ -355,6 +355,7 @@
   display: flex;
   margin-left: 20px;
   width: 450px;
+  position: relative;
 }
 
 // 学情
@@ -668,33 +669,35 @@
 .teachListWrap {
   position: relative;
 
-  .teachListWrapWall {
+
+}
+
+.teachListWrapWall {
+  position: absolute;
+  bottom: 0;
+  height: 159px;
+  width: 100%;
+  background: linear-gradient(180deg,
+      rgba(255, 255, 255, 0) 0%,
+      #ffffff 100%);
+  border-radius: 0px 0px 20px 20px;
+
+  span {
     position: absolute;
-    bottom: 0;
-    height: 159px;
+    bottom: 7px;
+    left: 0;
     width: 100%;
-    background: linear-gradient(180deg,
-        rgba(255, 255, 255, 0) 0%,
-        #ffffff 100%);
-    border-radius: 0px 0px 20px 20px;
-
-    span {
-      position: absolute;
-      bottom: 0px;
-      left: 0;
-      width: 100%;
-      text-align: center;
-      color: #1677FF;
-      font-size: 16px;
+    text-align: center;
+    color: #1677FF;
+    font-size: 16px;
 
-      &::after {
-        content: ' ';
-        display: inline-block;
-        width: 12px;
-        height: 12px;
-        background: url('./images/blueArrow.png') no-repeat center;
-        background-size: contain;
-      }
+    &::after {
+      content: ' ';
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background: url('./images/blueArrow.png') no-repeat center;
+      background-size: contain;
     }
   }
 }

src/views/home/index.tsx

@@ -43,6 +43,7 @@ import PlaceholderTone from '@/components/layout/modals/placeholderTone';
 import PreviewWindow from '../preview-window';
 import UpdatePassword from '/src/components/layout/modals/update-password';
 import AttendClass from '../prepare-lessons/model/attend-class';
+import { useResizeObserver } from '@vueuse/core';
 // import { state } from '/src/state';
 export const formatDateToDay = () => {
   const hours = dayjs().hour();
@@ -103,7 +104,8 @@ export default defineComponent({
       popSelectLevelList: [] as any,
       showGuide: false,
       showPreview: false,
-      itemPreview: {} as any
+      itemPreview: {} as any,
+      homeLeftHeight: 'auto'
     });
     const teachList = ref({} as any);
 
@@ -276,6 +278,15 @@ export default defineComponent({
     };
 
     onMounted(async () => {
+      useResizeObserver(
+        document.querySelector('#homeInfoLeft-home') as any,
+        (entries: any) => {
+          const entry = entries[0];
+          const { height } = entry.contentRect;
+          forms.homeLeftHeight = height + 'px';
+        }
+      );
+
       forms.classLoading = true;
       await getLastClassRecode();
 
@@ -310,7 +321,7 @@ export default defineComponent({
 
     return () => (
       <div class={styles.homeWrap}>
-        <div class={styles.homeInfoLeft}>
+        <div class={styles.homeInfoLeft} id="homeInfoLeft-home">
           <div class={styles.homeBanner}>
             <div class={styles.applyInfo} id="home-1">
               <div class={styles.centerInfo} id="home-0"></div>
@@ -402,7 +413,9 @@ export default defineComponent({
             </div>
           </div>
         </div>
-        <div class={styles.homeInfoRight}>
+        <div
+          class={styles.homeInfoRight}
+          style={{ height: forms.homeLeftHeight }}>
           <div class={styles.rightTeachingWrap}>
             <div class={styles.headerContainer}>
               <div
@@ -489,37 +502,35 @@ export default defineComponent({
                       list={teachList.value[key]}
                       keys={key}></TeachGroup>
                   ))}
-                  {forms.total > 4 && (
-                    <div class={styles.teachListWrapWall}>
-                      <span
-                        onClick={() => {
-                          // setTabsCaches('attendclass', 'tabName', {
-                          //   path: '/classDetail'
-                          // });
-                          sessionStorage.setItem(
-                            'classDetailTabs',
-                            'attendclass'
-                          );
-                          router.push({
-                            path: '/classDetail',
-                            query: {
-                              name: forms.classSelect.name,
-                              id: forms.classSelect.currentClass,
-                              gradeYear: forms.classSelect.gradeYear,
-                              upgradeFlag: forms.classSelect.upgradeFlag ? 1 : 0 // 是否为历史班
-                            }
-                          });
-                        }}>
-                        查看全部
-                      </span>
-                    </div>
-                  )}
                 </div>
               )}
 
               {Object.keys(teachList.value).length <= 0 &&
                 !forms.classLoading && <TheEmpty />}
             </NSpin>
+
+            {forms.total > 4 && (
+              <div class={styles.teachListWrapWall}>
+                <span
+                  onClick={() => {
+                    // setTabsCaches('attendclass', 'tabName', {
+                    //   path: '/classDetail'
+                    // });
+                    sessionStorage.setItem('classDetailTabs', 'attendclass');
+                    router.push({
+                      path: '/classDetail',
+                      query: {
+                        name: forms.classSelect.name,
+                        id: forms.classSelect.currentClass,
+                        gradeYear: forms.classSelect.gradeYear,
+                        upgradeFlag: forms.classSelect.upgradeFlag ? 1 : 0 // 是否为历史班
+                      }
+                    });
+                  }}>
+                  查看全部
+                </span>
+              </div>
+            )}
           </div>
         </div>