界面美化

src/app/css/57.css

@@ -0,0 +1,161 @@
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+  }
+  body{
+    /* 100%窗口高度 */
+    height: 100vh;
+    /* 弹性布局 居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 渐变背景 */
+    background: linear-gradient(200deg,#e3c5eb,#a9c1ed);
+    /* 溢出隐藏 */
+    overflow: hidden;
+  }
+  .container{
+    /* 相对定位 */
+    position: relative;
+    z-index: 1;
+    background-color: #fff;
+    border-radius: 15px;
+    /* 弹性布局 垂直排列 */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 350px;
+    height: 500px;
+    /* 阴影 */
+    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+  }
+  .container .tit{
+    font-size: 26px;
+    margin: 65px auto 70px auto;
+  }
+  .container input{
+    width: 280px;
+    height: 30px;
+    text-indent: 8px;
+    border: none;
+    border-bottom: 1px solid #ddd;
+    outline: none;
+    margin: 12px auto;
+  }
+  .container button{
+    width: 280px;
+    height: 40px;
+    margin: 35px auto 40px auto;
+    border: none;
+    background: linear-gradient(-200deg,#fac0e7,#aac2ee);
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 8px;
+    border-radius: 10px;
+    cursor: pointer;
+    /* 动画过渡 */
+    transition: 0.5s;
+  }
+  .container button:hover{
+    background: linear-gradient(-200deg,#aac2ee,#fac0e7);
+    background-position-x: -280px;
+  }
+  .container span{
+    font-size: 14px;
+  }
+  .container a{
+    color: plum;
+    text-decoration: none;
+  }
+  ul li{
+    position: absolute;
+    border: 1px solid #fff;
+    background-color: #fff;
+    width: 30px;
+    height: 30px;
+    list-style: none;
+    opacity: 0;
+  }
+  .square li{
+    top: 40vh;
+    left: 60vw;
+    /* 执行动画：动画名 时长 线性的 无限次播放 */
+    animation: square 10s linear infinite;
+  }
+  .square li:nth-child(2){
+    top: 80vh;
+    left: 10vw;
+    /* 设置动画延迟时间 */
+    animation-delay: 2s;
+  }
+  .square li:nth-child(3){
+    top: 80vh;
+    left: 85vw;
+    /* 设置动画延迟时间 */
+    animation-delay: 4s;
+  }
+  .square li:nth-child(4){
+    top: 10vh;
+    left: 70vw;
+    /* 设置动画延迟时间 */
+    animation-delay: 6s;
+  }
+  .square li:nth-child(5){
+    top: 10vh;
+    left: 10vw;
+    /* 设置动画延迟时间 */
+    animation-delay: 8s;
+  }
+  .circle li{
+    bottom: 0;
+    left: 15vw;
+    /* 执行动画 */
+    animation: circle 10s linear infinite;
+  }
+  .circle li:nth-child(2){
+    left: 35vw;
+    /* 设置动画延迟时间 */
+    animation-delay: 2s;
+  }
+  .circle li:nth-child(3){
+    left: 55vw;
+    /* 设置动画延迟时间 */
+    animation-delay: 6s;
+  }
+  .circle li:nth-child(4){
+    left: 75vw;
+    /* 设置动画延迟时间 */
+    animation-delay: 4s;
+  }
+  .circle li:nth-child(5){
+    left: 90vw;
+    /* 设置动画延迟时间 */
+    animation-delay: 8s;
+  }
+  
+  /* 定义动画 */
+  @keyframes square {
+    0%{
+        transform: scale(0) rotateY(0deg);
+        opacity: 1;
+    }
+    100%{
+        transform: scale(5) rotateY(1000deg);
+        opacity: 0;
+    }
+  }
+  @keyframes circle {
+    0%{
+        transform: scale(0) rotateY(0deg);
+        opacity: 1;
+        bottom: 0;
+        border-radius: 0;
+    }
+    100%{
+        transform: scale(5) rotateY(1000deg);
+        opacity: 0;
+        bottom: 90vh;
+        border-radius: 50%;
+    }
+  }

src/app/tab1/tab1.page.html

@@ -56,45 +56,99 @@
   
    
    
-  <!-- 卡片1 -->
-  <ion-card>
-    <ion-card-header>
-      常用工具
-    </ion-card-header>
-    <ion-card-content>
-      <ion-button expand="block" color="primary" (click)="backupAlbum()">
-        <ion-icon name="images"></ion-icon>
-        相册备份
-      </ion-button>
-      <ion-button expand="block" color="primary" (click)="backupContacts()">
-        <ion-icon name="people"></ion-icon>
-        通讯录备份
-      </ion-button>
-      <ion-button expand="block" color="primary" (click)="restoreFiles()">
-        <ion-icon name="document"></ion-icon>
-        文件恢复
-      </ion-button>
-    </ion-card-content>
-  </ion-card>
+<!-- 卡片1 -->
+<ion-card>
+  <ion-card-header>
+    常用工具
+  </ion-card-header>
+  <ion-card-content>
+    <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>
+
+<!-- 卡片2 -->
+<ion-card>
+  <ion-card-header>
+    热门工具
+  </ion-card-header>
+  <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>
+          </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>
+          </div>
+          <div class="text-container">文字识别</div>
+        </ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-card-content>
+</ion-card>
 
-  <!-- 卡片2 -->
+  <!-- 新增卡片 -->
   <ion-card>
     <ion-card-header>
-      热门工具
+      图片展示
     </ion-card-header>
     <ion-card-content>
-      <ion-button expand="block" color="secondary" (click)="cleanFiles()">
-        <ion-icon name="trash"></ion-icon>
-        文件清理
-      </ion-button>
-      <ion-button expand="block" color="secondary" (click)="scanDocuments()">
-        <ion-icon name="scan"></ion-icon>
-        文档扫码
-      </ion-button>
-      <ion-button expand="block" color="secondary" (click)="recognizeText()">
-        <ion-icon name="text"></ion-icon>
-        文字识别
-      </ion-button>
+      <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>
 

src/app/tab1/tab1.page.scss

@@ -135,3 +135,22 @@ ul {
 	height: 400px;
 	float: left;
 }
+.vertical-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.large-icon {
+  font-size: 24px; /* 调整图标大小 */
+}
+
+.icon-container {
+  margin-bottom: 5px; /* 调整图标和文字之间的间距 */
+}
+
+.text-container {
+  font-size: 14px; /* 调整文字大小 */
+}

src/app/tab2/tab2.page.html

@@ -1,12 +1,28 @@
-<!-- tab2.page.html -->
+<!-- 
 <ion-header>
   <ion-toolbar>
     <ion-title>遗产继承人</ion-title>
+    <ion-buttons slot="end">
+
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
 <ion-content class="inheritors">
-  <!-- 卡片1 -->
+  <div style="margin-top: 15px;">
+    <ion-toolbar>
+      <ion-searchbar slot="start"></ion-searchbar>
+      <ion-buttons slot="end">
+        <ion-button (click)="openMessages()">
+          <ion-icon name="mail"></ion-icon>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </div>
+
+
+<ion-content class="inheritors">
+
   <ion-card>
     <ion-card-header>
       <ion-card-subtitle>继承人姓名</ion-card-subtitle>
@@ -26,7 +42,6 @@
     </ion-card-content>
   </ion-card>
 
-  <!-- 卡片2 -->
   <ion-card>
     <ion-card-header>
       <ion-card-subtitle>继承人姓名</ion-card-subtitle>
@@ -46,7 +61,7 @@
     </ion-card-content>
   </ion-card>
 
-  <!-- 卡片3 -->
+
   <ion-card>
     <ion-card-header>
       <ion-card-subtitle>继承人姓名</ion-card-subtitle>
@@ -66,6 +81,46 @@
     </ion-card-content>
   </ion-card>
 
+
+  <ion-button expand="block" color="primary">添加新继承人</ion-button>
+</ion-content> -->
+<ion-header>
+  <ion-toolbar>
+    <ion-title>遗产继承人</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="inheritors">
+  <div style="margin-top: 15px;">
+  <ion-toolbar >
+    <ion-searchbar [(ngModel)]="searchText" placeholder="搜索联系人"></ion-searchbar>
+    <ion-buttons slot="end">
+      <ion-button (click)="openMessages()">
+        <ion-icon name="mail"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+  </div>
+
+  <ion-card *ngFor="let contact of filterContacts()">
+    <ion-card-header>
+      <ion-card-subtitle>继承人姓名</ion-card-subtitle>
+      <ion-card-title>{{ contact.name }}</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item>
+          <ion-label>继承人电话</ion-label>
+          <ion-text color="dark">{{ contact.phone }}</ion-text>
+        </ion-item>
+        <ion-item>
+          <ion-label>继承人邮箱</ion-label>
+          <ion-text color="dark">{{ contact.email }}</ion-text>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+
   <!-- 添加新继承人按钮 -->
   <ion-button expand="block" color="primary">添加新继承人</ion-button>
 </ion-content>

src/app/tab2/tab2.page.scss

@@ -1,5 +1,6 @@
 /* tab2.page.scss */
 .inheritors {
+  background-color: #f87676; /* 设置背景颜色为灰色 */
     ion-card {
       margin-bottom: 20px;
       ion-card-header {
@@ -11,4 +12,11 @@
         }
       }
     }
+  }
+  ion-toolbar.search-toolbar {
+    margin-top: 15px;
+  }
+  
+  ion-toolbar.search-toolbar ion-searchbar {
+    margin-top: 20px;
   }

src/app/tab2/tab2.page.spec.ts

@@ -5,6 +5,7 @@ import { ExploreContainerComponentModule } from '../explore-container/explore-co
 
 import { Tab2Page } from './tab2.page';
 
+
 describe('Tab2Page', () => {
   let component: Tab2Page;
   let fixture: ComponentFixture<Tab2Page>;

src/app/tab2/tab2.page.ts

@@ -7,6 +7,23 @@ import { Component } from '@angular/core';
 })
 export class Tab2Page {
 
+  contacts = [
+    { name: '小江', phone: '13767975832', email: '1969965415' },
+    { name: '小明', phone: '123456789', email: 'xiaoming@example.com' },
+    { name: '小红', phone: '987654321', email: 'xiaohong@example.com' }
+    // 其他联系人数据
+  ];
+  searchText: string = '';
+
   constructor() {}
 
+  filterContacts() {
+    return this.contacts.filter(contact => contact.name.toLowerCase().includes(this.searchText.toLowerCase()));
+  }
+
+  
+  openMessages() {
+    // 在这里编写打开消息页面的逻辑
+    console.log('打开消息页面');
+  }
 }

src/app/tab3/tab3.page.html

@@ -21,8 +21,7 @@
           <div>联系方式：13767976832</div>
           <!-- 用户ID -->
           <div>用户ID：0210079</div>
-          <!-- 新添加的按钮 -->
-          <div class="button-container">
+          <!-- <div class="button-container">
             <ion-button color="primary" size="small" style="width: 120px" (click)="becomeGoldMember()">
               <ion-icon name="trophy"></ion-icon>
               黄金会员>
@@ -30,6 +29,12 @@
             <ion-button color="primary" size="small" style="width: 150px" (click)="openDigitalEstateAccount()">
               开通数字遗产账户>
             </ion-button>
+          </div> -->
+
+          <!-- 新添加的按钮 -->
+          <div class="custom-buttons orange">
+            <!-- <div class="left"><span class="title"> 黄金会员</span></div> -->
+            <div class="right"><span class="title">开通数字遗产账户></span></div>
           </div>
         </div>
       </div>

src/app/tab3/tab3.page.scss

@@ -2,6 +2,35 @@
 
 
 .profile {
+  .custom-buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+    padding: 5px;
+    // background-color: #ffc107;
+    border-radius: 5px;
+    display: flex;
+    justify-content: space-between; // 让左右两个元素分开
+    align-items: center;
+    
+    .right {
+      width: 150px; // 设置宽度为150px
+      // 或者可以尝试设置高度
+       height: 20px; // 设置高度为30px
+    }
+
+    .title {
+      font-weight: bold;
+    }
+    &.orange {
+      background: linear-gradient(57deg, #D47B63 0%, #E3A83E 100%);
+      width: 160px;
+      ion-icon {
+        color: #D47B63;
+       
+      }
+    }
+  }
 
   
     .card-grid{
@@ -119,4 +148,6 @@
     width: 90%; /* 设置卡片宽度为页面宽度的80% */
     margin: 0 auto; /* 水平居中显示 */
     margin-top: 20px; /* 设置上边距为20像素 */
-  }
+  }
+
+