Merge branch 'master' of http://git.fmode.cn:3000/yuebuzu/s202226701018

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

@@ -1,7 +1,7 @@
 
 <ion-input [value]="userInput" (ionInput)="onInput($event)" type="text" placeholder="请输入标签名称"></ion-input>
 <!-- <p>当前输入: {{userInput}}</p>  -->
-<ion-button (click)="addTag()" expand="block">添加标签</ion-button>
+<ion-button (click)="addTag()" expand="block" color="success">添加标签</ion-button>
 <div>
 @for(tag of tags;track tag;){
     <ion-chip color="primary" (click)="removeTag(tag)">

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

@@ -1,43 +1,43 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
-    <div class="search-bar">
-      <input type="text" placeholder="输入关键词搜索科普文章">
-    </div>
-    <div class="header">
-      <ion-card>
-        <ion-card-header>
-          <ion-card-title>
-            <ion-segment [scrollable]="true" value="hotdot" [value]="type" (ionChange)="typeChange($event)">
-              <ion-segment-button value="hotdot" content-id="hotdot">
-                <ion-label>热点</ion-label>
-              </ion-segment-button>
-              <ion-segment-button value="export" content-id="export">
-                <ion-label>专家科普</ion-label>
-              </ion-segment-button>
-              <ion-segment-button value="sleep" content-id="sleep">
-                <ion-label>睡眠</ion-label>
-              </ion-segment-button>
-              <ion-segment-button value="life" content-id="life">
-                <ion-label>生活</ion-label>
-              </ion-segment-button>
-              <ion-segment-button value="male" content-id="male">
-                <ion-label>男性</ion-label>
-              </ion-segment-button>
-              <ion-segment-button value="female" content-id="female">
-                <ion-label>女性</ion-label>
-              </ion-segment-button>
-            </ion-segment>
-          </ion-card-title>
-        </ion-card-header>
-      </ion-card>
-    </div>
+  <ion-toolbar class="custom-toolbar">
+    <ion-title class="custom-title">
+      健康科普
+    </ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content class="knowledge" [fullscreen]="true">
-  
+  <div class="search-bar">
+    <input type="text" placeholder="输入关键词搜索科普文章">
+  </div>
   <div class="content">
     <ion-card>
+      <ion-card-header>
+        <ion-card-title>
+          <ion-segment [scrollable]="true" value="hotdot" [value]="type" (ionChange)="typeChange($event)">
+            <ion-segment-button value="hotdot" content-id="hotdot">
+              <ion-label>热点</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="export" content-id="export">
+              <ion-label>专家科普</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="sleep" content-id="sleep">
+              <ion-label>睡眠</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="life" content-id="life">
+              <ion-label>生活</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="male" content-id="male">
+              <ion-label>男性</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="female" content-id="female">
+              <ion-label>女性</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-card-title>
+        <!-- <ion-card-subtitle>请输入账号密码</ion-card-subtitle> -->
+      </ion-card-header>
+    
       <ion-card-content>
         <ion-segment-view>
           <ion-segment-content id="hotdot">

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

@@ -1,3 +1,22 @@
+.custom-toolbar {
+  --background: rgba(255, 255, 255, 0.8); /* 使工具栏背景透明 */
+  display: flex; /* 使用 Flexbox 布局 */
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+  padding: 0; /* 去掉默认内边距 */
+}
+
+.custom-title {
+  font-size: 1.3em; /* 字体大小 */
+  font-weight: bold; /* 加粗 */
+  color: #000000; 
+  text-align: center; /* 文字居中对齐 */
+  margin: 0; /* 去掉默认外边距 */
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 添加文字阴影效果 */
+  /* 添加其他美化效果 */
+  font-family: "微软雅黑"; /* 自定义字体 */
+}
+
 .search-bar {
     padding: 10px;
     text-align: center;

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

@@ -1,6 +1,8 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>药品商城</ion-title>
+  <ion-toolbar class="custom-toolbar">
+    <ion-title class="custom-title">
+      药品商城
+    </ion-title>
   </ion-toolbar>
 </ion-header>
 

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

@@ -1,3 +1,22 @@
+.custom-toolbar {
+  --background: rgba(255, 255, 255, 0.8); /* 使工具栏背景透明 */
+  display: flex; /* 使用 Flexbox 布局 */
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+  padding: 0; /* 去掉默认内边距 */
+}
+
+.custom-title {
+  font-size: 1.3em; /* 字体大小 */
+  font-weight: bold; /* 加粗 */
+  color: #000000; 
+  text-align: center; /* 文字居中对齐 */
+  margin: 0; /* 去掉默认外边距 */
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 添加文字阴影效果 */
+  /* 添加其他美化效果 */
+  font-family: "微软雅黑"; /* 自定义字体 */
+}
+
 ion-button {
     display: flex;
     flex-direction: column;

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

@@ -1,11 +1,10 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
+  <ion-toolbar class="custom-toolbar">
+    <ion-title class="custom-title">
       我的
     </ion-title>
   </ion-toolbar>
 </ion-header>
-
 <ion-content [fullscreen]="true">
  
   <!-- 用户登录状态 -->
@@ -19,18 +18,29 @@
       }
         <!-- 已登录 -->
      @if(currentUser?.id){
-      <ion-card-header>
-        <ion-card-title>{{currentUser?.get("username")}} {{currentUser?.get("realname")}}</ion-card-title>
-        <ion-card-subtitle>性别:{{currentUser?.get("gender")||"-"}} 年龄:{{currentUser?.get("age")||"-"}}</ion-card-subtitle>
-      </ion-card-header>
+      <!-- <ion-card-header>
+        <ion-card-title>{{currentUser?.get("username")}}</ion-card-title>
+        <ion-card-subtitle>姓名:{{currentUser?.get("realname")||"-"}} 性别:{{currentUser?.get("gender")||"-"}} 年龄:{{currentUser?.get("age")||"-"}}</ion-card-subtitle>
+      </ion-card-header> -->
+      <ion-card-header class="card-header">
+        <img [src]="currentUser?.get('avatar')|| '../../assets/image/doctor7.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()">注册</ion-button>
-        <ion-button expand="block" (click)="login()">登录</ion-button>
+        <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()">编辑资料</ion-button>
+      <ion-button expand="block" (click)="editUser()" color="success">编辑资料</ion-button>
       <ion-button expand="block" (click)="logout()" color="medium">登出</ion-button>
     }
     </ion-card-content>

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

@@ -1,3 +1,22 @@
+.custom-toolbar {
+    --background: rgba(255, 255, 255, 0.8); /* 使工具栏背景透明 */
+    display: flex; /* 使用 Flexbox 布局 */
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    padding: 0; /* 去掉默认内边距 */
+}
+
+.custom-title {
+    font-size: 1.3em; /* 字体大小 */
+    font-weight: bold; /* 加粗 */
+    color: #000000; 
+    text-align: center; /* 文字居中对齐 */
+    margin: 0; /* 去掉默认外边距 */
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 添加文字阴影效果 */
+    /* 添加其他美化效果 */
+    font-family: "微软雅黑"; /* 自定义字体 */
+}
+
 ion-card {
     background-color: #e0f7fa; /* 浅蓝色背景，给人以清新和健康的感觉 */
     border-radius: 10px; /* 圆角边框 */
@@ -59,4 +78,21 @@ ion-card:hover {
 
 .tag-item:hover {
     background-color: #80deea; /* 悬停时的背景色变化 */
+}
+.card-header {
+    display: flex; /* 使用 Flexbox 布局 */
+    align-items: center; /* 垂直居中对齐 */
+    padding: 10px; /* 内边距 */
+}
+
+.avatar {
+    width: 50px; /* 头像宽度 */
+    height: 50px; /* 头像高度 */
+    border-radius: 50%; /* 圆形头像 */
+    margin-right: 15px; /* 头像与文本之间的间距 */
+    object-fit: cover; /* 确保图片覆盖区域并保持比例 */
+}
+
+.user-info {
+    flex: 1; /* 使用户信息部分占据剩余空间 */
 }

wisdom-app/src/lib/user/modal-user-edit/modal-user-edit.component.html

@@ -17,6 +17,9 @@
   <ion-item>
      <ion-input [value]="userData['gender']" (ionChange)="userDataChange('gender',$event)" label="性别" placeholder="请您输入男/女"></ion-input>
     </ion-item>
+    <ion-item>
+      <ion-input [value]="userData['avatar']" (ionChange)="userDataChange('avatar',$event)" label="头像" placeholder="请您输入头像地址"></ion-input>
+     </ion-item>
 
    <ion-button expand="block" (click)="save()">保存</ion-button>
    <ion-button expand="block" (click)="cancel()">取消</ion-button>