1

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

@@ -1,6 +1,6 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
+  <ion-toolbar class="custom-toolbar">
+    <ion-title class="custom-title">
       健康科普
     </ion-title>
   </ion-toolbar>

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">
  
   <!-- 用户登录状态 -->

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; /* 圆角边框 */