添加页面

src/views/home/index.module.less

@@ -85,6 +85,9 @@
   position: relative;
   display: flex;
   align-items: center;
+  height: 490px;
+  background: url('./images/home/home-bg-1.png') no-repeat right bottom, url('./images/home/home-bg-2.png') no-repeat left top #E6F2FF;
+  background-size: 69px, 68px 61px;
 
   .userName {
     left: 218px;
@@ -127,7 +130,7 @@
 
   .blackborad {
     padding-left: 182px;
-    padding-right: 85px;
+    padding-right: 60px;
 
     .blackBoardBg {
       width: 466px;
@@ -137,35 +140,71 @@
 }
 
 .applyContainer {
-  width: 390px;
-  padding: 24px 0;
+  width: 450px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  // padding: 24px 0;
 
-  .applyTitle {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 42px;
 
-    .className {
-      font-size: 26px;
-      font-family: Alibaba-PuHuiTi-B, Alibaba-PuHuiTi;
-      font-weight: bold;
-      color: #323DC5;
-      line-height: 35px;
+  .applyItem {
+    width: 211px;
+    height: 296px;
 
+    p {
+      text-align: justify;
+      font-size: 14px;
+      font-weight: 600;
+      color: #FFFFFF;
+      line-height: 20px;
+      padding: 175px 22px 0;
+    }
 
-      &::after {
-        content: ' ';
-        margin-left: 8px;
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        background: url('./images/icon-right-arrow.png') no-repeat center;
-        background-size: contain;
-      }
+    .applyBtn {
+      margin: 19px auto 0;
+      width: 158px;
+      height: 40px;
+      background: #FFFFFF;
+      border-radius: 10px;
     }
   }
 
+  .applyItem1 {
+    background: url('./images/home/home-1.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .applyItem2 {
+    background: url('./images/home/home-2.png') no-repeat center;
+    background-size: contain;
+  }
+
+  // .applyTitle {
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: space-between;
+  //   height: 42px;
+
+  //   .className {
+  //     font-size: 26px;
+  //     font-family: Alibaba-PuHuiTi-B, Alibaba-PuHuiTi;
+  //     font-weight: bold;
+  //     color: #323DC5;
+  //     line-height: 35px;
+
+
+  //     &::after {
+  //       content: ' ';
+  //       margin-left: 8px;
+  //       display: inline-block;
+  //       width: 16px;
+  //       height: 16px;
+  //       background: url('./images/icon-right-arrow.png') no-repeat center;
+  //       background-size: contain;
+  //     }
+  //   }
+  // }
+
   .informations {
     line-height: 40px;
     height: 40px;
@@ -871,4 +910,4 @@
 
 .showUpdatePassword {
   width: 514px;
-}
+}

src/views/home/index.tsx

@@ -405,7 +405,6 @@ export default defineComponent({
                 </NButton>
               </div>
             </div> */}
-            {/* <div class={styles.centerInfo}>11111</div> */}
             <div class={styles.applyInfo} id="home-1">
               <div class={styles.centerInfo} id="home-0"></div>
 
@@ -427,7 +426,15 @@ export default defineComponent({
                 <img src={blackBoardBg} class={styles.blackBoardBg} />
               </div>
               <div class={styles.applyContainer}>
-                <div class={styles.applyTitle}>
+                <div class={[styles.applyItem, styles.applyItem1]}>
+                  <p>可根据声部进行备课，更好的规划教学哦～</p>
+                  <div class={styles.applyBtn}></div>
+                </div>
+                <div class={[styles.applyItem, styles.applyItem2]}>
+                  <p>点击这里，选择班级快速进入备课区域</p>
+                  <div class={styles.applyBtn}></div>
+                </div>
+                {/* <div class={styles.applyTitle}>
                   <span
                     class={styles.className}
                     onClick={() => (forms.applyStatus = true)}>
@@ -574,7 +581,7 @@ export default defineComponent({
                       去备课
                     </NButton>
                   </NSpace>
-                </NForm>
+                </NForm> */}
               </div>
             </div>
           </div>