界面美化

src/app/tab2/tab2.page.scss

@@ -1,6 +1,6 @@
 /* tab2.page.scss */
 .inheritors {
-  background-color: #f87676; /* 设置背景颜色为灰色 */
+  // background-color: #f87676; /* 设置背景颜色为灰色 */
     ion-card {
       margin-bottom: 20px;
       ion-card-header {

src/app/tab3/tab3.page.html

@@ -6,21 +6,21 @@
       <div class="profile-info">
         <div class="avatar">
           <!-- 圆形头像 -->
-          <ion-avatar>
+          <ion-avatar style="width: 80px; height: 80px">
             <img src="/assets/img/man.jpg" alt="Avatar">
           </ion-avatar>
           <!-- 个人资料编辑按钮 -->
-          <ion-button color="light" size="small" (click)="editProfile()">
+          <ion-button color="light" size="small" style="margin-left: 19%;"  (click)="editProfile()">
             编辑
           </ion-button>
         </div>
         <div class="details">
           <!-- 用户名 -->
-          <div>用户名：小王</div>
+          <div>用户名：{{currentUser?.get('username')}}</div>
           <!-- 联系方式 -->
-          <div>联系方式：13767976832</div>
+          <div>联系方式：{{currentUser?.get('mobile')}}</div>
           <!-- 用户ID -->
-          <div>用户ID：0210079</div>
+          <div>用户ID：{{currentUser?.id}}</div>
           <!-- <div class="button-container">
             <ion-button color="primary" size="small" style="width: 120px" (click)="becomeGoldMember()">
               <ion-icon name="trophy"></ion-icon>
@@ -34,7 +34,7 @@
           <!-- 新添加的按钮 -->
           <div class="custom-buttons orange">
             <!-- <div class="left"><span class="title"> 黄金会员</span></div> -->
-            <div class="right"><span class="title">开通数字遗产账户></span></div>
+            <div class="right" (click)="openDigitalEstateAccount()"><span class="title">开通数字遗产账户></span></div>
           </div>
         </div>
       </div>
@@ -45,7 +45,7 @@
   <ion-card style="width: 90%; margin: -30px auto;">
     <img src="/assets/img/huiyuan.png" alt="Card 3">
   </ion-card>
- 
+
 
   <!-- 卡片区域 -->
   <div class="card-grid">
@@ -94,42 +94,82 @@
     </div>
   </div>
 
-  <!-- 卡片二 -->
-  <ion-card style=" margin: 50px auto;">
-    <ion-card-content>
-      <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>
+  <div class="first_box">
+    <div class="item item_top">
+      <div class="item_detail">
+        <div class="item_icon">
+          <ion-icon name="wallet"></ion-icon>
+        </div>
+        <div class="item_title">账号充值</div>
+      </div>
+      <div class="item_go">
+        <ion-icon name="chevron-forward-sharp"></ion-icon>
+      </div>
+    </div>
+
+    <div class="item item_center">
+      <div class="item_detail">
+        <div class="item_icon">
+          <ion-icon name="card"></ion-icon>
+        </div>
+        <div class="item_title">机构合作</div>
+      </div>
+      <div class="item_go">
+        <ion-icon name="chevron-forward-sharp"></ion-icon>
+      </div>
+    </div>
+
+    <div class="item item_buttom">
+      <div class="item_detail">
+        <div class="item_icon">
+          <ion-icon name="card"></ion-icon>
+        </div>
+        <div class="item_title">卡密兑换</div>
+      </div>
+      <div class="item_go">
+        <ion-icon name="chevron-forward-sharp"></ion-icon>
+      </div>
+    </div>
+  </div>
+
+  <div class="first_box">
+    <div class="item item_top">
+      <div class="item_detail">
+        <div class="item_icon">
+          <ion-icon name="wallet"></ion-icon>
+        </div>
+        <div class="item_title">账号充值</div>
+      </div>
+      <div class="item_go">
+        <ion-icon name="chevron-forward-sharp"></ion-icon>
+      </div>
+    </div>
+
+    <div class="item item_center">
+      <div class="item_detail">
+        <div class="item_icon">
+          <ion-icon name="card"></ion-icon>
+        </div>
+        <div class="item_title">机构合作</div>
+      </div>
+      <div class="item_go">
+        <ion-icon name="chevron-forward-sharp"></ion-icon>
+      </div>
+    </div>
+
+    <div class="item item_buttom">
+      <div class="item_detail">
+        <div class="item_icon">
+          <ion-icon name="card"></ion-icon>
+        </div>
+        <div class="item_title">卡密兑换</div>
+      </div>
+      <div class="item_go">
+        <ion-icon name="chevron-forward-sharp"></ion-icon>
+      </div>
+    </div>
+  </div>
+
 
 
-  
 </ion-content>

src/app/tab3/tab3.page.scss

@@ -36,11 +36,12 @@
     .card-grid{
       display: flex !important;
       margin-top: 50px;
+      margin-left: 6px;
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: space-around;
       align-items: center;
-      width: 100vw;
+      width: 96vw;
       font-size: 0.8rem;
       .card{
         display: flex;
@@ -150,4 +151,53 @@
     margin-top: 20px; /* 设置上边距为20像素 */
   }
 
-  
+  
+    .first_box {
+      padding: 0% 4%;
+
+  
+      .item {
+        color: #fff;
+        display: flex;
+        justify-content: space-between;
+        padding: 3% 5%;
+        background-color: #d9b875;
+        // border-radius: 15px 15px 0 0;
+        font-size: 16px;
+  
+        .item_detail {
+          display: flex;
+          width: 100%;
+  
+          .item_icon {
+            margin-top: 0.5%;
+          }
+  
+          .item_title {
+            margin-left: 5%;
+          }
+        }
+  
+        .item_go {
+          margin-top: 0.5%;
+        }
+      }
+  
+      .item_top {
+        border-radius: 15px 15px 0 0;
+        margin-top: 5.2%;
+      }
+  
+      .item_center {
+        border-radius: 0 0 0 0;
+        margin-top: 0.2%;
+      }
+  
+      .item_buttom {
+        border-radius: 0 0 15px 15px;
+        margin-top: 0.2%;
+      }
+  
+      
+    }
+    

src/app/tab3/tab3.page.ts

@@ -1,7 +1,7 @@
 
 import { Router } from '@angular/router';
 import { Component } from '@angular/core';
-
+import * as Parse from "parse"
 
 @Component({
   selector: 'app-tab3',
@@ -12,6 +12,10 @@ export class Tab3Page {
 
   constructor(private router: Router) {}
 
+  ngOnInit() {
+    this.getUser()
+  }
+
   editProfile() {
     this.router.navigate(['/new-page']);
   }
@@ -20,26 +24,13 @@ export class Tab3Page {
     this.router.navigate(['/login']);
   }
 
-  viewInheritance() {
-        // 查看数字遗产信息的逻辑
-      }
-    
-      manageSecurity() {
-        // 管理安全与隐私设置的逻辑
-      }
+  currentUser:any
+  getUser(){
+    this.currentUser = Parse.User.current()
+    console.log(this.currentUser);
     
-      getHelp() {
-        // 获取帮助与支持的逻辑
-      }
-    
-      customizeSettings() {
-        // 定制个性化设置的逻辑
-      }
+  }
 
-      becomeGoldMember() {
-        // 成为黄金会员的逻辑
-      }
-