提交内容的备注信息

src/app/tab1/tab1.page.html

@@ -53,22 +53,28 @@
     </div>
   </div>
 
-  <!-- 推荐医生区域 -->
-  <div class="recommended-doctors">
-    <div class="header">
-      <div class="title">今日推荐医生</div>
-      <div class="subtitle">每日更新</div>
-    </div>
-    <div class="scroll-container">
-      <div class="card" *ngFor="let doctor of doctors">
+ <!-- 推荐医生区域 -->
+<div class="recommended-doctors">
+  <div class="header">
+    <div class="title">今日推荐医生</div>
+    <div class="subtitle">每日更新</div>
+  </div>
+  <div class="scroll-container" id="carousel">
+    <ng-container *ngFor="let doctor of doctors; let i = index">
+      <div class="card" [ngStyle]="{ transform: 'translateX(' + (i - currentIndex) * 100 + '%)' }">
         <div class="tag">专家</div>
-        <img src="{{ doctor.avatar }}" alt="Doctor Avatar" class="avatars" />
+        <img src="{{ doctor.avatar }}" alt="Doctor Avatar" class="avatar" />
         <div class="name">{{ doctor.name }}</div>
         <div class="specialty">{{ doctor.specialty }}</div>
         <ion-button expand="full" color="primary">在线咨询</ion-button>
       </div>
-    </div>
+    </ng-container>
+  </div>
+  <div class="controls">
+    <button (click)="prevSlide()">上一张</button>
+    <button (click)="nextSlide()">下一张</button>
   </div>
+</div>
   
   <!-- 其他页面内容 -->
 </ion-content>

src/app/tab1/tab1.page.scss

@@ -149,98 +149,119 @@ ion-toolbar {
         color: white;
       }
     }
-    
-    recommended-doctors {
-        margin: 16px 0;
-        padding: 0 16px;
-        background: white;
-        border-radius: 10px;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-        width: 100%;
-        max-width: 960px; /* 最大宽度 */
-      
-        .header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 16px 0;
-      
-          .title {
-            font-size: 16px;
-            font-family: Roboto, "Helvetica Neue", sans-serif;
-            color: #000000;
-            width: 939px;
-            height: 21px;
-            line-height: 21px; /* 确保高度一致 */
-          }
-      
-          .subtitle {
-            font-size: 14px;
-            color: #999;
-          }
-        }
-      
-        .scroll-container {
-          display: flex;
-          flex-wrap: wrap; /* 允许换行 */
-          gap: 16px; /* 卡片之间的间距 */
-          padding: 16px 0;
-          width: 100%;
-          max-width: 960px; /* 最大宽度 */
-          justify-content: space-between; /* 子元素之间的间距 */
-      
-          .card {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            background: #f8f8f8;
-            border-radius: 10px;
-            padding: 16px;
-            width: calc(33.33% - 16px); /* 每行显示3个卡片，减去间距 */
-            text-align: center;
-            position: relative;
-
-      
-            .tag {
-              font-size: 12px;
-              background: #ff4d4d;
-              color: white;
-              padding: 4px 8px;
-              border-radius: 4px;
-              position: absolute;
-              top: 16px;
-              left: 16px;
-            }
-      
-            .avatars {
-              width: 20px;
-              height: 20px;
-              border-radius: 20%;
-              margin-bottom: 8px;
-            }
-      
-            .name {
-              font-size: 16px;
-              font-weight: bold;
-              margin-bottom: 4px;
-            }
-      
-            .specialty {
-              font-size: 14px;
-              color: #666;
-              margin-bottom: 8px;
-            }
-      
-            ion-button {
-              width: 100%; /* 占满卡片的宽度 */
-              margin-top: 8px;
-            }
-          }
-        }
-      }
+}
 
+// 推荐医生
+.recommended-doctors {
+  margin: 16px 0;
+  padding: 0 16px;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 960px; /* 最大宽度 */
+  min-height: 200px; /* 设置最小高度 */
+}
 
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
 
+  .title {
+    font-size: 16px;
+    font-family: Roboto, "Helvetica Neue", sans-serif;
+    color: #000000;
+    line-height: 21px; /* 确保高度一致 */
+  }
 
+  .subtitle {
+    font-size: 14px;
+    color: #999;
+  }
 }
-    
+
+.scroll-container {
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  min-height: 200px; /* 设置最小高度 */
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #f8f8f8;
+    border-radius: 10px;
+    padding: 16px;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    transition: transform 0.5s ease-in-out;
+    min-height: 200px; /* 设置最小高度 */
+
+    .tag {
+      font-size: 12px;
+      background: #ff4d4d;
+      color: white;
+      padding: 4px 8px;
+      border-radius: 4px;
+      position: absolute;
+      top: 16px;
+      left: 16px;
+    }
+
+    .avatar {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      margin-bottom: 8px;
+    }
+
+    .name {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 4px;
+    }
+
+    .specialty {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 8px;
+    }
+
+    ion-button {
+      width: 100%; /* 占满卡片的宽度 */
+      margin-top: 8px;
+    }
+  }
+}
+
+.controls {
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
+
+  button {
+    margin: 0 8px;
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    background-color: #007bff;
+    color: white;
+    font-size: 14px;
+    transition: background-color 0.3s;
+
+    &:hover {
+      background-color: #0056b3;
+    }
+  }
+}
+
+
+

src/app/tab1/tab1.page.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, AfterViewInit } from '@angular/core';
 import { Router } from '@angular/router';
 
 @Component({
@@ -6,38 +6,70 @@ import { Router } from '@angular/router';
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss']
 })
-export class Tab1Page {
+export class Tab1Page implements AfterViewInit {
 
   doctors = [
     {
-      avatar: '../../assets/icon/favicon.png',
+      avatar: '../../assets/images/doctor.png',
       name: '张医生',
       specialty: '心血管科'
     },
     {
-      avatar: '../../assets/icon/favicon.png',
+      avatar: '../../assets/images/doctor.png',
       name: '李医生',
       specialty: '神经科'
     },
     {
-      avatar: '../../assets/icon/favicon.png',
+      avatar: '../../assets/images/doctor.png',
       name: '王医生',
       specialty: '儿科'
     },
     {
-      avatar: '../../assets/icon/favicon.png',
+      avatar: '../../assets/images/doctor.png',
       name: '赵医生',
       specialty: '外科'
     },
     {
-      avatar: '../../assets/icon/favicon.png',
+      avatar: '../../assets/images/doctor.png',
       name: '陈医生',
       specialty: '内科'
     }
   ];
 
-      
+  currentIndex = 0;
+
   constructor(private router: Router) {}
 
+  ngAfterViewInit() {
+    // 初始化时调用一次以确保初始状态正确
+    this.updateCarousel();
+  }
+
+  // 上一张
+  prevSlide() {
+    if (this.currentIndex > 0) {
+      this.currentIndex--;
+    } else {
+      this.currentIndex = this.doctors.length - 1;
+    }
+    this.updateCarousel();
+  }
+
+  // 下一张
+  nextSlide() {
+    if (this.currentIndex < this.doctors.length - 1) {
+      this.currentIndex++;
+    } else {
+      this.currentIndex = 0;
+    }
+    this.updateCarousel();
+  }
+
+  // 更新轮播位置
+  updateCarousel() {
+    // 这里不需要获取 DOM 元素，因为我们在模板中直接使用了 [ngStyle]
+    // 每个卡片的 transform 属性会根据当前索引自动更新
+  }
+
   // 模拟数据或其他逻辑可以在这里添加
 }