add video

mcbridge-app/src/app/knowledge/knowledge-page/knowledge-page.component.html

@@ -1,3 +1,12 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+
 <ion-content>
   <ion-list>
     <ion-item lines="none">

mcbridge-app/src/app/knowledge/knowledge-page/knowledge-page.component.ts

@@ -1,6 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { IonButtons, IonHeader, IonToolbar } from '@ionic/angular/standalone';
+import { IonBackButton } from '@ionic/angular/standalone';
 import { IonContent } from '@ionic/angular/standalone';
 import { IonItem, IonList, IonThumbnail } from '@ionic/angular/standalone';
 import { CloudObject, CloudQuery } from 'src/lib/ncloud';
@@ -11,7 +13,7 @@ import { CloudObject, CloudQuery } from 'src/lib/ncloud';
   styleUrls: ['./knowledge-page.component.scss'],
   standalone: true,
   imports: [
-    CommonModule, IonList, IonItem, IonThumbnail, IonContent
+    CommonModule, IonList, IonItem, IonThumbnail, IonContent, IonHeader, IonToolbar, IonButtons, IonBackButton
   ]
 })
 export class KnowledgePageComponent implements OnInit {

mcbridge-app/src/app/knowledge/knowledge-page1/knowledge-page1.component.html

@@ -0,0 +1,21 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/knowledge-total"></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+
+<ion-content>
+  <ion-list>
+    <ion-item lines="none">
+      <div class="doctor-info">
+        <h1>{{ knowledge?.get('title') }}</h1>
+        <h3>{{ knowledge?.get('author') }}</h3>
+        <p>{{ knowledge?.get('content') }}</p>
+        <p><span>出处：</span> {{ knowledge?.get('source') }}</p>
+      </div>
+    </ion-item>
+  </ion-list>
+</ion-content>

mcbridge-app/src/app/knowledge/knowledge-page1/knowledge-page1.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { KnowledgePage1Component } from './knowledge-page1.component';
+
+describe('KnowledgePage1Component', () => {
+  let component: KnowledgePage1Component;
+  let fixture: ComponentFixture<KnowledgePage1Component>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [KnowledgePage1Component],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(KnowledgePage1Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mcbridge-app/src/app/knowledge/knowledge-page1/knowledge-page1.component.ts

@@ -0,0 +1,47 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { IonButtons, IonHeader, IonToolbar } from '@ionic/angular/standalone';
+import { IonBackButton } from '@ionic/angular/standalone';
+import { IonContent } from '@ionic/angular/standalone';
+import { IonItem, IonList, IonThumbnail } from '@ionic/angular/standalone';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-knowledge-page1',
+  templateUrl: './knowledge-page1.component.html',
+  styleUrls: ['./knowledge-page1.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule, IonList, IonItem, IonThumbnail, IonContent, IonHeader, IonToolbar, IonButtons, IonBackButton
+  ]
+})
+export class KnowledgePage1Component  implements OnInit {
+
+  knowledge: CloudObject | null = null; // 初始化为 null
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit() {
+    const objectId = this.route.snapshot.paramMap.get('id'); // 获取传递的 ObjectId
+    if (objectId) { // 检查 objectId 是否为 null
+      this.loadKnowledge(objectId); // 加载对应的知识信息
+    } else {
+      console.error("No ObjectId found in route parameters.");
+    }
+  }
+
+  async loadKnowledge(objectId: string) {
+    let query = new CloudQuery("Knowledge");
+    query.equalTo("title", objectId); // 根据 ObjectId 查询
+    const knowledge = await query.first(); // 获取单条记录
+    if (knowledge) {
+      this.knowledge = knowledge; // 将获取的知识信息赋值给 knowledge 属性
+    } else {
+      console.error("Knowledge not found for ObjectId:", objectId);
+      // 可以考虑在这里处理找不到知识的情况，比如导航到错误页面或者显示提示
+    }
+  }
+
+
+}

mcbridge-app/src/app/knowledge/knowledge-total/knowledge-total.component.html

@@ -1,8 +1,9 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      热点资讯
-    </ion-title>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
+    </ion-buttons>
+    <ion-title>热点资讯</ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -17,7 +18,7 @@
   </ion-segment>
   <ion-segment-view>
     <ion-segment-content id="first">
-      <div class="tradSearch">
+      <!-- <div class="tradSearch">
         <dl class="srhGroup clear">
           <dt>类型</dt>
           <dd class="horizontal-links">
@@ -26,7 +27,7 @@
             <p>壁画</p>
           </dd>
         </dl>
-      </div>
+      </div> -->
 
       <ion-card>
         <ion-card-content>
@@ -47,20 +48,25 @@
 
     </ion-segment-content>
     <ion-segment-content id="second">
+
       <ion-card>
         <ion-card-content>
           <ion-list>
-            <ion-item *ngFor="let knowledge of knowledgeList" lines="none" class="doctor-item">
-              @if(knowledge.get('video')){
-                <video id="video" controls>
-                <source src="{{ knowledge?.get('video') }}" type="video/mp4">
-                您的浏览器不支持视频标签。
-              </video>
-            }
+            <ion-item *ngFor="let vknowledge of vknowledgeList" lines="none" class="doctor-item"
+              (click)="goToVKnowledge(vknowledge)">
+              <ion-thumbnail slot="start">
+                <img [src]="vknowledge.get('img')" [alt]="vknowledge.get('title')" />
+              </ion-thumbnail>
+              <div class="doctor-info">
+                <h3>{{ vknowledge.get('title') }}</h3>
+                <p>{{ vknowledge?.get('author') }}</p>
+                <p>{{ vknowledge?.get('video') }}</p>
+              </div>
             </ion-item>
           </ion-list>
         </ion-card-content>
       </ion-card>
+
     </ion-segment-content>
   </ion-segment-view>
 </ion-content>

mcbridge-app/src/app/knowledge/knowledge-total/knowledge-total.component.ts

@@ -1,11 +1,16 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { IonBackButton, IonButtons, IonIcon } from '@ionic/angular/standalone';
 import { IonCard, IonCardContent, IonItem, IonList, IonThumbnail } from '@ionic/angular/standalone';
 import { IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView } from '@ionic/angular/standalone';
 import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { arrowBackOutline } from 'ionicons/icons';
 import { CloudObject, CloudQuery } from 'src/lib/ncloud';
 
+addIcons({ arrowBackOutline })
+
 @Component({
   selector: 'app-knowledge-total',
   templateUrl: './knowledge-total.component.html',
@@ -13,30 +18,46 @@ import { CloudObject, CloudQuery } from 'src/lib/ncloud';
   standalone: true,
   imports: [
     IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonLabel, IonSegmentView, IonSegmentContent,
-    IonThumbnail, CommonModule, IonCard, IonCardContent, IonList, IonItem
+    IonThumbnail, CommonModule, IonCard, IonCardContent, IonList, IonItem, IonIcon, IonButtons, IonBackButton
   ]
 })
-export class KnowledgeTotalComponent  implements OnInit {
-
-   constructor(private router: Router) {} 
-
-     goToKnowledge(knowledge: CloudObject){
-       const objectId = knowledge.get('title'); // 假设你的主键字段为 'title'
-       this.router.navigate(['/tabs/knowledge-page', { id: objectId }]);
-     }
-
-    ngOnInit() {
-      // 生命周期：页面加载后，运行医生列表加载函数
-      this.loadKnowledgeList()
-    }
-  
-    // 创建用于数据列表存储的属性
-    knowledgeList:Array<CloudObject> = []
-    // 查询并加载医生列表的函数
-    async loadKnowledgeList(){
-      let query = new CloudQuery("Knowledge");
-      this.knowledgeList = await query.find()
-    }
+export class KnowledgeTotalComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  goToKnowledge(knowledge: CloudObject) {
+    const objectId = knowledge.get('title'); // 假设你的主键字段为 'title'
+    this.router.navigate(['/tabs/knowledge-page1', { id: objectId }]);
+  }
+
+  goToVKnowledge(knowledge: CloudObject) {
+    const objectId = knowledge.get('title'); // 假设你的主键字段为 'title'
+    this.router.navigate(['/tabs/knowledge-video', { id: objectId }]);
+  }
+
+
+  ngOnInit() {
+    // 生命周期：页面加载后，运行医生列表加载函数
+    this.loadKnowledgeList()
+
+    this.loadVKnowledgeList()
+  }
+
+  // 创建用于数据列表存储的属性
+  knowledgeList: Array<CloudObject> = []
+  // 查询并加载医生列表的函数
+  async loadKnowledgeList() {
+    let query = new CloudQuery("Knowledge");
+    this.knowledgeList = await query.find()
+  }
+
 
+  // 创建用于数据列表存储的属性
+  vknowledgeList: Array<CloudObject> = []
+  // 查询并加载医生列表的函数
+  async loadVKnowledgeList() {
+    let query = new CloudQuery("videoknowledge");
+    this.vknowledgeList = await query.find()
+  }
 
 }

mcbridge-app/src/app/knowledge/knowledge-video/knowledge-video.component.html

@@ -0,0 +1,23 @@
+<ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button defaultHref="/tabs/knowledge-total"></ion-back-button>
+      </ion-buttons>
+      <ion-title></ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+<ion-content>
+    <ion-list>
+        <ion-item lines="none">
+            <div class="doctor-info">
+                <video id="video" controls>
+                    <source src="{{ knowledge?.get('video') }}" type="video/mp4">
+                    您的浏览器不支持视频标签。
+                </video>
+                <h3 style="text-align: center;">{{ knowledge?.get('title') }}</h3>
+                <p>{{ knowledge?.get('content') }}</p>
+            </div>
+        </ion-item>
+    </ion-list>
+</ion-content>

mcbridge-app/src/app/knowledge/knowledge-video/knowledge-video.component.scss

@@ -0,0 +1,5 @@
+video{
+    width: 380px;
+    height: 200px;
+    margin: 10px;
+}

mcbridge-app/src/app/knowledge/knowledge-video/knowledge-video.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { KnowledgeVideoComponent } from './knowledge-video.component';
+
+describe('KnowledgeVideoComponent', () => {
+  let component: KnowledgeVideoComponent;
+  let fixture: ComponentFixture<KnowledgeVideoComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [KnowledgeVideoComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(KnowledgeVideoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mcbridge-app/src/app/knowledge/knowledge-video/knowledge-video.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { IonBackButton, IonButtons, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonIcon } from '@ionic/angular/standalone';
+import { IonHeader } from '@ionic/angular/standalone';
+import { IonContent, IonItem, IonList } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { arrowBackOutline } from 'ionicons/icons';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+
+addIcons({ arrowBackOutline })
+
+@Component({
+  selector: 'app-knowledge-video',
+  templateUrl: './knowledge-video.component.html',
+  styleUrls: ['./knowledge-video.component.scss'],
+  standalone: true,
+  imports: [
+    IonContent, IonList, IonItem,IonHeader, IonIcon, IonTitle, IonToolbar, IonButtons, IonBackButton
+  ]
+})
+export class KnowledgeVideoComponent  implements OnInit {
+
+  knowledge: CloudObject | null = null; // 初始化为 null
+
+  constructor(private route: ActivatedRoute, private loute: Router) {}
+
+  ngOnInit() {
+    const objectId = this.route.snapshot.paramMap.get('id'); // 获取传递的 ObjectId
+    if (objectId) { // 检查 objectId 是否为 null
+      this.loadKnowledge(objectId); // 加载对应的知识信息
+    } else {
+      console.error("No ObjectId found in route parameters.");
+    }
+  }
+
+  async loadKnowledge(objectId: string) {
+    let query = new CloudQuery("videoknowledge");
+    query.equalTo("title", objectId); // 根据 ObjectId 查询
+    const knowledge = await query.first(); // 获取单条记录
+    if (knowledge) {
+      this.knowledge = knowledge; // 将获取的知识信息赋值给 knowledge 属性
+    } else {
+      console.error("Knowledge not found for ObjectId:", objectId);
+      // 可以考虑在这里处理找不到知识的情况，比如导航到错误页面或者显示提示
+    }
+  }
+
+  goToLastPage(){
+    this.loute.navigate(['/tabs/knowledge-total'])
+  }
+
+}

mcbridge-app/src/app/tab1/tab1.page.html

@@ -1,50 +1,47 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      医护云桥APP
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
 <ion-content [fullscreen]="true">
   <!-- 添加搜索框 -->
-  <ion-searchbar placeholder="搜索..." (ionInput)="search($event)"></ion-searchbar>
+  <ion-searchbar placeholder="搜索..." (ionInput)="search($event)">
+
+  </ion-searchbar>
 
-  <!-- 按钮容器 -->
-  <!-- <div class="button-container">
-    <ion-button  size="large" color="light" (click)="goToPage1()">
-      智能诊疗
-    </ion-button>
-    <ion-button  size="large" color="light" (click)="goToPage2()">
-      相似症状图查询
-    </ion-button>
-  </div> -->
 
   <div class="button-row1">
     <ion-button expand="full" fill="outline" color="light" (click)="goToPage1()">
-      <img src="https://s2.loli.net/2024/12/22/zZGij36foMSFhkB.png" alt="报病查诊" class="button-icon" />
-      <!-- <span style="color: black;">智能诊疗</span> -->
+      <img src="https://s2.loli.net/2024/12/22/sUMkpe2LqnmCxRo.png" alt="报病查诊" class="button-icon" />
+      <span >智能诊疗</span>
     </ion-button>
+
     <ion-button expand="full" fill="outline" color="light" (click)="goToPage2()">
-      <img src="../../assets/image/屏幕截图 2024-12-21 211238.png" alt="预约记录" class="button-icon" />
+     <img src="https://s2.loli.net/2024/12/22/mvLC76a9nYf5sXb.png" alt="预约记录" class="button-icon" />
+     <span >症状查询</span>
     </ion-button>
+
     <ion-button expand="full" fill="outline" color="light" routerLink="/discussions">
-      <img src="../../assets/image/屏幕截图 2024-12-21 211252.png" alt="讨论记录" class="button-icon" />
+      <img src="https://s2.loli.net/2024/12/22/mvLC76a9nYf5sXb.png" alt="讨论记录" class="button-icon" />
+      <span >电子病历</span>
     </ion-button>
   </div>
 
   <div class="button-row2">
     <ion-button expand="full" fill="outline" color="light" routerLink="/tabs/inquiry">
-      <img src="https://sm.ms/image/zZGij36foMSFhkB" alt="报病查诊" class="button-icon" />
+      <img src="https://s2.loli.net/2024/12/22/rswh2qgoJt1FX3x.png" alt="报病查诊" class="button-icon" />
+      <span >药品百科</span>
     </ion-button>
     <ion-button expand="full" fill="outline" color="light" routerLink="/appointments">
-      <img src="../../assets/image/屏幕截图 2024-12-21 211345.png" alt="预约记录" class="button-icon" />
+      <img src="https://s2.loli.net/2024/12/22/VAiBb7lGp2RLjSO.png" alt="预约记录" class="button-icon" />
+      <span >预约挂号</span>
     </ion-button>
     <ion-button expand="full" fill="outline" color="light" routerLink="/discussions">
-      <img src="../../assets/image/屏幕截图 2024-12-21 211429.png" alt="讨论记录" class="button-icon" />
+     <img src="https://s2.loli.net/2024/12/22/GPOgHbex6jWXD4m.png" alt="讨论记录" class="button-icon" />
+     <span >急救指南</span>
     </ion-button>
   </div>
 
+
+
+
+
+
   <!-- 轮播图区域 -->
   <div class="carousel-container">
     <div class="carousel" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
@@ -62,36 +59,18 @@
     </div>
   </div>
 
-  <!-- 页面内容 -->
-  <!-- <ion-card *ngFor="let item of items">  
-    <img [src]="item.image" alt="{{ item.title }}" />  
-    <ion-card-header>  
-      <ion-card-title>{{ item.title }}</ion-card-title>   
-    </ion-card-header>  
-    <ion-card-content>  
-      {{ item.description }}  
-    </ion-card-content>  
-    <edit-rating-star 
-    [score]="currentScore" 
-    [scoreMax]="5" 
-    (onScoreChange)="handleScoreChange($event)">
-  </edit-rating-star>
-  
-  </ion-card>   -->
 
   <!-- 知识模块 -->
-  <ion-card>
-    <ion-card-header>
+
+    <ion-card-header >
       <ion-card-title>
-        <!-- <ion-label>热点咨询</ion-label>
-        <ion-icon slot="end" name="ellipsis-horizontal-outline"></ion-icon> -->
-        <ion-item >
+        <ion-item class="hot">
           <ion-label>热点资讯</ion-label>
           <ion-icon slot="end" name="ellipsis-horizontal-outline" (click)="goToKnowledgeTotal()"></ion-icon>
         </ion-item>
       </ion-card-title>
     </ion-card-header>
-    <ion-card-content>
+
       <ion-list>
         <ion-item *ngFor="let knowledge of knowledgeList" lines="none" class="doctor-item" (click)="goToKnowledge(knowledge)">
           <ion-thumbnail slot="start">
@@ -103,28 +82,8 @@
           </div>
         </ion-item>
       </ion-list>
-    </ion-card-content>
-  </ion-card>
-
-
-  <!-- <ion-list>
-    <ion-item>
-      <ion-label>
-        <h2>关于我们</h2>
-        <p>我们致力于为医护人员提供最佳支持，帮助他们更高效地工作。</p>
-      </ion-label>
-    </ion-item>
-    <ion-item lines="none">
-      <ion-label>
-        <h2>联系我们</h2>
-        <p>如果您有任何问题，请随时与我们联系！</p>
-      </ion-label>
-    </ion-item>
-  </ion-list>
-
-  <ion-footer>
-    <ion-toolbar>
-      <ion-title>© 2024 医护云桥</ion-title>
-    </ion-toolbar>
-  </ion-footer> -->
+
+    
+  
+
 </ion-content>

mcbridge-app/src/app/tab1/tab1.page.scss

@@ -1,3 +1,17 @@
+ion-content::part(background) {
+  background-image: url('../../assets/image/医护云桥tab2.jpg'); /* 替换为您的背景图路径 */
+  height: 490px;
+}
+
+ion-title p {
+  margin: 0; /* 去除默认的段落外边距 */
+  font-size: 20px; /* 标题字体大小 */
+  font-weight: 500; /* 字体权重 */
+  color: #c91a86; /* 深色字体，突出标题 */
+  text-align: center; /* 标题居中 */
+}
+
+
 ion-searchbar {  
     --background: #f8f9fa;  
     --border-radius: 8px;  
@@ -5,8 +19,35 @@ ion-searchbar {
     margin: 16px 30px 16px 0px;  
     padding: 0 16px;  
     height: 50px;  
+    font-size: 16px; /* 增加字体大小 */
+    color: #3c89c8; /* 增加字体颜色 */
   }  
 
+//搜索小组件
+ion-searchbar::part(search-icon) {
+  color: #666666; /* 搜索图标颜色 */
+}
+.button-container {
+  display: flex;
+  justify-content: space-between; /* 在按钮之间留出空间 */
+  margin-top: 10px; /* 可选，调整按钮的上边距 */
+}
+.button-container_2 {
+  display: flex;
+  justify-content: space-between; /* 在按钮之间留出空间 */
+  margin-top: 10px; /* 可选，调整按钮的上边距 */
+}
+.button-container_3 {
+  display: flex;
+  justify-content: space-between; /* 在按钮之间留出空间 */
+  margin-top: 10px; /* 可选，调整按钮的上边距 */
+}
+ion-button p{
+  font-size: 20px; /* 标题字体大小 */
+  font-weight: 500; /* 字体权重 */
+  color: #ffffff; /* 深色字体，突出标题 */
+  text-align: center; /* 标题居中 */
+}
   // 按钮区域
     /* 按钮行样式 */
     .button-row1 {
@@ -18,10 +59,10 @@ ion-searchbar {
     
     .button-row1 ion-button {
       flex: 1; /* 使按钮均匀分布 */
-      margin: 10px 20px 0px 20px; /* 按钮之间的间距 */
-      flex-basis: 90px; /* 设置按钮的基础宽度 */
-      min-width: 90px; /* 设置按钮的最小宽度 */
-      max-width: 120px; /* 设置按钮的最大宽度 */
+      margin: 4px; /* 按钮之间的间距 */
+    flex-basis: 80px; /* 设置按钮的基础宽度 */
+    min-width: 80px; /* 设置按钮的最小宽度 */
+    max-width: 50px; /* 设置按钮的最大宽度 */
     }
   
       /* 按钮行样式 */
@@ -34,54 +75,33 @@ ion-searchbar {
   .button-row2 ion-button {
     flex: 1; /* 使按钮均匀分布 */
     margin: 4px; /* 按钮之间的间距 */
-    margin: 10px 20px 0px 20px; /* 按钮之间的间距 */
-    flex-basis: 90px; /* 设置按钮的基础宽度 */
-    min-width: 90px; /* 设置按钮的最小宽度 */
+    flex-basis: 80px; /* 设置按钮的基础宽度 */
+    min-width: 80px; /* 设置按钮的最小宽度 */
     max-width: 50px; /* 设置按钮的最大宽度 */
   }
   
-  .button-icon {
-    max-width: 100%; /* 确保图片不会超出按钮的宽度 */
-    height: auto; /* 保持图片的纵横比 */
-    // width: 300px;
-    // height: auto;
+
+  ion-list {
+    // background-image: url('../../assets/image/tab1主页.jpg'); /* 替换为您的背景图路径 */
+    background-size: cover; /* 确保背景图覆盖整个列表区域 */
+    background-position: center; /* 背景图居中显示 */
+    background-repeat: no-repeat; /* 防止背景图重复 */
+    padding: 10px; /* 为内容提供一些内边距 */
+    background-color:transparent;
   }
-  
 
-  // ...
-  ion-card {  
-    margin: 10px 0px 10px 0px;  
-  }  
-  
-  // ion-card img {  
-  //   width: 400px;
-  //   height:auto;  
-  //   border-top-left-radius: 8px;  
-  //   border-top-right-radius: 8px;  
-  // }  
-  
-  // ion-item {  
-  //   --background: #ffffff;  
-  //   margin: 10px 0;  
-  // }
+
 
   ion-button{
-    background-color: #f8f9fa;
+    border-radius: 200px;
   }
 
-  // .button-container {
-  //   display: flex;
-  //   justify-content: space-between; /* 在按钮之间留出空间 */
-  //   margin-top: 10px; /* 可选，调整按钮的上边距 */
-  //   margin-bottom: 10px;
-  // }
-  
-  // .button-container ion-button {
-  //   flex: 1; /* 每个按钮占据相同的空间 */
-  //   margin: 0 5px; /* 按钮之间的间距 */
-  //   color: #f8f9fa;
-  //   background-color: #f9faf8;
-  // }
+  ion-button p{
+    font-size: 20px; /* 标题字体大小 */
+    font-weight: 500; /* 字体权重 */
+    color: #ffffff; /* 深色字体，突出标题 */
+    text-align: center; /* 标题居中 */
+  }
 
 // 轮播图区域
 .carousel-container {
@@ -98,7 +118,7 @@ ion-searchbar {
 
 .slide {
   min-width: 100%;
-  height: 100px;
+  height: 150px;
 }
 
 .slide img {
@@ -147,7 +167,14 @@ ion-searchbar {
   background: #717171;
 } 
 
+
+
 // 知识区域
+.hot{
+  width: 370px;
+  margin: 5px 10px 0px 10px;
+}
+
 .doctor-item {
   display: flex;
   align-items: center;
@@ -170,4 +197,9 @@ ion-searchbar {
 .doctor-info p {
   margin: 5px 0; /* 增加段落之间的间距 */
   color: #666; /* 调整字体颜色 */
+}
+
+span {
+  font-size: 18px; /* 设置字体大小为18像素 */
+  color: #c91a86; /* 设置字体颜色为深粉色，您可以根据需要更改颜色代码 */
 }

mcbridge-app/src/app/tab1/tab1.page.ts

@@ -33,9 +33,9 @@ export class Tab1Page {
   * 轮播图
   */
   images = [
-    'https://tse4-mm.cn.bing.net/th/id/OIP-C.ftxfzO1D7K0DPPP4JyNLZgHaE7?w=284&h=189&c=7&r=0&o=5&dpr=1.5&pid=1.7',
-    'https://tse1-mm.cn.bing.net/th/id/OIP-C.X4C6ZFTyBCDkb9-aen-XEAHaE7?w=288&h=191&c=7&r=0&o=5&dpr=1.5&pid=1.7',
-    'https://tse1-mm.cn.bing.net/th/id/OIP-C.nYsEpi5tMgJ1toyq77tzFwHaE8?w=296&h=197&c=7&r=0&o=5&dpr=1.5&pid=1.7',
+    'https://s2.loli.net/2024/12/22/lE4XKeWr6v8jTqa.png',
+    'https://s2.loli.net/2024/12/22/9v1bO8A4sESxWV6.png',
+    'https://s2.loli.net/2024/12/22/I28ScHtd5jnULyo.png',
   ];
   currentSlide = 0;
   intervalId: any;
@@ -119,7 +119,7 @@ export class Tab1Page {
     async loadKnowledgeList(){
       let query = new CloudQuery("Knowledge");
       const allKnowledge = await query.find();
-      this.knowledgeList = allKnowledge.slice(0, 3);
+      this.knowledgeList = allKnowledge.slice(0, 4);
     }
 
 

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

@@ -1,29 +1,12 @@
-<!-- <ion-menu contentId="main-content">
-  <ion-header>
-    <ion-toolbar>
-      <ion-title>Menu Content</ion-title>
-    </ion-toolbar>
-  </ion-header>
-  <ion-content class="ion-padding">This is the menu content.</ion-content>
-</ion-menu>
-<div class="ion-page" id="main-content">
-  <ion-header>
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-menu-button></ion-menu-button>
-      </ion-buttons>
-      <ion-title>Menu</ion-title>
-    </ion-toolbar>
-  </ion-header>
-  <ion-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
-</div> -->
-
 <ion-content>
   <div class="profile-container">
+
     <div class="user-info">
-    <!-- 个人信息 -->
-    @if(!currentUser?.id){
-      <img src="https://cdn.wantuju.com/pngsucai/imgRegular/20210801/ea7d60e8-133f-40b9-9f12-4ad402c97c62%20_63338_wantuju.jpg" alt="用户头像" class="avatar" />
+      <!-- 个人信息 -->
+      @if(!currentUser?.id){
+      <img
+        src="https://cdn.wantuju.com/pngsucai/imgRegular/20210801/ea7d60e8-133f-40b9-9f12-4ad402c97c62%20_63338_wantuju.jpg"
+        alt="用户头像" class="avatar" />
       <div class="user-details">
         <h2>昵称</h2>
         <p>基本信息：年龄、性别等</p>
@@ -31,125 +14,121 @@
       <div class="auth-text">
         <span class="login" (click)="login()">登录</span>/
         <span class="register" (click)="signup()">注册</span>
-      </div>      
-    }
-    @if(currentUser?.id){
+      </div>
+      }
+      @if(currentUser?.id){
       <img [src]="currentUser?.get('avatar')|| '../../assets/image/doctor7.png'" alt="头像" class="avatar" />
-        <div class="user-details">
-          <h2>{{currentUser?.get("username")}}</h2>
-          <p>性别:{{currentUser?.get("gender")||"-"}} 年龄:{{currentUser?.get("age")||"-"}}</p>
-        </div>
-        <!-- <div class="auth-text">
-          <span class="edituser" (click)="editUser()">编辑资料</span>
-        </div>    -->
-    }
+      <div class="user-details">
+        <h2>{{currentUser?.get("username")}}</h2>
+        <p>性别:{{currentUser?.get("gender")||"-"}} 年龄:{{currentUser?.get("age")||"-"}}</p>
+      </div>
+      }
     </div>
 
     <!-- 医疗服务 -->
-      <ion-card-header>
-        <ion-card-title>医疗服务</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <div class="button-row">
-          <ion-button expand="full" fill="outline" color="light" routerLink="/tabs/inquiry">
-            <img src="https://img.tukuppt.com/png_preview/00/06/02/Ci3mfMQItP.jpg!/fw/780" alt="报病查诊" class="button-icon"/>
-          </ion-button>
-          <ion-button expand="full" fill="outline" color="light" routerLink="/appointments">
-            <img src="assets/appointments.png" alt="预约记录" class="button-icon" />
-          </ion-button>
-          <ion-button expand="full" fill="outline" color="light" routerLink="/discussions">
-            <img src="assets/discussions.png" alt="讨论记录" class="button-icon" />
-          </ion-button>
-          <ion-button expand="full" fill="outline" color="light" routerLink="/doctors">
-            <img src="assets/doctors.png" alt="关注的医生" class="button-icon" />
-          </ion-button>
-        </div>
-      </ion-card-content>
+    <ion-card-header>
+      <ion-card-title>医疗服务</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <div class="button-row">
+        <ion-button expand="full" fill="outline" color="light" routerLink="/tabs/inquiry">
+          <img src="https://s2.loli.net/2024/12/22/E8MtQxYUqd52ojT.png" alt="报病查诊" class="button-icon"/>
+          <span>门诊服务</span>
+        </ion-button>
+        <ion-button expand="full" fill="outline" color="light" routerLink="/appointments">
+          <img src="https://s2.loli.net/2024/12/22/BioXWPwmzSI5uY4.png" alt="预约记录" class="button-icon" />
+          <span>急诊服务</span>
+        </ion-button>
+        <ion-button expand="full" fill="outline" color="light" routerLink="/discussions">
+          <img src="https://s2.loli.net/2024/12/22/v2QYj6NdJVEpnlk.png" alt="讨论记录" class="button-icon" />
+          <span>住院治疗</span>
+        </ion-button>
+        <ion-button expand="full" fill="outline" color="light" routerLink="/doctors">
+          <img src="https://s2.loli.net/2024/12/22/qdl95uJwIY23HVr.png" alt="关注的医生" class="button-icon" />
+          <span>预防保健</span>
+        </ion-button>
+      </div>
+    </ion-card-content>
 
     <!-- 医生关注 -->
-      <ion-card-header>
-        <ion-card-title>关注的医生</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        @if(!currentUser?.id){
-          <P>请登录后查看...</P>
-        }
-        @if(currentUser?.id){
-        <ion-list>
-          <ion-item *ngFor="let expert of expertList" lines="none" class="doctor-item">
-            <ion-thumbnail slot="start">
-              <img [src]="expert.get('avatar')" [alt]="expert.get('name')" />
-            </ion-thumbnail>
-            <div class="doctor-info">
-              <h3>{{ expert.get('name') }}({{ expert.get('age') }}岁)</h3>
-              <p>{{ expert.get('title') }} {{ expert.get('specialist') }}</p>
-            </div>
-          </ion-item>
-        </ion-list>
+    <ion-card-header>
+      <ion-card-title>关注的医生</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      @if(!currentUser?.id){
+      <P>请登录后查看...</P>
       }
-      </ion-card-content>
+      @if(currentUser?.id){
+      <ion-list>
+        <ion-item *ngFor="let expert of expertList" lines="none" class="doctor-item">
+          <ion-thumbnail slot="start">
+            <img [src]="expert.get('avatar')" [alt]="expert.get('name')" />
+          </ion-thumbnail>
+          <div class="doctor-info">
+            <h3>{{ expert.get('name') }}({{ expert.get('age') }}岁)</h3>
+            <p>{{ expert.get('title') }} {{ expert.get('specialist') }}</p>
+          </div>
+        </ion-item>
+      </ion-list>
+      }
+    </ion-card-content>
 
     <!-- 常用服务 -->
-      <ion-card-header>
-        <ion-card-title>常用服务</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-list>
-          <ion-item button routerLink="/bills">
-            <ion-label>我的账单</ion-label>
-            <ion-icon slot="end" name="chevron-forward"></ion-icon>
-          </ion-item>
-          <ion-item button routerLink="/orders">
-            <ion-label>商城订单</ion-label>
-            <ion-icon slot="end" name="chevron-forward"></ion-icon>
-          </ion-item>
-          <ion-item button routerLink="/checkups">
-            <ion-label>体检订单</ion-label>
-            <ion-icon slot="end" name="chevron-forward"></ion-icon>
-          </ion-item>
-        </ion-list>
-      </ion-card-content>
+    <ion-card-header >
+      <ion-card-title>常用服务</ion-card-title>
+    </ion-card-header>
+    <ion-card-content >
+
+      <ion-item button routerLink="/bills">
+        <ion-label>我的账单</ion-label>
+        <ion-icon slot="end" name="chevron-forward"></ion-icon>
+      </ion-item>
+      <ion-item button routerLink="/orders">
+        <ion-label>商城订单</ion-label>
+        <ion-icon slot="end" name="chevron-forward"></ion-icon>
+      </ion-item>
+      <ion-item button routerLink="/checkups">
+        <ion-label>体检订单</ion-label>
+        <ion-icon slot="end" name="chevron-forward"></ion-icon>
+      </ion-item>
+
+    </ion-card-content>
+
+    <ion-card-content>
+
+      @if(!currentUser?.id){
+      <ion-item button id="err">
+        <ion-label>个人信息</ion-label>
+        <ion-icon slot="end" name="chevron-forward"></ion-icon>
+        <ion-alert trigger="err" header="注意" message="你还未登录，请先登录！" [buttons]="alertButtons"></ion-alert>
+      </ion-item>
+      }
+      @if(currentUser?.id){
+      <ion-item button (click)="editUser()">
+        <ion-label>个人信息</ion-label>
+        <ion-icon slot="end" name="chevron-forward"></ion-icon>
+      </ion-item>
+      }
+      <ion-item button routerLink="/we">
+        <ion-label>关于我们</ion-label>
+        <ion-icon slot="end" name="chevron-forward"></ion-icon>
+      </ion-item>
+      <ion-item button routerLink="/fankui">
+        <ion-label>帮助与反馈</ion-label>
+        <ion-icon slot="end" name="chevron-forward"></ion-icon>
+      </ion-item>
+      <ion-item button routerLink="/shezhi">
+        <ion-label>设置</ion-label>
+        <ion-icon slot="end" name="chevron-forward"></ion-icon>
+      </ion-item>
 
-      <ion-card-content>
-        <ion-list>
-          @if(!currentUser?.id){          
-          <ion-item button id="err">
-            <ion-label>个人信息</ion-label>
-            <ion-icon slot="end" name="chevron-forward"></ion-icon>
-            <ion-alert
-            trigger="err"
-            header="注意"
-            message="你还未登录，请先登录！"
-            [buttons]="alertButtons"
-          ></ion-alert>
-          </ion-item>
-        }
-        @if(currentUser?.id){
-          <ion-item button (click)="editUser()">
-            <ion-label>个人信息</ion-label>
-            <ion-icon slot="end" name="chevron-forward"></ion-icon>
-          </ion-item>
-        }
-          <ion-item button routerLink="/we">
-            <ion-label>关于我们</ion-label>
-            <ion-icon slot="end" name="chevron-forward"></ion-icon>
-          </ion-item>
-          <ion-item button routerLink="/fankui">
-            <ion-label>帮助与反馈</ion-label>
-            <ion-icon slot="end" name="chevron-forward"></ion-icon>
-          </ion-item>
-          <ion-item button routerLink="/shezhi">
-            <ion-label>设置</ion-label>
-            <ion-icon slot="end" name="chevron-forward"></ion-icon>
-          </ion-item>
-        </ion-list>
-      </ion-card-content>
+    </ion-card-content>
 
   </div>
 
 
 </ion-content>
 
-    @if(currentUser?.id){
-  <ion-button  (click)="logout()" color="light">登出</ion-button>
+@if(currentUser?.id){
+<ion-button (click)="logout()" color="light">登出</ion-button>
 }

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

@@ -1,4 +1,8 @@
 
+// ion-content::part(background) {
+//   background-image: url('../../assets/image/医护云桥tab2.jpg'); /* 替换为您的背景图路径 */
+//   height: 896px;
+// }
 
 .profile-container {
     padding: 16px;
@@ -29,18 +33,16 @@
   ion-card-title {
     margin: 0px 0;
     font-size: 20px;
+    color: #0f7886;
   }
   
-  ion-item {
-    --background: transparent; /* 使按钮背景透明 */
-    --box-shadow: none; /* 去掉卡片阴影 */
-  }
+  // ion-item {
+  //   --border-radius: 10px; // 设置按钮的圆角
+  //   --background:rgb(23, 206, 209); /* 使按钮背景透明 */
+  //   --box-shadow: none; /* 去掉卡片阴影 */
+  // }
+  
 
-  /* 设置顶部工具栏的背景颜色为白色 */
-ion-toolbar {
-    --background: transparent;
-    --color: black; /* 设置文字颜色为黑色 */
-  }
 
   /* 按钮行样式 */
 .button-row {
@@ -84,4 +86,37 @@ ion-toolbar {
   .doctor-info p {
     margin: 5px 0; /* 增加段落之间的间距 */
     color: #666; /* 调整字体颜色 */
-  }
+  }
+
+
+
+  span {
+    font-size: 18px; /* 设置字体大小为18像素 */
+    color: #c91a86; /* 设置字体颜色为深粉色，您可以根据需要更改颜色代码 */
+  }
+
+
+  // 为 ion-card 容器添加一些基本样式
+ion-card-content {
+  --background: #3ec690; // 设置背景颜色为白色
+  --border-radius: 10px; // 设置圆角
+  margin: 10px; // 外边距
+  padding: 10px; // 内边距
+}
+
+// 为 ion-button 添加圆角和轻快的样式
+.button-row ion-button {
+  --border-radius: 10px; // 设置按钮的圆角
+  --background: #f0f8ff; // 设置按钮背景颜色为浅蓝色，给人轻快的感觉
+  --color: #007bff; // 设置按钮文本颜色
+  --border-color: #007bff; // 设置按钮边框颜色
+  border-width: 1px; // 设置边框宽度
+  margin: 5px; // 按钮之间的外边距
+  transition: background-color 0.3s, color 0.3s; // 添加背景和颜色的过渡效果
+
+  &:hover {
+    --background: #0f7886; // 鼠标悬停时的背景颜色
+  }
+
+
+}

mcbridge-app/src/app/tabs/tabs.routes.ts

@@ -41,6 +41,16 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../knowledge/knowledge-total/knowledge-total.component').then((m) => m.KnowledgeTotalComponent),
       },
+      {
+        path: 'knowledge-video',
+        loadComponent: () =>
+          import('../knowledge/knowledge-video/knowledge-video.component').then((m) => m.KnowledgeVideoComponent),
+      },
+      {
+        path: 'knowledge-page1',
+        loadComponent: () =>
+          import('../knowledge/knowledge-page1/knowledge-page1.component').then((m) => m.KnowledgePage1Component),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',