修改首页样式

src/views/home/index.module.less

@@ -202,7 +202,7 @@
   background: url('./images/tool_bg.png') no-repeat left bottom #fff;
   background-size: 86px 66px;
   border-radius: 16px;
-  padding: 21px 32px 21px 54px;
+  padding: 22px 29px 34px 54px;
 
   .toolTips {
     width: 370px;
@@ -245,28 +245,29 @@
     align-items: center;
 
     img {
-      width: 159px;
-      height: 134px;
-      margin: 5px 13px 10px;
+      width: 190px;
+      height: 190px;
+      // margin: 5px 13px 10px;
     }
 
     .toolItem {
-      width: 185px;
-      background: #EBF5FF;
+      width: 190px;
+      // background: #EBF5FF;
       border-radius: 16px;
-      margin-right: 36px;
+      margin-right: 30px;
       text-align: center;
+      line-height: 0;
 
       &:last-child {
         margin-right: 0;
       }
 
-      .toolMemo {
-        font-size: 16px;
-        color: #4A8FE0;
-        line-height: 22px;
-        text-align: center;
-      }
+      // .toolMemo {
+      //   font-size: 16px;
+      //   color: #4A8FE0;
+      //   line-height: 22px;
+      //   text-align: center;
+      // }
 
       .btn1,
       .btn2,
@@ -282,7 +283,7 @@
         --n-font-size: 18px !important;
         font-weight: 600 !important;
         color: #fff;
-        margin: 16px 0 20px;
+        margin: 8px 0 0;
       }
 
 
@@ -302,28 +303,28 @@
       }
     }
 
-    .item1 {
-      background: url('./images/t1_bg.png')no-repeat right bottom #EBF5FF;
-      background-size: 28px;
-    }
+    // .item1 {
+    //   background: url('./images/t1_bg.png')no-repeat right bottom #EBF5FF;
+    //   background-size: 28px;
+    // }
 
-    .item2 {
-      background: url('./images/t2_bg.png')no-repeat right bottom #FFF1EF;
-      background-size: 28px;
+    // .item2 {
+    //   background: url('./images/t2_bg.png')no-repeat right bottom #FFF1EF;
+    //   background-size: 28px;
 
-      .toolMemo {
-        color: #F86C58;
-      }
-    }
+    //   .toolMemo {
+    //     color: #F86C58;
+    //   }
+    // }
 
-    .item3 {
-      background: url('./images/t3_bg.png')no-repeat right bottom #FFF7E2;
-      background-size: 28px;
+    // .item3 {
+    //   background: url('./images/t3_bg.png')no-repeat right bottom #FFF7E2;
+    //   background-size: 28px;
 
-      .toolMemo {
-        color: #F28D1E;
-      }
-    }
+    //   .toolMemo {
+    //     color: #F28D1E;
+    //   }
+    // }
   }
 }
 
@@ -841,4 +842,4 @@
 
 .showUpdatePassword {
   width: 514px;
-}
+}

src/views/home/index.tsx

@@ -328,32 +328,38 @@ export default defineComponent({
             </div>
             <img src={iconTo} class={styles.iconTo} />
             <div class={styles.toolFunction} id="home-3">
-              <div
-                class={[styles.toolItem, styles.item1]}
-                onClick={() => {
-                  showModalBeat.value = true;
-                }}>
+              <div class={[styles.toolItem, styles.item1]}>
                 <img src={t1} />
-                <p class={styles.toolMemo}>提升效率，练习好节奏</p>
-                <NButton class={styles.btn1}>节拍器</NButton>
+                {/* <p class={styles.toolMemo}>提升效率，练习好节奏</p> */}
+                <NButton
+                  class={styles.btn1}
+                  onClick={() => {
+                    showModalBeat.value = true;
+                  }}>
+                  节拍器
+                </NButton>
               </div>
-              <div
-                class={[styles.toolItem, styles.item2]}
-                onClick={() => {
-                  showModalTone.value = true;
-                }}>
+              <div class={[styles.toolItem, styles.item2]}>
                 <img src={t2} />
-                <p class={styles.toolMemo}>精准调音，一劳永逸</p>
-                <NButton class={styles.btn2}>调音器</NButton>
+                {/* <p class={styles.toolMemo}>精准调音，一劳永逸</p> */}
+                <NButton
+                  class={styles.btn2}
+                  onClick={() => {
+                    showModalTone.value = true;
+                  }}>
+                  调音器
+                </NButton>
               </div>
-              <div
-                class={[styles.toolItem, styles.item3]}
-                onClick={() => {
-                  showModalTime.value = true;
-                }}>
+              <div class={[styles.toolItem, styles.item3]}>
                 <img src={t3} />
-                <p class={styles.toolMemo}>创造时间，集中注意力</p>
-                <NButton class={styles.btn3}>计时器</NButton>
+                {/* <p class={styles.toolMemo}>创造时间，集中注意力</p> */}
+                <NButton
+                  class={styles.btn3}
+                  onClick={() => {
+                    showModalTime.value = true;
+                  }}>
+                  计时器
+                </NButton>
               </div>
             </div>
           </div>