界面美化

src/app/login/login.page.html

@@ -47,5 +47,5 @@
         </div>
       
     </section>
-    
+</body>  
  

src/app/login/login.page.scss

@@ -2,6 +2,7 @@
     margin: 0;
     padding: 0;
 }
+
  
 section {
     min-height: 100vh;

src/app/tab1/tab1.page.html

@@ -57,11 +57,11 @@
    
    
 <!-- 卡片1 -->
-<ion-card>
+<!-- <ion-card>
   <ion-card-header>
     常用工具
   </ion-card-header>
-  <ion-card-content>
+  <ion-card-content style="padding: 2%;">
     <ion-row>
       <ion-col size="4">
         <ion-button expand="block" color="primary" (click)="backupAlbum()" class="vertical-button">
@@ -89,10 +89,68 @@
       </ion-col>
     </ion-row>
   </ion-card-content>
-</ion-card>
+</ion-card> -->
+<div class="tool_title" >
+  常用工具
+</div>
+<ion-grid>
+  <ion-row>
+    <ion-col size="6" size-md="4" size-lg="2">
+      <ion-icon name="images" class="large-icon"></ion-icon>
+      <div class="item_text">相册备份</div>
+    </ion-col>
+    <ion-col size="6" size-md="4" size-lg="2">
+      <ion-icon name="people" class="large-icon"></ion-icon>
+      <div class="item_text">通讯录备份</div>
+    </ion-col>
+    <ion-col size="6" size-md="4" size-lg="2">
+      <ion-icon name="document" class="large-icon"></ion-icon>
+      <div class="item_text">文件恢复</div>
+    </ion-col>
+    <ion-col size="6" size-md="4" size-lg="2">
+      <ion-icon name="trash" class="large-icon"></ion-icon>
+      <div class="item_text">文件清理</div>
+    </ion-col>
+    <ion-col size="6" size-md="4" size-lg="2">
+      <ion-icon name="scan" class="large-icon"></ion-icon>
+      <div class="item_text">文档扫码</div>
+    </ion-col>
+    <ion-col size="6" size-md="4" size-lg="2">
+      <ion-icon name="text" class="large-icon"></ion-icon>
+      <div class="item_text">文字识别</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<!-- <div class="tool" style="color: #333;">
+  <div class="item">
+    <ion-icon name="images" class="large-icon"></ion-icon>
+    <div class="item_text">相册备份</div>
+  </div>
+  <div class="item">
+    <ion-icon name="people" class="large-icon"></ion-icon>
+    <div class="item_text">通讯录备份</div>
+  </div>
+  <div class="item">
+    <ion-icon name="document" class="large-icon"></ion-icon>
+    <div class="item_text">文件恢复</div>
+  </div>
+  <div class="item">
+    <ion-icon name="trash" class="large-icon"></ion-icon>
+    <div class="item_text">文件清理</div>
+  </div>
+  <div class="item">
+    <ion-icon name="scan" class="large-icon"></ion-icon>
+    <div class="item_text">文档扫码</div>
+  </div>
+  <div class="item">
+    <ion-icon name="text" class="large-icon"></ion-icon>
+    <div class="item_text">文字识别</div>
+  </div>
+</div> -->
 
 <!-- 卡片2 -->
-<ion-card>
+<!-- <ion-card>
   <ion-card-header>
     热门工具
   </ion-card-header>
@@ -124,10 +182,10 @@
       </ion-col>
     </ion-row>
   </ion-card-content>
-</ion-card>
+</ion-card> -->
 
   <!-- 新增卡片 -->
-  <ion-card>
+  <!-- <ion-card>
     <ion-card-header>
       图片展示
     </ion-card-header>
@@ -150,7 +208,7 @@
         </ion-row>
       </ion-grid>
     </ion-card-content>
-  </ion-card>
+  </ion-card> -->
 
   <!-- 右下角上传按钮 -->
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">

src/app/tab1/tab1.page.scss

@@ -22,6 +22,13 @@
   }
 }
 
+ion-content::part(background){
+    background: #fdf9e6;
+}
+ion-content::part(scroll){
+    color: #fff;
+}
+
 
 // 轮播图部分
 * {
@@ -153,4 +160,23 @@ ul {
 
 .text-container {
   font-size: 14px; /* 调整文字大小 */
+}
+
+.tool_title{
+	color: #333;
+	font-size: 1.5rem;
+	font-weight: 800;
+	padding: 0 0 0 5%;
+}
+ion-grid{
+	color: #333;
+	padding: 3%;
+	ion-row{
+		ion-col{
+			text-align: center;
+			padding: 3%;
+			border: 1px #333 solid;
+			border-radius: 10px;
+		}
+	}
 }