f

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

@@ -1,47 +1,47 @@
 <ion-header [translucent]="true">
   <ion-toolbar class="custom-toolbar">
-    <ion-title class="custom-title">药品</ion-title>
+    <ion-title class="custom-title">
+      药品
+    </ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true" class="content-background">
-
   <!-- 搜索栏 -->
   <ion-searchbar 
-    placeholder="搜索药品" 
+    placeholder="搜索" 
     class="custom-searchbar" 
     (ionInput)="searchProducts($event)">
   </ion-searchbar>
 
-  <!-- 分类区域（固定为两行四个，不变） -->
-  <ion-grid>
-    <!-- 第一行分类 -->
-    <ion-row>
-      <ion-col size="3" *ngFor="let category of categories | slice:0:4" 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>
-      </ion-col>
-    </ion-row>
-    <!-- 第二行分类 -->
-    <ion-row>
-      <ion-col size="3" *ngFor="let category of categories | slice:4:8" 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>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
+  <!-- 分类区域（可横向滑动） -->
+  <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>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </div>
+  </div>
 
   <!-- 热销模块 -->
   <div class="marketing-section">
-    <h2 class="section-title">热销🔥🔥🔥</h2>
+    <h2>热销🔥🔥🔥</h2>
     <ion-grid>
       <ion-row>
         <ion-col size="6" size-md="4" size-lg="3" *ngFor="let product of hotProducts | slice:0:4">
@@ -62,12 +62,12 @@
         </ion-col>
       </ion-row>
     </ion-grid>
-    <ion-button fill="clear" class="view-more-button" (click)="viewMore('hot')">查看更多</ion-button>
+    <ion-button fill="clear" (click)="viewMore('hot')">查看更多</ion-button>
   </div>
 
   <!-- 特价模块 -->
   <div class="marketing-section">
-    <h2 class="section-title">特价优惠💰💰💰</h2>
+    <h2>特价优惠💰💰💰</h2>
     <ion-grid>
       <ion-row>
         <ion-col size="6" size-md="4" size-lg="3" *ngFor="let product of specialProducts | slice:0:4">
@@ -88,7 +88,7 @@
         </ion-col>
       </ion-row>
     </ion-grid>
-    <ion-button fill="clear" class="view-more-button" (click)="viewMore('special')">查看更多</ion-button>
+    <ion-button fill="clear" (click)="viewMore('special')">查看更多</ion-button>
   </div>
 
   <!-- 商品卡片列表区域 -->
@@ -116,12 +116,7 @@
   </div>
 
   <!-- 底部弹出模态 -->
-  <ion-modal 
-    [isOpen]="showDetailModal" 
-    cssClass="bottom-modal" 
-    backdropDismiss="true" 
-    (ionModalDidDismiss)="closeDetailModal()">
-    
+  <ion-modal [isOpen]="showDetailModal" cssClass="bottom-modal" backdropDismiss="true" (ionModalDidDismiss)="closeDetailModal()">
     <ion-header>
       <ion-toolbar>
         <ion-title>详情</ion-title>
@@ -149,5 +144,4 @@
       </div>
     </ion-content>
   </ion-modal>
-
 </ion-content>

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

@@ -1,16 +1,6 @@
-/* CSS 变量统一管理 */
-:root {
-  --primary-color: #348ef5;
-  --secondary-color: #e53935;
-  --background-gradient: linear-gradient(to bottom, #e0f7fa, #ffffff);
-  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  --hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  --transition-duration: 0.3s;
-}
-
-/* 整体背景渐变 */
+/* 整体背景渐变，可以根据需要调整或移除 */
 .content-background {
-  background: var(--background-gradient);
+  background: linear-gradient(to bottom, #e0f7fa, #ffffff);
   --padding-bottom: 0;
 }
 
@@ -25,102 +15,94 @@
 }
 
 .custom-title {
-  font-size: 1.6em;
+  font-size: 1.4em;
   font-weight: bold;
-  color: #333; 
+  color: #000; 
   text-align: center;
   margin: 0;
   font-family: "微软雅黑", sans-serif;
 }
 
 /* 搜索栏区域样式 */
+.search-container {
+  padding: 0 16px;
+  margin-top: 8px;
+}
+
 .custom-searchbar {
   --background: #ffffff;
   --border-radius: 20px;
   box-shadow: 0 2px 6px rgba(0,0,0,0.1);
-  margin: 16px;
 }
 
-/* 分类区域（固定为两行四个） */
+/* 分类区域（可横向滚动） */
+.category-scroll {
+  overflow-x: auto; /* 如果需要横向滚动 */
+  width: 100%;
+}
+
+.category-scroll-inner {
+  width: 100%;
+}
+
+.category-row {
+  margin: 0;
+}
+
 .category-col {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   margin-bottom: 16px; 
+  max-width: 25%; /* 确保每个列最大宽度为25%，即四个一行 */
+  flex: 0 0 25%; /* 防止列自动扩展 */
 }
 
 .category-item {
   display: flex;
-  flex-direction: column;
+  flex-direction: column; /* 垂直排列：图片在上，文字在下 */
   align-items: center;
-  cursor: pointer;
-  transition: transform var(--transition-duration), box-shadow var(--transition-duration);
-  padding: 8px;
-  border-radius: 12px;
-}
-
-.category-item:hover {
-  transform: scale(1.05);
-  box-shadow: var(--hover-shadow);
-  background-color: #f5f5f5;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer; /* 可选：让鼠标移上去有点击手势 */
+  width: 100%; /* 占满整个列 */
 }
 
 .category-image-wrapper {
-  width: 60px;
-  height: 60px;
-  margin-bottom: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  background-color: #ffffff;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  width: 80px; /* 设定一个固定的宽度和高度 */
+  height: 80px;
 }
 
 .category-image {
   width: 100%;
   height: 100%;
-  object-fit: contain;
+  object-fit: contain; 
 }
 
 .category-text {
   font-size: 14px;
-  color: #555;
+  color: #333;
   font-weight: 500;
   text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  white-space: normal; 
+  max-width: 100%;
 }
 
-/* 热销和特价模块样式 */
-.marketing-section {
+/* 商品列表区域样式 */
+.product-container {
   padding: 0 16px;
-  margin-bottom: 32px;
-}
-
-.section-title {
-  font-size: 1.5em;
-  color: #333;
-  margin-bottom: 16px;
+  margin-top: 16px;
 }
 
-/* 商品卡片样式 */
 .product-card {
   border-radius: 12px;
-  box-shadow: var(--card-shadow);
-  margin: 8px 0;
-  transition: transform var(--transition-duration), box-shadow var(--transition-duration);
-}
-
-.product-card:hover {
-  transform: translateY(-5px);
-  box-shadow: var(--hover-shadow);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  margin: 8px 0; /* 调整上下间距 */
 }
 
 .product-card-header {
-  background: var(--primary-color);
+  background: #348ef5;
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
   display: flex;
@@ -131,22 +113,22 @@
 .product-tag {
   font-size: 14px;
   font-weight: bold;
-  color: #fff;
+  color: #333;
 }
 
 .product-card-content {
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-direction: column; /* 竖直排列图片和信息 */
+  align-items: center; /* 居中对齐 */
   padding: 12px;
 }
 
 .product-image-wrapper {
   width: 100%;
-  height: 120px;
+  height: 120px; /* 增大图片高度以适应网格布局 */
   border-radius: 8px;
   overflow: hidden;
-  margin-bottom: 12px;
+  margin-bottom: 12px; /* 增加底部间距 */
 }
 
 .product-image {
@@ -157,36 +139,24 @@
 
 .product-info {
   width: 100%;
-  text-align: center;
+  text-align: center; /* 居中对齐文本 */
 }
 
 .product-name {
   font-size: 16px;
   font-weight: bold;
   color: #333;
-  word-break: break-word;
+  white-space: normal;
+  word-break: break-all;
   margin-bottom: 4px;
 }
 
 .product-price {
   font-size: 14px;
-  color: var(--secondary-color);
+  color: #e53935;
   font-weight: bold;
 }
 
-/* 查看更多按钮样式 */
-.view-more-button {
-  --color: var(--primary-color);
-  --font-weight: bold;
-  margin-top: 16px;
-}
-
-/* 商品列表区域样式 */
-.product-container {
-  padding: 0 16px;
-  margin-top: 16px;
-}
-
 /* 底部弹窗(modal)样式 */
 .bottom-modal {
   --height: 75vh;
@@ -210,35 +180,4 @@
   height: 120px;
   object-fit: cover;
   border-radius: 8px;
-}
-
-/* 响应式调整 */
-@media (max-width: 768px) {
-  .custom-title {
-    font-size: 1.4em;
-  }
-
-  .custom-searchbar {
-    margin: 12px;
-  }
-
-  .section-title {
-    font-size: 1.3em;
-  }
-
-  .product-image-wrapper {
-    height: 100px;
-  }
-
-  .product-name {
-    font-size: 15px;
-  }
-
-  .product-price {
-    font-size: 13px;
-  }
-
-  .view-more-button {
-    margin-top: 12px;
-  }
 }

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

@@ -1,26 +1,18 @@
-import { Component, OnInit } from '@angular/core';
-import { ModalController } from '@ionic/angular';
-import { Router } from '@angular/router';
+import { Component } from '@angular/core';
+import { ModalController, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, IonButton, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonIcon, IonButtons, IonGrid, IonRow, IonThumbnail, IonSearchbar, IonCol } from '@ionic/angular/standalone';
+import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { addIcons } from 'ionicons';
+import { airplane, bluetooth, call, wifi, close } from 'ionicons/icons';
+import { SaleCardComponent } from '../component/sale-card/sale-card.component';
+import { CommonModule } from '@angular/common';
 import { CloudObject, CloudQuery } from 'src/lib/ncloud';
-
-// 正确导入所有组件
+import { Router } from '@angular/router';
+import { FmChatModalInput } from 'fmode-ng';
 import { AllProductsModalComponent } from '../all-products-modal/all-products-modal.component';
-import { DetailModalComponent } from '../detail-modal/detail-modal.component';
-import { SaleCardComponent } from '../component/sale-card/sale-card.component';
-
-// 移除或正确导入 FmChatModalInput
-// 如果 FmChatModalInput 是一个模块，请使用下面的导入方式（假设它是一个模块）
-// import { FmChatModalInputModule } from 'fmode-ng';
-
-// 如果 FmChatModalInput 是一个组件，请使用下面的导入方式（假设它是一个组件）
-// import { FmChatModalInputComponent } from 'fmode-ng';
-
-// 如果 FmChatModalInput 不是必需的，建议先移除以确保编译通过
-// 这里假设我们移除了它
-
-// 导入必要的模块
+import { DetailModalComponent } from '../detail-modal/detail-modal.component'; // 确保此组件已创建
 import { IonicModule } from '@ionic/angular';
-import { CommonModule } from '@angular/common';
+
+addIcons({ airplane, bluetooth, call, wifi });
 
 @Component({
   selector: 'app-tab3',
@@ -32,12 +24,12 @@ import { CommonModule } from '@angular/common';
     CommonModule,
     AllProductsModalComponent,
     DetailModalComponent,
-    SaleCardComponent
-    // 如果 FmChatModalInput 是模块或组件，根据实际情况添加
-    // FmChatModalInputModule 或 FmChatModalInputComponent
+    ExploreContainerComponent,
+    SaleCardComponent,
+    FmChatModalInput
   ]
 })
-export class Tab3Page implements OnInit {
+export class Tab3Page {
   showDetailModal = false;  // 控制详情模态显示与否
   currentProduct: any;      // 当前选择的药品信息
 
@@ -63,16 +55,10 @@ export class Tab3Page implements OnInit {
     private router: Router,
   ) {}
 
-  /**
-   * 初始化生命周期钩子，加载药品数据
-   */
   async ngOnInit() {
     await this.loadProducts();
   }
 
-  /**
-   * 加载药品数据并进行分类
-   */
   async loadProducts() {
     try {
       const query = new CloudQuery('Drug');
@@ -87,38 +73,43 @@ export class Tab3Page implements OnInit {
     }
   }
 
-  /**
-   * 打开详情模态窗口
-   * @param product 当前选择的药品
-   */
+  // 打开详情模态窗口
   openDetailModal(product: any) {
     this.currentProduct = product;
     this.showDetailModal = true;
   }
 
-  /**
-   * 关闭详情模态窗口
-   */
+  // 关闭详情模态窗口
   closeDetailModal() {
     this.showDetailModal = false;
     this.currentProduct = null;
   }
 
-  /**
-   * 根据分类导航到 drug-category 页面
-   * @param category 选择的分类
-   */
+  // 根据分类导航到 drug-category 页面
   onCategoryClick(category: any) {
     this.router.navigate(['/drug-category', category.name]);
   }
 
-  // 搜索功能相关属性
+  // 分享链接功能（可选）
+  shareDetailModal() {
+    // 实现分享功能
+    console.log('分享功能待实现');
+  }
+
+  // 复制链接功能
+  copyLink() {
+    const link = window.location.href;
+    navigator.clipboard.writeText(link).then(() => {
+      console.log('链接已复制');
+      // 可添加用户提示
+    }).catch(err => {
+      console.error('复制失败', err);
+    });
+  }
+
+  // 搜索功能
   searchTerm: string = '';
 
-  /**
-   * 搜索功能，根据输入关键字过滤药品
-   * @param event 输入事件
-   */
   async searchProducts(event: any) {
     this.searchTerm = event.detail.value.toLowerCase();
     if (this.searchTerm) {
@@ -132,10 +123,7 @@ export class Tab3Page implements OnInit {
     }
   }
 
-  /**
-   * 查看更多功能，打开 AllProductsModalComponent 模态窗口
-   * @param type 类型（热销或特价）
-   */
+  // 查看更多功能，打开 AllProductsModalComponent 模态窗口
   async viewMore(type: string) {
     let filteredProducts: Array<CloudObject> = [];
     let title: string = '';