Quellcode durchsuchen

个人界面修改

LiuSiQi vor 4 Monaten
Ursprung
Commit
ce49daa9a2
4 geänderte Dateien mit 60 neuen und 24 gelöschten Zeilen
  1. 47 24
      src/app/tab3/tab3.page.html
  2. 5 0
      src/app/tab3/tab3.page.scss
  3. 8 0
      src/app/tab3/tab3.page.ts
  4. BIN
      src/assets/img/huiyuan.png

+ 47 - 24
src/app/tab3/tab3.page.html

@@ -1,10 +1,4 @@
 <!-- tab3.page.html -->
-<ion-header>
-  <ion-toolbar>
-    <ion-title>首页</ion-title>
-  </ion-toolbar>
-</ion-header>
-
 <ion-content class="profile">
   <!-- 卡片一 -->
   <ion-card>
@@ -27,30 +21,59 @@
           <div>联系方式:13767976832</div>
           <!-- 用户ID -->
           <div>用户ID:0210079</div>
+          <!-- 新添加的按钮 -->
+          <div class="button-container">
+            <ion-button color="primary" size="small" style="width: 120px" (click)="becomeGoldMember()">
+              <ion-icon name="trophy"></ion-icon>
+              黄金会员>
+            </ion-button>
+            <ion-button color="primary" size="small" style="width: 150px" (click)="openDigitalEstateAccount()">
+              开通数字遗产账户>
+            </ion-button>
+          </div>
         </div>
       </div>
     </ion-card-content>
   </ion-card>
 
+  <!-- 卡片三 -->
+  <ion-card style="width: 90%; margin: -30px auto;">
+    <img src="/assets/img/huiyuan.png" alt="Card 3">
+  </ion-card>
+ 
   <!-- 卡片二 -->
-  <ion-card>
+  <ion-card style=" margin: 50px auto;">
     <ion-card-content>
-      <ion-button expand="block" color="primary" (click)="viewInheritance()">
-        <ion-icon name="cash"></ion-icon>
-        数字遗产信息
-      </ion-button>
-      <ion-button expand="block" color="primary" (click)="manageSecurity()">
-        <ion-icon name="lock-closed"></ion-icon>
-        安全与隐私设置
-      </ion-button>
-      <ion-button expand="block" color="primary" (click)="getHelp()">
-        <ion-icon name="help"></ion-icon>
-        帮助与支持
-      </ion-button>
-      <ion-button expand="block" color="primary" (click)="customizeSettings()">
-        <ion-icon name="settings"></ion-icon>
-        个性化设置
-      </ion-button>
+      <ion-grid>
+        <ion-row>
+          <ion-col size="6">
+            <ion-button expand="block" color="primary" size="large" (click)="viewInheritance()">
+              <ion-icon name="cash"></ion-icon>
+              数字遗产信息
+            </ion-button>
+          </ion-col>
+          <ion-col size="6">
+            <ion-button expand="block" color="primary" size="large" (click)="manageSecurity()">
+              <ion-icon name="lock-closed"></ion-icon>
+              安全与隐私设置
+            </ion-button>
+          </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col size="6">
+            <ion-button expand="block" color="primary" size="large" (click)="getHelp()">
+              <ion-icon name="help"></ion-icon>
+              帮助与支持
+            </ion-button>
+          </ion-col>
+          <ion-col size="6">
+            <ion-button expand="block" color="primary" size="large" (click)="customizeSettings()">
+              <ion-icon name="settings"></ion-icon>
+              个性化设置
+            </ion-button>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
     </ion-card-content>
   </ion-card>
-</ion-content>
+</ion-content>

+ 5 - 0
src/app/tab3/tab3.page.scss

@@ -15,4 +15,9 @@
         }
       }
     }
+  }
+  .small-card {
+    width: 90%; /* 设置卡片宽度为页面宽度的80% */
+    margin: 0 auto; /* 水平居中显示 */
+    margin-top: 20px; /* 设置上边距为20像素 */
   }

+ 8 - 0
src/app/tab3/tab3.page.ts

@@ -61,5 +61,13 @@ export class Tab3Page {
         // 定制个性化设置的逻辑
       }
 
+      becomeGoldMember() {
+        // 成为黄金会员的逻辑
+      }
+    
+      openDigitalEstateAccount() {
+        // 开通数字遗产账户的逻辑
+      }
+
   
 }

BIN
src/assets/img/huiyuan.png