fdf

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

@@ -1,17 +1,9 @@
 <ion-header [translucent]="true">
   <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>
+    <div class="search-bar">
+      <input type="text" placeholder="输入关键词搜索科普文章">
+    </div>
+    <div class="header">
       <ion-card-header>
         <ion-card-title>
           <ion-segment [scrollable]="true" value="hotdot" [value]="type" (ionChange)="typeChange($event)">
@@ -35,13 +27,21 @@
             </ion-segment-button>
           </ion-segment>
         </ion-card-title>
-        <!-- <ion-card-subtitle>请输入账号密码</ion-card-subtitle> -->
       </ion-card-header>
-    
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="knowledge" [fullscreen]="true">
+  
+  <div class="content">
+    <ion-card>
+      <ion-card-header></ion-card-header>
+
       <ion-card-content>
         <ion-segment-view>
           <ion-segment-content id="hotdot">
-            <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
+            <app-article-card (click)="openDetailModal(card)" *ngFor="let card of cards" [card]="card"></app-article-card>
           </ion-segment-content>
 
           <ion-segment-content id="export">
@@ -65,5 +65,34 @@
       </ion-card-content>
     </ion-card>
   </div>
-  
+
+  <!-- 底部弹出模态 -->
+  <ion-modal [isOpen]="showDetailModal" cssClass="bottom-modal" backdropDismiss="true" (ionModalDidDismiss)="closeDetailModal()">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>详情</ion-title>
+        <ion-buttons slot="end">
+          <ion-button fill="clear" (click)="closeDetailModal()">
+            <ion-icon name="close">  X  </ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <div class="modal-content" *ngIf="currentProduct">
+        <div class="image-container">
+          <img [src]="currentProduct.get('image')" alt="药品图片" class="medicine-image">
+        </div>
+        <h2 class="product-name">{{currentProduct.get('image')}}</h2>
+        <!-- <p><strong>价格：</strong>{{currentProduct.price}}</p>
+        <p><strong>是否处方药：</strong>{{currentProduct.prescription ? '是' : '否'}}</p>
+        <p><strong>用法用量：</strong>{{currentProduct.usage}}</p>
+        <p><strong>主治功能：</strong>{{currentProduct.function}}</p>
+        <p><strong>规格：</strong>{{currentProduct.spec}}</p>
+        <p><strong>成分：</strong>{{currentProduct.composition}}</p>
+        <p><strong>禁忌：</strong>{{currentProduct.taboo}}</p> -->
+      </div>
+    </ion-content>
+  </ion-modal>
 </ion-content>

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

@@ -6,16 +6,6 @@
   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;
@@ -74,14 +64,45 @@ ion-segment-content {
   justify-content: center;
 }
 
-ion-segment-content:nth-of-type(5) {
-  background: lightpink;
+// ion-segment-content:nth-of-type(5) {
+//   background: lightpink;
+// }
+// ion-segment-content:nth-of-type(2) {
+//   background: lightblue;
+// }
+// ion-segment-content:nth-of-type(3) {
+//   background: lightgreen;
+// }
+
+
+// 底部弹窗(modal)样式
+.bottom-modal {
+  --height: 100vh;
+  --width: 100%;
+  --border-radius: 20px 20px 0 0;
+  --offset-y: 0; /* 确保模态窗口从底部弹出 */
 }
-ion-segment-content:nth-of-type(2) {
-  background: lightblue;
+
+.modal-content {
+  padding: 16px;
 }
-ion-segment-content:nth-of-type(3) {
-  background: lightgreen;
+
+.image-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.medicine-image {
+  width: 120px;
+  height: 120px;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+ion-button {
+  --padding-start: 0;
+  --padding-end: 0;
 }
 
 

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

@@ -1,14 +1,14 @@
 import { Component, NgModule } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, IonButton, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonCardContent, IonCardTitle, IonCardHeader, IonCard } from '@ionic/angular/standalone';
+import { ModalController, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, IonButton, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonIcon, IonButtons } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { addIcons } from 'ionicons';
 import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
-import { IonicModule, ModalController } from '@ionic/angular';
 import { ArticleCardComponent } from '../component/article-card/article-card.component';
 import { CommonModule } from '@angular/common';
 import { CloudObject, CloudQuery } from 'src/lib/ncloud';
 import { FormsModule } from '@angular/forms';
 import { NavigationLanComponent } from '../component/navigation-lan/navigation-lan.component';
+import { Router } from '@angular/router';
 addIcons({ airplane, bluetooth, call, wifi });
 
 interface Article {
@@ -25,22 +25,42 @@ interface Article {
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
     IonLabel,IonItem,IonList,IonAvatar,ArticleCardComponent,CommonModule,IonButton,
     IonSegment, IonSegmentButton,NavigationLanComponent,
-    IonSegmentContent,IonSegmentView,IonCardContent, IonCardTitle, IonCardHeader,IonCard
+    IonSegmentContent,IonSegmentView,IonCardContent, IonCardTitle, IonCardHeader,IonCard,
+    IonModal,IonIcon, IonButtons
   ]
 })
 
 export class Tab2Page {
 
+  showDetailModal = false;  // 控制模态显示与否
+  currentProduct: any;      // 当前选择的科普信息
+
+  openDetailModal(product: any) {
+    this.currentProduct = product;
+    this.showDetailModal = true;
+  }
+
+  closeDetailModal() {
+    this.showDetailModal = false;
+    this.currentProduct = null;
+  }
+
   type:"hotdot"|"export"|"sleep"|"lift"|"male"|"female" = "hotdot"
   typeChange(ev:any){
     this.type = ev?.detail?.value || ev?.value || 'hotdot'
     console.log(this.type)
   }
   // constructor(private modalCtrl:ModalController) { }
-  constructor() { }
+
+  constructor(
+    private modalCtrl:ModalController,
+    private router:Router,
+  ) { }
+
   cards: Array<CloudObject> = [];
   async loadCards() {
     let query = new CloudQuery('HotDot');

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

@@ -19,6 +19,7 @@ import { SaleCardComponent } from '../component/sale-card/sale-card.component';
     FmChatModalInput, IonModal, IonButtons
   ]
 })
+
 export class Tab3Page {
   showDetailModal = false;  // 控制模态显示与否
   currentProduct: any;      // 当前选择的商品信息