fixs

wisdom-app/src/app/page/page-my-health/page-my-health.component.html

@@ -1,8 +1,6 @@
 <ion-header [translucent]="true">
   <ion-toolbar class="searchbar">
-    <ion-button slot="start" (click)="backHome()" color="primary">
-      <ion-icon slot="icon-only" name="arrow-back-outline"></ion-icon>
-    </ion-button>
+    <ion-button slot="start" (click)="backHome()" color="primary">{{back}}</ion-button>
     <ion-title>
       <div class="user-info">
         <ion-avatar class="user-avatar">
@@ -27,6 +25,12 @@
   <ion-spinner *ngIf="isLoading" name="crescent" class="loading-spinner"></ion-spinner>
 
   <!-- 数据展示区域 -->
+
+  <div *ngIf="!isLoading && allMessage.length === 0" class="no-data">
+    <ion-icon name="folder-open-outline" style="font-size: 50px; color: #888;"></ion-icon>
+    <p>暂无问询记录，赶快去咨询医生吧！</p>
+  </div>
+
   <ion-list *ngIf="!isLoading && allMessage.length > 0">
     <ion-item *ngFor="let message of allMessage" lines="none">
       <ion-card class="message-card">

wisdom-app/src/app/page/page-my-health/page-my-health.component.scss

@@ -6,6 +6,9 @@
   .user-info {
     display: flex;
     align-items: center;
+    background: linear-gradient(to right, #f8fafc, #58f083);
+    padding: 10px;
+    border-radius: 8px;
   }
   
   .user-avatar {
@@ -21,8 +24,10 @@
   }
   
   .user-name {
-    font-size: 18px;
+    font-size: 20px;
     font-weight: bold;
+    color: #3880ff;
+    margin-left: 10px;
   }
   
   .user-details {
@@ -36,20 +41,19 @@
   }
   
   .message-card {
-    margin: 10px 15px;
-    border-radius: 15px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s;
+    margin: 15px;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    background: #f9f9f9;
+    transition: transform 0.2s;
   }
-  
   .message-card:hover {
-    transform: scale(1.02);
+    transform: scale(1.03);
   }
-  
   .message-card ion-card-header {
-    background-color: #f0f0f0;
-    border-top-left-radius: 15px;
-    border-top-right-radius: 15px;
+    background: #e7effb;
+    padding: 10px;
+    border-radius: 10px 10px 0 0;
   }
   
   .message-card ion-card-title {

wisdom-app/src/app/page/page-my-health/page-my-health.component.ts

@@ -32,7 +32,7 @@ import {
 } from '@ionic/angular/standalone'; // 确保导入自 '@ionic/angular/standalone'
 
 import { addIcons } from 'ionicons';
-import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
+import { airplane, bluetooth, call, wifi, arrowBackOutline, menuOutline, personOutline, businessOutline, medicalOutline, documentTextOutline, folderOpenOutline } from 'ionicons/icons';
 import { CommonModule } from '@angular/common';
 import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
 // import { FmMarkdownPreview } from 'fmode-ng';

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

@@ -1,5 +1,3 @@
-<!-- tab3.page.html -->
-
 <ion-header [translucent]="true">
   <ion-toolbar class="custom-toolbar">
     <ion-title class="custom-title">
@@ -11,103 +9,111 @@
 <ion-content [fullscreen]="true" class="content-background">
   <!-- 搜索栏 -->
   <ion-searchbar 
-  placeholder="搜索" 
-  class="custom-searchbar" 
-  (ionInput)="searchProducts($event)">
-</ion-searchbar>
+    placeholder="搜索" 
+    class="custom-searchbar" 
+    (ionInput)="searchProducts($event)">
+  </ion-searchbar>
 
- <!-- 分类区域（可横向滑动） -->
-<div class="category-scroll">
-  <div class="category-scroll-inner">
-    <ion-grid>
-      <ion-row class="category-row">
-        <ion-col 
-          size="3" 
-          size-sm="3" 
-          size-md="3" 
-          size-lg="3" 
-          size-xl="3" 
-          *ngFor="let category of categories" 
-          class="category-col">
-          <div class="category-item" (click)="onCategoryClick(category)">
-            <div class="category-image-wrapper">
-              <img [src]="category.image" alt="{{category.name}}" class="category-image">
+  <!-- 分类区域（可横向滑动） -->
+  <div class="category-scroll">
+    <div class="category-scroll-inner">
+      <ion-grid>
+        <ion-row class="category-row">
+          <ion-col 
+            size="3" 
+            size-sm="3" 
+            size-md="3" 
+            size-lg="3" 
+            size-xl="3" 
+            *ngFor="let category of categories" 
+            class="category-col">
+            <div class="category-item" (click)="onCategoryClick(category)">
+              <div class="category-image-wrapper">
+                <img [src]="category.image" alt="{{category.name}}" class="category-image">
+              </div>
+              <div class="category-text">{{ category.name }}</div>
             </div>
-            <div class="category-text">{{ category.name }}</div>
-          </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </div>
+  </div>
+
+  <!-- 热销模块 -->
+  <div class="marketing-section">
+    <h2>热销🔥🔥🔥</h2>
+    <ion-grid>
+      <ion-row>
+        <ion-col size="6" size-md="4" size-lg="3" *ngFor="let product of hotProducts | slice:0:4">
+          <ion-card class="product-card" (click)="openDetailModal(product)">
+            <ion-card-header class="product-card-header">
+              <div class="product-tag">{{ product.get('title') || '热销🔥🔥🔥' }}</div>
+            </ion-card-header>
+            <ion-card-content class="product-card-content">
+              <div class="product-image-wrapper">
+                <img [src]="product.get('image')" alt="{{product.get('name')}}" class="product-image">
+              </div>
+              <div class="product-info">
+                <h3 class="product-name">{{ product.get('name') }}</h3>
+                <div class="product-price">{{ product.get('price') }}</div>
+              </div>
+            </ion-card-content>
+          </ion-card>
         </ion-col>
       </ion-row>
     </ion-grid>
-  </div>
-</div>
-
-<!-- 热销模块 -->
-<div class="marketing-section">
-  <h2>热销🔥🔥🔥</h2>
-  <div class="product-container">
-    <ng-container *ngFor="let product of hotProducts | slice:0:2">
-      <ion-card class="product-card" (click)="openDetailModal(product)">
-        <ion-card-header class="product-card-header">
-          <div class="product-tag">{{ product.get('title') || '热销🔥🔥🔥' }}</div>
-        </ion-card-header>
-        <ion-card-content class="product-card-content">
-          <div class="product-image-wrapper">
-            <img [src]="product.get('image')" alt="{{product.get('name')}}" class="product-image">
-          </div>
-          <div class="product-info">
-            <h3 class="product-name">{{ product.get('name') }}</h3>
-            <div class="product-price">{{ product.get('price') }}</div>
-          </div>
-        </ion-card-content>
-      </ion-card>
-    </ng-container>
     <ion-button fill="clear" (click)="viewMore('hot')">查看更多</ion-button>
   </div>
-</div>
 
-<!-- 特价模块 -->
-<div class="marketing-section">
-  <h2>特价优惠💰💰💰</h2>
-  <div class="product-container">
-    <ng-container *ngFor="let product of specialProducts | slice:0:2">
-      <ion-card class="product-card" (click)="openDetailModal(product)">
-        <ion-card-header class="product-card-header">
-          <div class="product-tag">{{ product.get('title') || '特价优惠💰💰💰' }}</div>
-        </ion-card-header>
-        <ion-card-content class="product-card-content">
-          <div class="product-image-wrapper">
-            <img [src]="product.get('image')" alt="{{product.get('name')}}" class="product-image">
-          </div>
-          <div class="product-info">
-            <h3 class="product-name">{{ product.get('name') }}</h3>
-            <div class="product-price">{{ product.get('price') }}</div>
-          </div>
-        </ion-card-content>
-      </ion-card>
-    </ng-container>
+  <!-- 特价模块 -->
+  <div class="marketing-section">
+    <h2>特价优惠💰💰💰</h2>
+    <ion-grid>
+      <ion-row>
+        <ion-col size="6" size-md="4" size-lg="3" *ngFor="let product of specialProducts | slice:0:4">
+          <ion-card class="product-card" (click)="openDetailModal(product)">
+            <ion-card-header class="product-card-header">
+              <div class="product-tag">{{ product.get('title') || '特价优惠💰💰💰' }}</div>
+            </ion-card-header>
+            <ion-card-content class="product-card-content">
+              <div class="product-image-wrapper">
+                <img [src]="product.get('image')" alt="{{product.get('name')}}" class="product-image">
+              </div>
+              <div class="product-info">
+                <h3 class="product-name">{{ product.get('name') }}</h3>
+                <div class="product-price">{{ product.get('price') }}</div>
+              </div>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
     <ion-button fill="clear" (click)="viewMore('special')">查看更多</ion-button>
   </div>
-</div>
 
-<!-- 商品卡片列表区域 -->
-<div class="product-container">
-  <ng-container *ngFor="let product of products">
-    <ion-card class="product-card" (click)="openDetailModal(product)">
-      <ion-card-header class="product-card-header">
-        <div class="product-tag">{{ product.get('title') || '药品详情' }}</div>
-      </ion-card-header>
-      <ion-card-content class="product-card-content">
-        <div class="product-image-wrapper">
-          <img [src]="product.get('image')" alt="{{product.get('name')}}" class="product-image">
-        </div>
-        <div class="product-info">
-          <h3 class="product-name">{{ product.get('name') }}</h3>
-          <div class="product-price">{{ product.get('price') }}</div>
-        </div>
-      </ion-card-content>
-    </ion-card>
-  </ng-container>
-</div>
+  <!-- 商品卡片列表区域 -->
+  <div class="product-container">
+    <ion-grid>
+      <ion-row>
+        <ion-col size="6" size-md="4" size-lg="3" *ngFor="let product of products">
+          <ion-card class="product-card" (click)="openDetailModal(product)">
+            <ion-card-header class="product-card-header">
+              <div class="product-tag">{{ product.get('title') || '药品详情' }}</div>
+            </ion-card-header>
+            <ion-card-content class="product-card-content">
+              <div class="product-image-wrapper">
+                <img [src]="product.get('image')" alt="{{product.get('name')}}" class="product-image">
+              </div>
+              <div class="product-info">
+                <h3 class="product-name">{{ product.get('name') }}</h3>
+                <div class="product-price">{{ product.get('price') }}</div>
+              </div>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </div>
 
   <!-- 底部弹出模态 -->
   <ion-modal [isOpen]="showDetailModal" cssClass="bottom-modal" backdropDismiss="true" (ionModalDidDismiss)="closeDetailModal()">

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

@@ -98,11 +98,11 @@
 .product-card {
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-  margin-bottom: 16px;
+  margin: 8px 0; /* 调整上下间距 */
 }
 
 .product-card-header {
-  background: #ffeb3b;
+  background: #348ef5;
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
   display: flex;
@@ -118,29 +118,28 @@
 
 .product-card-content {
   display: flex;
-  align-items: center;
+  flex-direction: column; /* 竖直排列图片和信息 */
+  align-items: center; /* 居中对齐 */
   padding: 12px;
 }
 
 .product-image-wrapper {
-  width: 80px;
-  height: 80px;
+  width: 100%;
+  height: 120px; /* 增大图片高度以适应网格布局 */
   border-radius: 8px;
   overflow: hidden;
-  margin-right: 12px;
+  margin-bottom: 12px; /* 增加底部间距 */
 }
 
 .product-image {
   width: 100%;
   height: 100%;
-  /* object-fit: cover; */
+  object-fit: cover;
 }
 
 .product-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+  width: 100%;
+  text-align: center; /* 居中对齐文本 */
 }
 
 .product-name {