page1优化

src/app/tab1/tab1.page.html

@@ -56,40 +56,7 @@
   
    
    
-<!-- 卡片1 -->
-<!-- <ion-card>
-  <ion-card-header>
-    常用工具
-  </ion-card-header>
-  <ion-card-content style="padding: 2%;">
-    <ion-row>
-      <ion-col size="4">
-        <ion-button expand="block" color="primary" (click)="backupAlbum()" class="vertical-button">
-          <div class="icon-container">
-            <ion-icon name="images" class="large-icon"></ion-icon>
-          </div>
-          <div class="text-container">相册备份</div>
-        </ion-button>
-      </ion-col>
-      <ion-col size="4">
-        <ion-button expand="block" color="primary" (click)="backupContacts()" class="vertical-button">
-          <div class="icon-container">
-            <ion-icon name="people" class="large-icon"></ion-icon>
-          </div>
-          <div class="text-container">通讯录备份</div>
-        </ion-button>
-      </ion-col>
-      <ion-col size="4">
-        <ion-button expand="block" color="primary" (click)="restoreFiles()" class="vertical-button">
-          <div class="icon-container">
-            <ion-icon name="document" class="large-icon"></ion-icon>
-          </div>
-          <div class="text-container">文件恢复</div>
-        </ion-button>
-      </ion-col>
-    </ion-row>
-  </ion-card-content>
-</ion-card> -->
+
 <div class="tool_title" >
   常用工具
 </div>
@@ -122,93 +89,39 @@
   </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> -->
+<!-- 卡片三 -->
+<ion-card style="width: 95%; margin: 5px auto;">
+  <img src="/assets/img/huiyuan.png" alt="Card 3">
+</ion-card>
 
-<!-- 卡片2 -->
-<!-- <ion-card>
-  <ion-card-header>
-    热门工具
-  </ion-card-header>
+<div class="tool_title">
+ 服务订阅
+</div>
+
+<ion-card style="width: 95%; margin: 5px auto;">
   <ion-card-content>
-    <ion-row>
-      <ion-col size="4">
-        <ion-button expand="block" color="secondary" (click)="cleanFiles()" class="vertical-button">
-          <div class="icon-container">
-            <ion-icon name="trash" class="large-icon"></ion-icon>
-          </div>
-          <div class="text-container">文件清理</div>
-        </ion-button>
-      </ion-col>
-      <ion-col size="4">
-        <ion-button expand="block" color="secondary" (click)="scanDocuments()" class="vertical-button">
-          <div class="icon-container">
-            <ion-icon name="scan" class="large-icon"></ion-icon>
+    <ion-grid>
+      <ion-row>
+        <!-- 左侧部分 -->
+        <ion-col size="6">
+          <img src="/assets/img/p4.jpg" style="width: 100%;" alt="Left Image">
+          <div class="subscription-text">
+            <p style="font-size: initial; margin-top: -25%;">一篇论文了解数字生命<br>媒介连接逝者<br>逝者犹可追</p>
+            <ion-button color="medium" expand="block">点击立即订阅</ion-button> 
           </div>
-          <div class="text-container">文档扫码</div>
-        </ion-button>
-      </ion-col>
-      <ion-col size="4">
-        <ion-button expand="block" color="secondary" (click)="recognizeText()" class="vertical-button">
-          <div class="icon-container">
-            <ion-icon name="text" class="large-icon"></ion-icon>
+        </ion-col>
+        <!-- 右侧部分 -->
+        <ion-col size="6">
+          <img src="/assets/img/p5.jpg" style="width: 100%;" alt="Right Image">
+          <div class="subscription-text">
+            <p style="font-size: initial; margin-top: -25%;">中国特色的社会哀悼<br>陌生人的持续性联结<br>对抗遗忘</p>
+            <ion-button color="secondary" expand="block">点击立即订阅</ion-button> 
           </div>
-          <div class="text-container">文字识别</div>
-        </ion-button>
-      </ion-col>
-    </ion-row>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
   </ion-card-content>
-</ion-card> -->
-
-  <!-- 新增卡片 -->
-  <!-- <ion-card>
-    <ion-card-header>
-      图片展示
-    </ion-card-header>
-    <ion-card-content>
-      <ion-grid>
-        <ion-row>
-          <ion-col size="6">
-            <img src="assets/img/p1.png" style="width: 100%;"/>
-          </ion-col>
-          <ion-col size="6">
-            <ion-row>
-              <ion-col size="12">
-                <img src="assets/img/p2.png" style="width: 100%;"/>
-              </ion-col>
-              <ion-col size="12">
-                <img src="assets/img/p3.png" style="width: 100%;"/>
-              </ion-col>
-            </ion-row>
-          </ion-col>
-        </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

@@ -179,4 +179,36 @@ ion-grid{
 			border-radius: 10px;
 		}
 	}
-}
+}
+.subscription-text {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+  }
+  
+  .subscription-text p {
+	margin-bottom: 10px;
+  }
+
+  .subscription-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  margin-bottom: 50px;
+  height: 50%;
+}
+
+.subscription-text p {
+  margin-bottom: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+ion-fab-button {
+	--background: #ba9327!important; /* 设置按钮背景色为橙红色 */
+	--color: rgb(14, 13, 13) !important; /* 设置按钮文字颜色为白色 */
+  }