add

src/app/tab1/tab1.page.html

@@ -6,7 +6,7 @@
 
 <ion-content [fullscreen]="true">
   <!-- 训练心得交流区 -->
-  <section>
+  <!-- <section>
     <ion-card>
       <ion-card-header>
         <ion-card-title>训练心得交流区</ion-card-title>
@@ -22,7 +22,33 @@
         </ion-list>
       </ion-card-content>
     </ion-card>
-  </section>
+  </section> -->
+
+  <!-- 轮播图开始 -->
+   <!-- 轮播图部分 -->
+  <div class="banner-section">
+    <div class="banner-container" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)"
+      (touchend)="onTouchEnd()">
+      <div class="banner-img-container" [style.transform]="'translateX(' + translateX + 'px)'">
+        <img *ngFor="let slide of slides" [src]="slide.image" [alt]="slide.alt">
+      </div>
+      <div class="banner-indicators">
+        <span class="indicator" *ngFor="let slide of slides; let i = index" [class.active]="currentIndex === i"
+          (click)="goToSlide(i)">
+        </span>
+      </div>
+      <div class="banner-arrows">
+        <button class="arrow-btn prev" (click)="prevSlide()">
+          <ion-icon name="chevron-back-outline"></ion-icon>
+        </button>
+        <button class="arrow-btn next" (click)="nextSlide()">
+          <ion-icon name="chevron-forward-outline"></ion-icon>
+        </button>
+      </div>
+    </div>
+  </div>
+   <!-- 轮播图结束 -->
+
 
   <!-- 教练指导区 -->
   <section>
@@ -40,10 +66,31 @@
               <h2>{{ coach.name }}</h2>
               <p>风格: {{ coach.style }}</p>
             </ion-label>
-            <ion-button slot="end" (click)="selectCoach(coach)">选择</ion-button>
+            <ion-button slot="end">选择</ion-button>
           </ion-item>
         </ion-list>
       </ion-card-content>
     </ion-card>
   </section>
+
+
+  <!-- 教练图像 -->
+  <div class="learning-cards">
+    <div class="learning-card">
+      <img src="assets/tab1.img/li.png" alt="王教练">
+      <h3>王教练</h3>
+    </div>
+    <div class="learning-card">
+      <img src="assets/tab1.img/wang.png" alt="王教练">
+      <h3>王教练</h3>
+    </div>
+    <div class="learning-card">
+      <img src="assets/tab1.img/zhang.png" alt="王教练">
+      <h3>王教练</h3>
+    </div>
+    <div class="learning-card">
+      <img src="assets/tab1.img/li.png" alt="王教练">
+      <h3>王教练</h3>
+    </div>
+  </div>
 </ion-content>

src/app/tab1/tab1.page.scss

@@ -67,4 +67,161 @@ ion-card-content {
 
 ion-content {
   --background: #f9f9f9; /* 设置内容背景色 */
+}
+
+// 轮播图部分
+.banner-section {
+  padding: 16px var(--page-padding);
+  background: white;
+
+  .banner-container {
+      position: relative;
+      border-radius: 12px;
+      overflow: hidden;
+      height: 250px;
+      user-select: none;
+      touch-action: pan-y pinch-zoom;
+
+      .banner-img-container {
+          display: flex;
+          height: 100%;
+          transition: transform 0.3s ease-in-out;
+
+          img {
+              min-width: 100%;
+              height: 250px;
+              object-fit: cover;
+              pointer-events: none;
+          }
+      }
+
+      .banner-indicators {
+          position: absolute;
+          bottom: 12px;
+          left: 50%;
+          transform: translateX(-50%);
+          display: flex;
+          gap: 8px;
+          z-index: 2;
+
+          .indicator {
+              width: 6px;
+              height: 6px;
+              border-radius: 50%;
+              background: rgba(255, 255, 255, 0.5);
+              transition: all 0.3s;
+              cursor: pointer;
+
+              &.active {
+                  width: 18px;
+                  border-radius: 3px;
+                  background: white;
+              }
+          }
+      }
+
+      .banner-arrows {
+          position: absolute;
+          top: 50%;
+          left: 0;
+          right: 0;
+          transform: translateY(-50%);
+          display: flex;
+          justify-content: space-between;
+          padding: 0 16px;
+          pointer-events: none;
+
+          .arrow-btn {
+              width: 32px;
+              height: 32px;
+              border-radius: 50%;
+              background: rgba(0, 0, 0, 0.3);
+              border: none;
+              color: white;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              cursor: pointer;
+              pointer-events: auto;
+              transition: all 0.3s;
+
+              &:hover {
+                  background: rgba(0, 0, 0, 0.5);
+              }
+
+              ion-icon {
+                  font-size: 20px;
+              }
+          }
+      }
+  }  
+}
+
+// 最近在学部分
+.recent-learning {
+  padding: 16px var(--page-padding);
+  background: white;
+  margin-top: 8px;
+
+  .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+
+      h2 {
+          margin: 0;
+          font-size: 18px;
+          font-weight: 600;
+          color: #333;
+      }
+
+      .view-all {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          color: #666;
+          font-size: 14px;
+
+          ion-icon {
+              font-size: 16px;
+          }
+      }
+  }
+}
+
+
+
+.learning-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  overflow-x: auto;
+  padding-bottom: 8px;
+
+  .learning-card {
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s;
+
+      &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+
+      img {
+          width: 100%;
+          height: 120px;
+          object-fit: cover;
+      }
+
+      h3 {
+          margin: 8px;
+          font-size: 14px;
+          font-weight: 500;
+          color: #333;
+          text-align: center;
+      }
+  }
 }

src/app/tab1/tab1.page.ts

@@ -3,6 +3,11 @@ import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonCard, IonCar
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { CommonModule } from '@angular/common';
 
+interface Slide {
+  image: string;
+  alt: string;
+}
+
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
@@ -17,39 +22,157 @@ import { CommonModule } from '@angular/common';
   schemas: [CUSTOM_ELEMENTS_SCHEMA], 
 })
 export class Tab1Page {
-  topics = [
-    { title: '如何更好练习球性', participants: 120 },
-    { title: '经典招式学习', participants: 80 },
-  ];
 
   coaches = [
     { name: '教练张', style: '技术细腻', avatar: 'assets/tab1.img/zhang.png' },
     { name: '教练李', style: '战术全面', avatar: 'assets/tab1.img/li.png' },
     { name: '教练王', style: '体能训练', avatar: 'assets/tab1.img/wang.png' },
   ];
+  slides: Slide[] = [
+    { image: 'assets/tab1.img/li.png', alt: '轮播图1' },
+    { image: 'assets/tab1.img/wang.png', alt: '轮播图2' },
+    { image: 'assets/tab1.img/zhang.png', alt: '轮播图3' },
+    { image: 'assets/tab1.img/li.png', alt: '轮播图4' },
+    { image: 'assets/tab1.img/li.png', alt: '轮播图5' }
+  ];
 
+  currentIndex = 0;
+  translateX = 0;
+  private autoPlayInterval: any;
+  private touchStartX = 0;
+  private touchDeltaX = 0;
+  private slideWidth = 0;
+
+  ngOnInit() {
+    this.startAutoPlay();
+    // 获取轮播图容器宽度
+    setTimeout(() => {
+      const container = document.querySelector('.banner-container');
+      if (container) {
+        this.slideWidth = container.clientWidth;
+      }
+    });
+  }
+  selectedTag = 'all';
+  isModalOpen = false;
   newPost = {
-    title: '',
     content: ''
   };
 
+  trainingPosts = [
+    {
+      id: 1,
+      authorName: '篮球爱好者',
+      authorAvatar: 'assets/avatars/default-avatar.png',
+      postTime: new Date(),
+      content: '今天练习了两小时的投篮，感觉手感越来越好了！',
+      likes: 12,
+      comments: 3,
+      isLiked: false
+    },
+    {
+      id: 2,
+      authorName: '训练达人',
+      authorAvatar: 'assets/avatars/default-avatar.png',
+      postTime: new Date(),
+      content: '分享一个实用的运球技巧：交叉步过人时重心要放低...',
+      likes: 18,
+      comments: 5,
+      isLiked: false
+    }
+  ];
+
+  createNewPost() {
+    this.isModalOpen = true;
+  }
+
+  closeModal() {
+    this.isModalOpen = false;
+    this.newPost.content = '';
+  }
+
   submitPost() {
-    if (this.newPost.title && this.newPost.content) {
-      // 在这里处理发帖逻辑
-      console.log('发布的帖子:', this.newPost);
-      this.newPost.title = '';
-      this.newPost.content = '';
+    if (this.newPost.content.trim()) {
+      const post = {
+        id: this.trainingPosts.length + 1,
+        authorName: '当前用户',
+        authorAvatar: 'assets/avatars/default-avatar.png',
+        postTime: new Date(),
+        content: this.newPost.content,
+        likes: 0,
+        comments: 0,
+        isLiked: false
+      };
+      this.trainingPosts.unshift(post);
+      this.closeModal();
+    }
+  }
+
+  likePost(post: any) {
+    post.isLiked = !post.isLiked;
+    post.likes += post.isLiked ? 1 : -1;
+  }
+
+  showComments(post: any) {
+    // 实现查看评论功能
+    console.log('查看评论:', post.id);
+  }
+
+  private startAutoPlay() {
+    this.stopAutoPlay();
+    this.autoPlayInterval = setInterval(() => {
+      this.nextSlide();
+    }, 3000); // 每3秒切换一次
+  }
+
+  private stopAutoPlay() {
+    if (this.autoPlayInterval) {
+      clearInterval(this.autoPlayInterval);
     }
   }
+  nextSlide() {
+    this.currentIndex = (this.currentIndex + 1) % this.slides.length;
+    this.updateTranslateX();
+  }
+
+  prevSlide() {
+    this.currentIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length;
+    this.updateTranslateX();
+  }
+
+  goToSlide(index: number) {
+    this.currentIndex = index;
+    this.updateTranslateX();
+  }
+
+  private updateTranslateX() {
+    this.translateX = -this.currentIndex * this.slideWidth;
+  }
+
+  // 触摸事件处理
+  onTouchStart(event: TouchEvent) {
+    this.stopAutoPlay();
+    this.touchStartX = event.touches[0].clientX;
+    this.touchDeltaX = 0;
+  }
 
-  selectCoach(coach: any) {
-    console.log(`选择了教练: ${coach.name}，风格: ${coach.style}`);
-    // 在这里可以添加选择教练后的逻辑，例如记录用户选择或导航到教练详情页面
+  onTouchMove(event: TouchEvent) {
+    this.touchDeltaX = event.touches[0].clientX - this.touchStartX;
+    const newTranslateX = -this.currentIndex * this.slideWidth + this.touchDeltaX;
+    this.translateX = newTranslateX;
   }
 
-  onSearch(event: any) {
-    const searchTerm = event.target.value; // 获取用户输入的搜索内容
-    console.log('搜索内容:', searchTerm);
-    // 在这里添加搜索逻辑，例如过滤列表或导航到搜索结果页面
+  onTouchEnd() {
+    const threshold = this.slideWidth / 3;
+    if (Math.abs(this.touchDeltaX) > threshold) {
+      if (this.touchDeltaX > 0) {
+        this.prevSlide();
+      } else {
+        this.nextSlide();
+      }
+    } else {
+      this.updateTranslateX();
+    }
+    this.startAutoPlay();
   }
 }

src/app/tab4/tab4.page.scss

@@ -1,168 +1,138 @@
 .custom-toolbar {
-    --background: linear-gradient(135deg, #87CEFA, #b2ebf2);
-    display: flex; /* 使用 Flexbox 布局 */
-    justify-content: center; /* 水平居中 */
-    align-items: center; /* 垂直居中 */
-    padding: 0; /* 去掉默认内边距 */
+    --background: linear-gradient(135deg, #4CAF50, #2196F3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
     
     .custom-title {
-        font-size: 1.4em;
-        font-weight: 600;
-        color: #2c3e50;
-        letter-spacing: 1px;
+        font-size: 1.6em;
+        font-weight: 700;
+        color: white;
+        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
     }
 }
 
 .custom-title {
-    font-size: 1.3em; /* 字体大小 */
-    font-weight: bold; /* 加粗 */
+    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: "微软雅黑"; /* 自定义字体 */
+    text-align: center;
+    margin: 0;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+    font-family: "微软雅黑";
 }
 
 ion-card {
-    background-color: #b2ebf2; /* 偏蓝色背景，给人以清新和健康的感觉 */
-    border-radius: 10px; /* 圆角边框 */
-    padding: 20px; /* 内边距 */
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
+    background-color: #b2ebf2;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 
 ion-card-title {
-    font-size: 1.5em; /* 标题字体大小 */
-    font-weight: bold; /* 加粗 */
-    color: #00796b; /* 深绿色字体，象征健康 */
-    margin: 0; /* 去掉默认的外边距 */
+    font-size: 1.5em;
+    font-weight: bold;
+    color: #00796b;
+    margin: 0;
 }
 
 ion-card-subtitle {
-    font-size: 1.2em; /* 副标题字体大小 */
-    color: #004d40; /* 更深的绿色字体 */
-    margin-top: 5px; /* 顶部外边距 */
+    font-size: 1.2em;
+    color: #004d40;
+    margin-top: 5px;
 }
 
 ion-card:hover {
-    background-color: #80deea; /* 悬停时的背景色变化 */
-    transition: background-color 0.3s; /* 背景色变化的过渡效果 */
+    background-color: #80deea;
+    transition: background-color 0.3s;
 }
 
 .memo-card {
-    background: white;
-    border-radius: 20px;
-    padding: 20px;
-    position: relative;
-    overflow: hidden;
-    transition: all 0.3s ease;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 24px;
+    padding: 25px;
+    margin: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     
     &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 4px;
-        background: linear-gradient(to right, #4CAF50, #2196F3);
+        height: 5px;
+        background: linear-gradient(45deg, #4CAF50, #2196F3);
+        border-radius: 5px 5px 0 0;
     }
     
     &:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
+        transform: translateY(-8px) scale(1.02);
+        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
     }
     
     .memo-title {
+        font-size: 1.5em;
+        font-weight: 700;
         color: #2c3e50;
-        font-size: 1.4em;
-        font-weight: 600;
-        margin-bottom: 12px;
+        margin-bottom: 15px;
         display: flex;
         align-items: center;
-        
-        &::before {
-            content: '';
-            display: inline-block;
-            width: 24px;
-            height: 24px;
-            margin-right: 8px;
-            background-size: contain;
-            background-repeat: no-repeat;
-        }
+        gap: 10px;
     }
     
     .memo-description {
-        color: #666;
-        font-size: 0.95em;
-        line-height: 1.5;
-        margin: 0;
-    }
-    
-    &:nth-child(1) {
-        .memo-title::before {
-            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234CAF50"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>');
-        }
-    }
-    
-    &:nth-child(2) {
-        .memo-title::before {
-            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232196F3"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5.97 4.06L14.09 6l1.41 1.41L16.91 6l1.06 1.06-1.41 1.41 1.41 1.41-1.06 1.06-1.41-1.41-1.41 1.41-1.06-1.06 1.41-1.41-1.41-1.41zm-6.78 0h5v1.5h-5v-1.5zM12 17H6v-1.5h6V17zm2.25-3H6v-1.5h8.25V14z"/></svg>');
-        }
-    }
-    
-    &:nth-child(3) {
-        .memo-title::before {
-            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF9800"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>');
-        }
-    }
-    
-    &:nth-child(4) {
-        .memo-title::before {
-            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>');
-        }
+        color: #555;
+        font-size: 1.1em;
+        line-height: 1.6;
     }
 }
 
 .tag-list {
-    list-style-type: none; /* 去掉默认的列表样式 */
-    padding: 0; /* 去掉内边距 */
+    list-style-type: none;
+    padding: 0;
 }
 
 .tag-item {
-    background-color: #80deea; /* 标签背景色 */
-    color: #87CEFA; /* 标签字体颜色 */
-    border-radius: 5px; /* 标签圆角 */
-    padding: 10px; /* 标签内边距 */
-    margin: 5px 0; /* 标签外边距 */
-    transition: background-color 0.3s; /* 背景色变化的过渡效果 */
-    cursor: pointer; /* 鼠标悬停时显示为可点击 */
+    background-color: #80deea;
+    color: #87CEFA;
+    border-radius: 5px;
+    padding: 10px;
+    margin: 5px 0;
+    transition: background-color 0.3s;
+    cursor: pointer;
 }
 
 .tag-item:hover {
-    background-color: #4dd0e1; /* 悬停时的背景色变化 */
+    background-color: #4dd0e1;
 }
 
 .card-header {
-    background: linear-gradient(135deg, #b2ebf2, #81D4FA);
-    border-radius: 20px 20px 0 0;
-    padding: 24px;
+    background: linear-gradient(135deg, #4CAF50, #2196F3);
+    padding: 30px;
     
     .avatar {
-        width: 80px;
-        height: 80px;
-        border: 4px solid white;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        width: 90px;
+        height: 90px;
+        border: 5px solid rgba(255, 255, 255, 0.9);
+        border-radius: 50%;
+        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
+        transition: transform 0.3s ease;
+        
+        &:hover {
+            transform: scale(1.1);
+        }
     }
     
     .user-info {
         ion-card-title {
-            font-size: 1.4em;
-            color: #2c3e50;
-            margin-bottom: 8px;
+            color: white;
+            font-size: 1.6em;
+            margin-bottom: 10px;
+            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
         }
         
         ion-card-subtitle {
-            color: #455A64;
-            line-height: 1.6;
+            color: rgba(255, 255, 255, 0.9);
+            font-size: 1.1em;
+            line-height: 1.8;
         }
     }
 }
@@ -171,8 +141,8 @@ ion-content {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 68vh; /* 使内容区域高度为视口高度 */
-    --background: linear-gradient(135deg, #E0F7FA, #F5F5F5);
+    height: 68vh;
+    --background: linear-gradient(135deg, #f5f7fa, #e4e8eb);
     
     &::before {
         content: '';
@@ -182,81 +152,66 @@ ion-content {
         width: 100%;
         height: 100%;
         background: url('/assets/tab1.img/商标.jpg') no-repeat center center fixed;
-        opacity: 0.05;
+        opacity: 0.03;
         z-index: -1;
+        filter: blur(2px);
     }
 }
 
 .login-card {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 20px;
-    margin: 16px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(10px);
+    border-radius: 24px;
+    margin: 20px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
     
     ion-card-header {
-        text-align: center;
-        padding: 24px 16px;
+        padding: 30px 20px;
         
         ion-card-title {
-            color: #2c3e50;
-            font-size: 1.8em;
-            margin-bottom: 16px;
+            font-size: 2em;
+            background: linear-gradient(45deg, #4CAF50, #2196F3);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: 20px;
         }
         
         ion-card-subtitle {
-            color: #666;
-            line-height: 1.6;
             font-size: 1.1em;
-        }
-    }
-    
-    .responsive-image {
-        width: 120px;
-        height: 120px;
-        border-radius: 60px;
-        margin: 20px auto;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-        transition: transform 0.3s ease;
-        
-        &:hover {
-            transform: scale(1.05);
+            line-height: 1.8;
+            color: #555;
         }
     }
     
     ion-button {
-        margin: 8px 16px;
-        --border-radius: 10px;
-        --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        margin: 10px 20px;
+        height: 48px;
+        font-size: 1.1em;
+        --border-radius: 12px;
+        --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
         
         &:first-child {
-            --background: #4CAF50;
-            
-            &:hover {
-                --background: #43A047;
-            }
+            --background: linear-gradient(45deg, #4CAF50, #45b649);
         }
         
         &:last-child {
-            --background: #2196F3;
-            
-            &:hover {
-                --background: #1E88E5;
-            }
+            --background: linear-gradient(45deg, #2196F3, #1e88e5);
         }
     }
 }
 
 .image-container {
-    width: 100%; /* 图片容器宽度100% */
-    display: flex; /* 使用flex布局 */
-    justify-content: center; /* 水平居中 */
-    margin-top: 10px; /* 上方间距 */
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
 }
 
 .responsive-image {
-    max-width: 80%; /* 最大宽度为容器宽度 */
-    height: auto; /* 高度自动 */
-    border-radius: 8px; /* 可选：添加圆角效果 */
+    max-width: 80%;
+    height: auto;
+    border-radius: 8px;
 }
 
 @media (min-width: 768px) {
@@ -266,8 +221,12 @@ ion-content {
     }
     
     .login-card {
-        max-width: 600px;
-        margin: 24px auto;
+        max-width: 700px;
+        margin: 30px auto;
+    }
+    
+    .memo-card {
+        min-height: 160px;
     }
 }
 
@@ -279,7 +238,6 @@ ion-button {
     }
 }
 
-// 功能卡片网格布局
 .features-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
@@ -288,7 +246,6 @@ ion-button {
     margin-top: 20px;
 }
 
-// 响应式布局调整
 @media (max-width: 480px) {
     .features-grid {
         grid-template-columns: 1fr;
@@ -299,13 +256,11 @@ ion-button {
     }
 }
 
-// 卡片点击动画
 .memo-card:active {
     transform: scale(0.98);
     transition: transform 0.1s;
 }
 
-// 为每个卡片添加独特的背景色
 .memo-card {
     &:nth-child(1) {
         background: linear-gradient(135deg, #E8F5E9, white);
@@ -324,7 +279,6 @@ ion-button {
     }
 }
 
-// 添加卡片内容布局
 .memo-card {
     display: flex;
     flex-direction: column;
@@ -339,7 +293,6 @@ ion-button {
     }
 }
 
-// 添加图标动画
 .memo-card {
     .memo-title::before {
         transition: transform 0.3s ease;
@@ -350,4 +303,22 @@ ion-button {
             transform: scale(1.2) rotate(360deg);
         }
     }
+}
+
+@media (prefers-color-scheme: dark) {
+    ion-content {
+        --background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
+    }
+    
+    .login-card, .memo-card {
+        background: rgba(45, 45, 45, 0.95);
+        
+        ion-card-subtitle {
+            color: #bbb;
+        }
+    }
+    
+    .memo-card .memo-description {
+        color: #bbb;
+    }
 }

src/app/tabs/tabs.page.ts

@@ -1,7 +1,7 @@
 import { Component, EnvironmentInjector, inject } from '@angular/core';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { triangle, ellipse, square } from 'ionicons/icons';
+import { triangle, ellipse, square, chevronBackOutline, chevronForwardOutline } from 'ionicons/icons';
 
 @Component({
   selector: 'app-tabs',
@@ -14,6 +14,6 @@ export class TabsPage {
   public environmentInjector = inject(EnvironmentInjector);
 
   constructor() {
-    addIcons({ triangle, ellipse, square });
+    addIcons({ triangle, ellipse, square,chevronBackOutline,chevronForwardOutline});
   }
 }