1

src/app/explore-container/tab1/tab1.page.html

@@ -0,0 +1,53 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>训练心得交流</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- 训练心得轮播图 -->
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>精选训练心得</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <swiper-container [pagination]="true" [autoplay]="true" [keyboard]="true">
+          <swiper-slide *ngFor="let slide of slides">
+            <ion-card class="slide-card">
+              <img [src]="slide.image" [alt]="slide.title"/>
+              <div class="slide-content">
+                <h3>{{ slide.title }}</h3>
+                <p>{{ slide.description }}</p>
+                <ion-badge color="primary">{{ slide.participants }}人参与</ion-badge>
+              </div>
+            </ion-card>
+          </swiper-slide>
+        </swiper-container>
+      </ion-card-content>
+    </ion-card>
+  </section>
+
+  <!-- 教练指导区 -->
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>教练指导区</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-list>
+          <ion-item *ngFor="let coach of coaches">
+            <ion-avatar slot="start">
+              <img [src]="coach.avatar" alt="{{ coach.name }}">
+            </ion-avatar>
+            <ion-label>
+              <h2>{{ coach.name }}</h2>
+              <p>风格: {{ coach.style }}</p>
+            </ion-label>
+            <ion-button slot="end" (click)="selectCoach(coach)">选择</ion-button>
+          </ion-item>
+        </ion-list>
+      </ion-card-content>
+    </ion-card>
+  </section>
+</ion-content>

src/app/explore-container/tab1/tab1.page.scss

@@ -0,0 +1,114 @@
+ion-header {
+  background-color: #ffffff; // 设置头部背景色
+  color: white; // 设置头部文字颜色
+}
+
+ion-title {
+  flex: 1; // 使标题占据可用空间
+  text-align: left; // 确保文字左对齐
+  margin-left: 16px; // 左侧边距，可以根据需要调整
+  margin-top: 5px;
+}
+
+ion-card {
+  margin: 10px; // 设置卡片之间的间距
+  border-radius: 10px; // 设置卡片圆角
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // 添加阴影效果
+}
+
+ion-card-header {
+  background-color: #d8e5fa; // 设置头部背景色
+  color: white; // 设置头部文字颜色
+}
+
+ion-card-title {
+  font-size: 1.2em; // 设置卡片标题字体大小
+  font-weight: bold; // 设置卡片标题字体加粗
+}
+
+ion-item {
+  --ion-item-background: transparent; // 设置列表项背景透明
+}
+
+ion-label {
+  color: #333; // 设置标签文字颜色
+}
+
+ion-button {
+  --background: #3880ff; // 设置按钮背景色
+  --color: white; // 设置按钮文字颜色
+  margin-top: 10px; // 设置按钮与上方内容的间距
+  border-radius: 5px; // 设置按钮圆角
+}
+
+ion-avatar {
+  border-radius: 50%; // 设置头像圆形
+  width: 50px; // 设置头像宽度
+  height: 50px; // 设置头像高度
+}
+
+h2 {
+  font-size: 1em; // 设置二级标题字体大小
+  margin: 0; // 去掉默认外边距
+}
+
+p {
+  font-size: 0.9em; // 设置段落字体大小
+  color: #666; // 设置段落文字颜色
+}
+
+ion-list {
+  padding: 0; // 去掉列表内边距
+}
+
+ion-card-content {
+  padding: 10px; // 设置卡片内容内边距
+}
+
+ion-content {
+  --background: #f9f9f9; /* 设置内容背景色 */
+}
+
+swiper-container {
+  width: 100%;
+  height: 250px;
+}
+
+swiper-slide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+}
+
+.slide-card {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  
+  img {
+    width: 100%;
+    height: 150px;
+    object-fit: cover;
+  }
+}
+
+.slide-content {
+  padding: 10px;
+  
+  h3 {
+    margin: 0;
+    font-size: 1.2em;
+    font-weight: bold;
+  }
+  
+  p {
+    margin: 5px 0;
+    font-size: 0.9em;
+    color: #666;
+  }
+  
+  ion-badge {
+    margin-top: 5px;
+  }
+}

src/app/explore-container/tab1/tab1.page.spec.ts

@@ -0,0 +1,44 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonItem, IonLabel, IonList, IonInput, IonTextarea, IonAvatar, IonSearchbar } from '@ionic/angular/standalone';
+// import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-tab1',
+  templateUrl: 'tab1.page.html',
+  styleUrls: ['tab1.page.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonHeader, IonToolbar, IonTitle, IonContent, 
+    IonButton, IonCard, IonCardHeader, IonCardTitle, IonCardContent,
+    IonList, IonItem, IonLabel, IonAvatar, IonInput, IonTextarea, IonSearchbar
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA], 
+})
+export class Tab1Page {
+  topics = [
+    { title: '如何更好练习球性', participants: 120 },
+    { title: '经典招式学习', participants: 80 },
+  ];
+
+  newPost = {
+    title: '',
+    content: ''
+  };
+
+  submitPost() {
+    if (this.newPost.title && this.newPost.content) {
+      // 在这里处理发帖逻辑
+      console.log('发布的帖子:', this.newPost);
+      this.newPost.title = '';
+      this.newPost.content = '';
+    }
+  }
+
+  onSearch(event: any) {
+    const searchTerm = event.target.value; // 获取用户输入的搜索内容
+    console.log('搜索内容:', searchTerm);
+    // 在这里添加搜索逻辑，例如过滤列表或导航到搜索结果页面
+  }
+}

src/app/explore-container/tab1/tab1.page.ts

@@ -0,0 +1,54 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonCard, 
+         IonCardHeader, IonCardTitle, IonCardContent, IonItem, IonLabel, 
+         IonList, IonInput, IonTextarea, IonAvatar, IonBadge } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { register } from 'swiper/element/bundle';
+
+register(); // 注册Swiper组件
+
+@Component({
+  selector: 'app-tab1',
+  templateUrl: 'tab1.page.html',
+  styleUrls: ['tab1.page.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonHeader, IonToolbar, IonTitle, IonContent,
+    IonButton, IonCard, IonCardHeader, IonCardTitle, IonCardContent,
+    IonList, IonItem, IonLabel, IonAvatar, IonInput, IonTextarea, IonBadge
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class Tab1Page {
+  slides = [
+    {
+      title: '如何更好练习球性',
+      description: '分享专业的球性训练方法和技巧',
+      image: 'assets/tab1.img/training1.jpg',
+      participants: 120
+    },
+    {
+      title: '经典招式学习',
+      description: '详解各种实用的乒乓球技术动作',
+      image: 'assets/tab1.img/training2.jpg',
+      participants: 80
+    },
+    {
+      title: '实战技巧分享',
+      description: '比赛中常用的战术组合与应用',
+      image: 'assets/tab1.img/training3.jpg',
+      participants: 95
+    }
+  ];
+
+  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' },
+  ];
+
+  selectCoach(coach: any) {
+    console.log(`选择了教练: ${coach.name}，风格: ${coach.style}`);
+  }
+}

src/app/tab4/tab4.page.scss

@@ -1,9 +1,16 @@
 .custom-toolbar {
-    --background: rgba(173, 216, 230, 0.8); /* 偏蓝色背景 */
+    --background: linear-gradient(135deg, #87CEFA, #b2ebf2);
     display: flex; /* 使用 Flexbox 布局 */
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
     padding: 0; /* 去掉默认内边距 */
+    
+    .custom-title {
+        font-size: 1.4em;
+        font-weight: 600;
+        color: #2c3e50;
+        letter-spacing: 1px;
+    }
 }
 
 .custom-title {
@@ -26,7 +33,7 @@ ion-card {
 ion-card-title {
     font-size: 1.5em; /* 标题字体大小 */
     font-weight: bold; /* 加粗 */
-    color: #00796b; /* 深绿色字���，象征健康 */
+    color: #00796b; /* 深绿色字体，象征健康 */
     margin: 0; /* 去掉默认的外边距 */
 }
 
@@ -42,23 +49,27 @@ ion-card:hover {
 }
 
 .memo-card {
-    background-color: #b2ebf2; /* 偏蓝色背景 */
-    border-radius: 10px; /* 圆角边框 */
-    padding: 20px; /* 内边距 */
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
-}
-
-.memo-title {
-    font-size: 1.8em; /* 标题字体大小 */
-    font-weight: bold; /* 加粗 */
-    color: #00796b; /* 深绿色字体，象征健康 */
-    margin: 15px 0; /* 顶部和底部外边距 */
-}
-
-.memo-description {
-    font-size: 1.1em; /* 描述字体大小 */
-    color: #004d40; /* 更深的绿色字体 */
-    margin-bottom: 20px; /* 底部外边距 */
+    background: white;
+    border-radius: 16px;
+    margin: 12px;
+    padding: 16px;
+    transition: all 0.3s ease;
+    
+    &:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+    }
+    
+    .memo-title {
+        color: #2c3e50;
+        font-size: 1.3em;
+        margin-bottom: 8px;
+    }
+    
+    .memo-description {
+        color: #666;
+        font-size: 1em;
+    }
 }
 
 .tag-list {
@@ -81,21 +92,29 @@ ion-card:hover {
 }
 
 .card-header {
-    display: flex; /* 使用 Flexbox 布局 */
-    align-items: center; /* 垂直居中对齐 */
-    padding: 10px; /* 内边距 */
-}
-
-.avatar {
-    width: 50px; /* 头像宽度 */
-    height: 50px; /* 头像高度 */
-    border-radius: 50%; /* 圆形头像 */
-    margin-right: 15px; /* 头像与文本之间的间距 */
-    object-fit: cover; /* 确保图片覆盖区域并保持比例 */
-}
-
-.user-info {
-    flex: 1; /* 使用户信息部分占据剩余空间 */
+    background: linear-gradient(135deg, #b2ebf2, #81D4FA);
+    border-radius: 20px 20px 0 0;
+    padding: 24px;
+    
+    .avatar {
+        width: 80px;
+        height: 80px;
+        border: 4px solid white;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    }
+    
+    .user-info {
+        ion-card-title {
+            font-size: 1.4em;
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        
+        ion-card-subtitle {
+            color: #455A64;
+            line-height: 1.6;
+        }
+    }
 }
 
 ion-content {
@@ -103,13 +122,78 @@ ion-content {
     justify-content: center;
     align-items: center;
     height: 68vh; /* 使内容区域高度为视口高度 */
+    --background: linear-gradient(135deg, #E0F7FA, #F5F5F5);
+    
+    &::before {
+        content: '';
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: url('/assets/tab1.img/商标.jpg') no-repeat center center fixed;
+        opacity: 0.05;
+        z-index: -1;
+    }
 }
 
 .login-card {
-    width: 94%; /* 可以根据需要调整宽度 */
-    max-width: 400px; /* 设置最大宽度以避免过宽 */
-    text-align: center; /* 文本居中 */
-    padding: 10px; /* 添加内边距 */
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 20px;
+    margin: 16px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+    
+    ion-card-header {
+        text-align: center;
+        padding: 24px 16px;
+        
+        ion-card-title {
+            color: #2c3e50;
+            font-size: 1.8em;
+            margin-bottom: 16px;
+        }
+        
+        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);
+        }
+    }
+    
+    ion-button {
+        margin: 8px 16px;
+        --border-radius: 10px;
+        --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        
+        &:first-child {
+            --background: #4CAF50;
+            
+            &:hover {
+                --background: #43A047;
+            }
+        }
+        
+        &:last-child {
+            --background: #2196F3;
+            
+            &:hover {
+                --background: #1E88E5;
+            }
+        }
+    }
 }
 
 .image-container {
@@ -123,4 +207,24 @@ ion-content {
     max-width: 80%; /* 最大宽度为容器宽度 */
     height: auto; /* 高度自动 */
     border-radius: 8px; /* 可选：添加圆角效果 */
+}
+
+@media (min-width: 768px) {
+    ion-content {
+        --padding-start: 10%;
+        --padding-end: 10%;
+    }
+    
+    .login-card {
+        max-width: 600px;
+        margin: 24px auto;
+    }
+}
+
+ion-button {
+    transition: transform 0.2s ease;
+    
+    &:active {
+        transform: scale(0.95);
+    }
 }