wisdom-app/src/app/component/edit-tag/edit-tag.component.html

@@ -1,5 +1,5 @@
 
-<ion-input [value]="userInput" (ionInput)="onInput($event)" type="text" placeholder="请输入标签名称"></ion-input>
+<ion-input [value]="userInput" (ionInput)="onInput($event)" type="text" placeholder="请输入标签名称(点击生成的标签即可删除)"></ion-input>
 <!-- <p>当前输入: {{userInput}}</p>  -->
 <ion-button (click)="addTag()" expand="block" color="success">添加标签</ion-button>
 <div>

wisdom-app/src/app/tab4/tab4.page.html

@@ -10,10 +10,11 @@
     <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
   <!-- 用户登录状态 -->
-  <ion-card>
+  
     <!-- 未登录 -->
      @if(!currentUser?.id){
-        <ion-content>
+      <ion-card >
+        <ion-content class="login">
           <ion-card class="login-card">
               <ion-card-header>
                   <ion-card-title>请登录</ion-card-title>
@@ -25,56 +26,128 @@
             </div>
           </ion-card>
       </ion-content>
-      }
-        <!-- 已登录 -->
-     @if(currentUser?.id){
-      <ion-card-header class="card-header">
-        <img [src]="currentUser?.get('avatar')" onerror="this.src='https://app.fmode.cn/dev/jxnu/202226701019/头像示例.png';" alt="图片加载失败" class="avatar" />
-        <div class="user-info">
-            <ion-card-title>账号：{{currentUser?.get("username")}}</ion-card-title>
-            <ion-card-subtitle>
-                姓名: {{currentUser?.get("realname") || "-"}} 
-                性别: {{currentUser?.get("gender") || "-"}} 
-                年龄: {{currentUser?.get("age") || "-"}}
-            </ion-card-subtitle>
-        </div>
-    </ion-card-header>
-      }
       <ion-card-content>
-      @if(!currentUser?.id){
         <ion-button expand="block" (click)="signup()" color="success">注册</ion-button>
         <ion-button expand="block" (click)="login()" color="success">登录</ion-button>
-      }
-     @if(currentUser?.id){
-      <ion-button expand="block" (click)="editUser()" color="success">编辑资料</ion-button>
-      <ion-button expand="block" (click)="logout()" color="medium">登出</ion-button>
-    }
-    </ion-card-content>
-  </ion-card>
-  @if(currentUser?.id){
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>个性头像生成器</ion-card-title>
-        <ion-card-subtitle>点击创建个性化头像</ion-card-subtitle>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-button expand="block" (click)="goToAvatar()" color="success">前往生成</ion-button>
       </ion-card-content>
-    </ion-card>
+  </ion-card>
   }
+        <!-- 已登录 -->
   @if(currentUser?.id){
-  <ion-card class="memo-card">
-    <h2 class="memo-title">健康备忘录</h2>
-    <p class="memo-description">写下您问诊的医生名或者心动的科普知识，便于您下次查找（点击标签可删除）</p>
-    <app-edit-tag (onTagChange)="setTagsValue($event)"></app-edit-tag>
+    @if(pageNum==0){
+        <div class="container">
+          <div class="top-section">
+            <ion-button expand="block" fill="outline" (click)="changeNum1()" color="dark">简约朴素-模块型</ion-button>
+            <ion-label class="zi1">点击进入此主题页面</ion-label>
+          </div>
+          <div class="bottom-section">
+            <ion-button expand="block" fill="outline" (click)="changeNum2()" color="light">优雅精致-层次型</ion-button>
+            <ion-label class="zi2">点击进入此主题页面</ion-label>
+          </div>
+        </div>
+      
+    }
+    @if(pageNum==1){
+      <ion-card >
+          <ion-card-header class="card-header">
+            <img [src]="currentUser?.get('avatar')" onerror="this.src='https://app.fmode.cn/dev/jxnu/202226701019/头像示例.png';" alt="图片加载失败" class="avatar" />
+            <div class="user-info">
+                <ion-card-title>账号：{{currentUser?.get("username")}}</ion-card-title>
+                <ion-card-subtitle>
+                    姓名: {{currentUser?.get("realname") || "-"}} 
+                    性别: {{currentUser?.get("gender") || "-"}} 
+                    年龄: {{currentUser?.get("age") || "-"}}
+                </ion-card-subtitle>
+            </div>
+        </ion-card-header>
+        <ion-card-content>
+          <ion-button expand="block" (click)="editUser()" color="success">编辑资料</ion-button>
+          <ion-button expand="block" (click)="changeNum2()">切换主题</ion-button>
+          <ion-button expand="block" (click)="logout()" color="medium">登出</ion-button>
+        </ion-card-content>
+      </ion-card>
 
-    <h2 class="memo-title">收藏夹</h2>
-    <ul class="tag-list">
-        @for(tag of editTags; track tag;){
-            <li class="tag-item">{{tag}}</li>
-        }
-    </ul>
-  </ion-card>
-  }
+      <ion-card >
+        <ion-card-header>
+          <ion-card-title>个性头像生成器</ion-card-title>
+          <ion-card-subtitle>点击创建个性化头像</ion-card-subtitle>
+        </ion-card-header>
+        <ion-card-content>
+          <ion-button expand="block" (click)="goToAvatar()" color="success">前往生成</ion-button>
+        </ion-card-content>
+      </ion-card>
 
+      <ion-card class="memo-card" >
+        <h2 class="memo-title">健康备忘录</h2>
+        <p class="memo-description">写下您问诊的医生名或者心动的科普知识，便于您下次查找</p>
+        <app-edit-tag (onTagChange)="setTagsValue($event)"></app-edit-tag>
+        <h2 class="memo-title">收藏夹</h2>
+        <ul class="tag-list">
+            @for(tag of editTags; track tag;){
+                <li class="tag-item">{{tag}}</li>
+            }
+        </ul>
+      </ion-card>
+    }
+    @if(pageNum==2){
+      <ion-content class="ye2">
+      <ion-card class="custom-card">
+        <ion-avatar (click)="editUser()">
+          <img [src]="currentUser?.get('avatar')" onerror="this.src='https://app.fmode.cn/dev/jxnu/202226701019/头像示例.png';" alt="图片加载失败" class="avatar" />
+        </ion-avatar>
+        <ion-label>{{currentUser?.get("realname") || "-"}}</ion-label>
+      </ion-card>
+
+        <ion-list>
+          <ion-item>
+            <ion-icon name="person-circle" slot="start" ></ion-icon>
+            <ion-label (click)="editUser()">我的信息</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-icon name="image" slot="start"></ion-icon>
+            <ion-label>头像生成</ion-label>
+            <ion-button slot="end" fill="outline" size="small" color="success" (click)="goToAvatar()">前往生成</ion-button>
+          </ion-item>
+          <ion-item>
+            <ion-icon name="document" slot="start"></ion-icon>
+            <ion-label (click)="goToHealth()">健康档案</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-icon name="location" slot="start"></ion-icon>
+            <ion-label>我的地址</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-icon name="card" slot="start"></ion-icon>
+            <ion-label>我的优惠券</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-icon name="bag" slot="start"></ion-icon>
+            <ion-label>我的套餐包</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-icon name="chatbox" slot="start"></ion-icon>
+            <ion-label>联系客服</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-icon name="call" slot="start"></ion-icon>
+            <ion-label>绑定手机</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-icon name="folder" slot="start"></ion-icon>
+            <ion-label>我的收藏<app-edit-tag (onTagChange)="setTagsValue($event)"></app-edit-tag></ion-label>
+          </ion-item>
+        </ion-list>
+      
+        <ion-item>
+          <ion-label>关注公众号</ion-label>
+          <ion-label>每日医生直播义诊早知道~</ion-label>
+          <ion-button slot="end" fill="solid" size="small" color="success">立即前往</ion-button>
+        </ion-item>
+          <ion-button expand="block" fill="outline" (click)="changeNum1()" color="default">切换主题</ion-button>
+          <ion-button expand="block" fill="outline" (click)="logout()" color="medium">登出</ion-button>
+        
+        
+      </ion-content>
+    }
+}
 </ion-content>

wisdom-app/src/app/tab4/tab4.page.scss

@@ -97,13 +97,20 @@ ion-card:hover {
     flex: 1; /* 使用户信息部分占据剩余空间 */
 }
 
-ion-content {
+.login {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 68vh; /* 使内容区域高度为视口高度 */
 }
 
+.ye2{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh; /* 使内容区域高度为视口高度 */
+}
+
 .login-card {
     width: 94%; /* 可以根据需要调整宽度 */
     max-width: 400px; /* 设置最大宽度以避免过宽 */
@@ -123,3 +130,67 @@ ion-content {
     height: auto; /* 高度自动 */
     border-radius: 8px; /* 可选：添加圆角效果 */
 }
+
+//卡片背景
+.custom-card {
+    background-image: url('https://app.fmode.cn/dev/jxnu/202226701019/background.png'); /* 替换为你的图片链接 */
+    background-size: cover; /* 使背景图像覆盖整个卡片 */
+    background-position: center; /* 背景图像居中 */
+    height: 115px; /* 设置卡片高度，可以根据需求调整 */
+    color: white; /* 根据需要设置字体颜色 */
+    display: flex;
+    flex-direction: column; /* 使内容垂直排列 */
+    justify-content: center; /* 垂直居中 */
+    align-items: center; /* 水平居中 */
+    text-align: center; /* 文字居中 */
+    padding: 10px; /* 内边距 */
+  }
+
+  ion-avatar {
+    cursor: pointer; /* 鼠标悬停时显示为可点击 */
+    margin-bottom: 10px; /* 图片和文字之间的间距 */
+  }
+  
+  ion-label {
+    font-family: "微软雅黑";
+    font-size: 20px; /* 根据需要调整字体大小 */
+    color: #333; /* 根据需要调整字体颜色 */
+    
+  }
+
+  //选界面
+  .container {
+    display: flex;
+    flex-direction: column; /* 垂直排列 */
+    height: 100%; /* 使容器填满整个页面 */
+  }
+  
+  .top-section, .bottom-section {
+    flex: 1; /* 平均分配空间 */
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    flex-direction: column; /* 使内容垂直排列 */
+    justify-content: center; /* 垂直居中 */
+    align-items: center; /* 垂直居中 */
+  }
+  
+  .top-section {
+    background-image: url('https://app.fmode.cn/dev/jxnu/202226701019/zhuti1.jpg'); /* 替换为你的图片链接 */
+    background-size: cover; /* 使背景图像覆盖整个卡片 */
+    background-position: center; /* 背景图像居中 */
+  }
+  
+  .bottom-section {
+    background-image: url('https://app.fmode.cn/dev/jxnu/202226701019/zhuti2.jpg'); /* 替换为你的图片链接 */
+    background-size: cover; /* 使背景图像覆盖整个卡片 */
+    background-position: center; /* 背景图像居中 */
+  }
+
+  .zi1{
+    font-size: smaller;
+    color: #000000;
+  }
+  .zi2{
+    font-size: smaller;
+    color: #e0f7fa;
+  }

wisdom-app/src/app/tab4/tab4.page.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController, IonRefresher, IonRefresherContent } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController, IonRefresher, IonRefresherContent, IonLabel, IonItem, IonIcon, IonList, IonAvatar } from '@ionic/angular/standalone';
 import { CloudUser } from 'src/lib/ncloud';
 import { openUserEditModal } from 'src/lib/user/modal-user-edit/modal-user-edit.component';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
@@ -11,12 +11,20 @@ import { Router } from '@angular/router';
   templateUrl: 'tab4.page.html',
   styleUrls: ['tab4.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, 
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonLabel,IonItem,IonIcon,IonList,IonAvatar,
     IonCard,IonCardContent,IonButton,IonCardHeader,IonCardTitle,IonCardSubtitle,
     EditTagComponent,IonRefresher,IonRefresherContent
   ],
 })
 export class Tab4Page {
+  pageNum:Number=0
+  changeNum1(){
+    this.pageNum=1;
+  }
+  changeNum2(){
+    this.pageNum=2;
+  }
+
   handleRefresh(event:any) {
     setTimeout(() => {
       // Any calls to load data go here
@@ -34,6 +42,10 @@ export class Tab4Page {
     this.router.navigate(['/tabs/picture'])
   }
 
+  goToHealth(){
+    this.router.navigate(['/tabs/my-health'])
+  }
+
   currentUser:CloudUser|undefined
   constructor(
     private router: Router,