首页 发现 帮助
注册 登录
ljf123
/
ai-sport
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

tab1

ljf123 1 月之前
父节点
7d2967301a
当前提交
8b72454a50
共有 3 个文件被更改，包括 948 次插入 和 223 次删除
合并视图 显示文件统计
  1. 192 10
      src/app/tab1/tab1.page.html
  2. 603 209
      src/app/tab1/tab1.page.scss
  3. 153 4
      src/app/tab1/tab1.page.ts

+ 192 - 10
src/app/tab1/tab1.page.html
查看文件 

@@ -17,7 +17,8 @@
 
   <app-explore-container name="Tab 1 page"></app-explore-container>
 
   <app-explore-container name="Tab 1 page"></app-explore-container>
 
 </ion-content>
 
 </ion-content>
 
 -->
 
 -->
 
-<!DOCTYPE html>
 
+
 
+<!-- <!DOCTYPE html>
 
 <html lang="zh-CN">
 
 <html lang="zh-CN">
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
@@ -28,9 +29,9 @@
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
-    1ssdwa
 
+    1s
 
     <div class="swim-container">
 
     <div class="swim-container">
 
-        <!-- 头部区域 -->
 
+       
         <div class="header">
 
         <div class="header">
 
             <div class="user-info">
 
             <div class="user-info">
 
                 <div class="avatar">于</div>
 
                 <div class="avatar">于</div>
 
@@ -40,10 +41,9 @@
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
-        
-        <!-- 数据展示区 -->
 
+     
         <div class="data-section">
 
         <div class="data-section">
 
-            <!-- 主要数据 - 优化间距 -->
 
+     
             <div class="main-data">
 
             <div class="main-data">
 
                 <div class="data-item">
 
                 <div class="data-item">
 
                     <div class="data-value">2.57</div>
 
                     <div class="data-value">2.57</div>
 
@@ -63,12 +63,12 @@
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
             
             
-            <!-- 地图区域 -->
 
+       
             <div class="map-area">
 
             <div class="map-area">
 
                 游泳路线地图
 
                 游泳路线地图
 
             </div>
 
             </div>
 
             
             
-            <!-- 详细数据 -->
 
+       
             <div class="detail-data">
 
             <div class="detail-data">
 
                 <div class="detail-card">
 
                 <div class="detail-card">
 
                     <div class="data-value">1,850</div>
 
                     <div class="data-value">1,850</div>
 
@@ -89,11 +89,193 @@
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
         
         
-        <!-- 底部区域 -->
 
+    
         <div class="footer">
 
         <div class="footer">
 
             <div class="source">数据来源: 高德地图 | 知乎&#64;阿辞</div>
 
             <div class="source">数据来源: 高德地图 | 知乎&#64;阿辞</div>
 
             <button class="action-btn">保存并分享</button>
 
             <button class="action-btn">保存并分享</button>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
 </body>
 
 </body>
 
-</html>
 
+</html> -->
 
+<ion-header [translucent]="true">
 
+  <ion-toolbar>
 
+    <!-- 顶部导航栏 -->
 
+    <ion-segment [(ngModel)]="selectedTab" scrollable>
 
+      <ion-segment-button value="recommend" class="active-tab">
 
+        <ion-label>推荐</ion-label>
 
+      </ion-segment-button>
 
+      <ion-segment-button value="vip">
 
+        <ion-icon name="crown-outline" slot="start"></ion-icon>
 
+        <ion-label>会员</ion-label>
 
+        <ion-badge *ngIf="!isVip" color="warning" slot="end">限免试用</ion-badge>
 
+      </ion-segment-button>
 
+      <ion-segment-button value="camp">
 
+        <ion-icon name="flame-outline" slot="start"></ion-icon>
 
+        <ion-label>减脂营</ion-label>
 
+        <ion-badge *ngIf="hasCampActivity" color="danger" slot="end"></ion-badge>
 
+      </ion-segment-button>
 
+    </ion-segment>
 
+
 
+    <ion-buttons slot="end">
 
+      <ion-button (click)="openNotifications()">
 
+        <ion-icon name="notifications-outline"></ion-icon>
 
+        <ion-badge *ngIf="unreadNotifications" color="danger" class="notification-badge"></ion-badge>
 
+      </ion-button>
 
+    </ion-buttons>
 
+  </ion-toolbar>
 
+
 
+  <!-- 搜索栏 -->
 
+  <ion-toolbar>
 
+    <ion-searchbar 
+      [(ngModel)]="searchQuery" 
+      [placeholder]="currentSearchHint" 
+      animated
 
+      (click)="openSearchModal()">
 
+    </ion-searchbar>
 
+  </ion-toolbar>
 
+</ion-header>
 
+
 
+<ion-content [fullscreen]="true">
 
+  <!-- 快速入口分类（金刚区） -->
 
+  <div class="quick-access-section">
 
+    <h2 class="section-title">快速开始</h2>
 
+    <div class="quick-access-grid">
 
+      <!-- 第一行 -->
 
+      <ion-button fill="clear" class="quick-access-btn" *ngFor="let item of quickAccessItems.slice(0,4)">
 
+        <div class="btn-content">
 
+          <ion-icon [name]="item.icon"></ion-icon>
 
+          <span>{{item.name}}</span>
 
+        </div>
 
+      </ion-button>
 
+      
+      <!-- 第二行 -->
 
+      <ion-button fill="clear" class="quick-access-btn" *ngFor="let item of quickAccessItems.slice(4,8)">
 
+        <div class="btn-content">
 
+          <ion-icon [name]="item.icon"></ion-icon>
 
+          <span>{{item.name}}</span>
 
+        </div>
 
+      </ion-button>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- 运动数据模块 -->
 
+  <div class="data-section">
 
+    <h2 class="section-title">今日运动</h2>
 
+    <ion-card>
 
+      <ion-card-content>
 
+        <div class="calories-data">
 
+          <div class="data-main">
 
+            <span class="calories-value">479</span>
 
+            <span class="calories-unit">千卡</span>
 
+            <ion-icon name="trending-up-outline" class="trend-icon"></ion-icon>
 
+          </div>
 
+          <div class="progress-container">
 
+            <ion-progress-bar [value]="0.95" color="primary"></ion-progress-bar>
 
+            <span class="progress-text">今日目标: 500千卡</span>
 
+          </div>
 
+        </div>
 
+        <ion-button fill="clear" class="rank-btn">
 
+          <ion-icon name="podium-outline" slot="start"></ion-icon>
 
+          <span>好友排名: TOP 20%</span>
 
+        </ion-button>
 
+      </ion-card-content>
 
+    </ion-card>
 
+  </div>
 
+
 
+  <!-- 课程推荐模块 -->
 
+  <div class="course-section">
 
+    <h2 class="section-title">课程推荐</h2>
 
+    
+    <!-- 最近练习 -->
 
+    <div class="course-row">
 
+      <div class="row-header">
 
+        <h3>最近练习</h3>
 
+        <ion-button fill="clear" size="small">更多</ion-button>
 
+      </div>
 
+      <!-- 替换原来的 ion-slides 部分 -->
 
+<swiper-container [init]="false" [config]="swiperConfig">
 
+  <swiper-slide *ngFor="let course of recentCourses">
 
+    <ion-card class="course-card">
 
+      <img [src]="course.image" alt="course image">
 
+      <ion-card-header>
 
+        <ion-card-title>{{course.title}}</ion-card-title>
 
+        <ion-card-subtitle>
 
+          {{course.duration}} · {{course.level}}
 
+          <span class="calories-badge">🔥{{course.calories}}kcal</span>
 
+        </ion-card-subtitle>
 
+      </ion-card-header>
 
+      <ion-progress-bar *ngIf="course.progress" [value]="course.progress"></ion-progress-bar>
 
+    </ion-card>
 
+  </swiper-slide>
 
+</swiper-container>
 
+    </div>
 
+    
+    <!-- 热门课程 -->
 
+    <div class="course-row">
 
+      <div class="row-header">
 
+        <h3>热门课程</h3>
 
+        <ion-button fill="clear" size="small">更多</ion-button>
 
+      </div>
 
+      <ion-slides [options]="slideOpts">
 
+        <ion-slide *ngFor="let course of popularCourses">
 
+          <ion-card class="course-card">
 
+            <img [src]="course.image" alt="course image">
 
+            <div class="card-badge" *ngIf="course.badge">
 
+              <ion-badge [color]="course.badge.color">{{course.badge.text}}</ion-badge>
 
+            </div>
 
+            <ion-card-header>
 
+              <ion-card-title>{{course.title}}</ion-card-title>
 
+              <ion-card-subtitle>
 
+                {{course.duration}} · {{course.level}}
 
+                <span class="calories-badge">🔥{{course.calories}}kcal</span>
 
+              </ion-card-subtitle>
 
+            </ion-card-header>
 
+            <div class="participants">
 
+              <ion-icon name="people-outline"></ion-icon>
 
+              <span>{{course.participants}}人训练</span>
 
+            </div>
 
+          </ion-card>
 
+        </ion-slide>
 
+      </ion-slides>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- 为你推荐 -->
 
+  <div class="recommend-section">
 
+    <div class="section-header">
 
+      <h2 class="section-title">为你推荐</h2>
 
+      <ion-button fill="clear" size="small">查看更多</ion-button>
 
+    </div>
 
+    <ion-list>
 
+      <ion-item *ngFor="let course of recommendedCourses" class="recommend-item">
 
+        <ion-thumbnail slot="start">
 
+          <img [src]="course.image">
 
+          <div class="match-badge">{{course.matchRate}}%匹配</div>
 
+        </ion-thumbnail>
 
+        <ion-label>
 
+          <h3>{{course.title}}</h3>
 
+          <p>{{course.duration}} · {{course.level}}</p>
 
+          <p class="course-description">{{course.description}}</p>
 
+        </ion-label>
 
+      </ion-item>
 
+    </ion-list>
 
+  </div>
 
+
 
+  <!-- 年度报告入口 -->
 
+  <div class="report-section">
 
+    <ion-card (click)="viewReport()">
 
+      <ion-card-header>
 
+        <ion-card-title>我的2024运动报告</ion-card-title>
 
+        <ion-card-subtitle>已生成 · 解锁3枚新徽章</ion-card-subtitle>
 
+      </ion-card-header>
 
+      <ion-card-content>
 
+        <div class="badges-container">
 
+          <ion-badge *ngFor="let badge of unlockedBadges" color="light">
 
+            <ion-icon [name]="badge.icon"></ion-icon>
 
+            {{badge.name}}
 
+          </ion-badge>
 
+        </div>
 
+      </ion-card-content>
 
+    </ion-card>
 
+  </div>
 
+</ion-content>

+ 603 - 209
src/app/tab1/tab1.page.scss
查看文件 

@@ -1,223 +1,617 @@
 
-* {
 
-    margin: 0;
 
-    padding: 0;
 
-    box-sizing: border-box;
 
-    font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 
-}
 
-
 
-body {
 
-    background-color: #f5f9ff;
 
-    min-height: 100vh;
 
-    display: flex;
 
-    justify-content: center;
 
-    align-items: flex-start;
 
-    padding: 15px;
 
-}
 
-
 
-.swim-container {
 
-    width: 100%;
 
-    max-width: 500px;
 
-    background: white;
 
-    border-radius: 16px;
 
-    box-shadow: 0 5px 15px rgba(30, 144, 255, 0.1);
 
-    overflow: hidden;
 
-}
 
-
 
-.header {
 
-    background: linear-gradient(135deg, #1e90ff, #00bfff);
 
-    color: white;
 
-    padding: 20px;
 
-    position: relative;
 
-    overflow: hidden;
 
-}
 
-
 
-.header::after {
 
-    content: '';
 
-    position: absolute;
 
-    bottom: -50px;
 
-    right: -50px;
 
-    width: 150px;
 
-    height: 150px;
 
-    background: rgba(255, 255, 255, 0.1);
 
-    border-radius: 50%;
 
-}
 
-
 
-.user-info {
 
-    display: flex;
 
-    align-items: center;
 
-    gap: 15px;
 
-    margin-bottom: 15px;
 
-    position: relative;
 
-    z-index: 1;
 
-}
 
-
 
-.avatar {
 
-    width: 60px;
 
-    height: 60px;
 
-    background: rgba(255, 255, 255, 0.2);
 
-    border-radius: 50%;
 
-    display: flex;
 
-    align-items: center;
 
-    justify-content: center;
 
-    font-size: 24px;
 
-    font-weight: bold;
 
-}
 
-
 
-.user-text h2 {
 
-    margin: 0;
 
-    font-size: 20px;
 
-}
 
-
 
-.user-text p {
 
-    margin: 5px 0 0;
 
-    opacity: 0.9;
 
-    font-size: 14px;
 
-}
 
-
 
-/* 优化后的数据区域 */
 
-.data-section {
 
-    padding: 15px;
 
-}
 
-
 
-.main-data {
 
-    display: flex;
 
-    justify-content: space-between;
 
-    margin-bottom: 20px;
 
-    gap: 10px;
 
-    flex-wrap: wrap;
 
-}
 
-
 
-.data-item {
 
-    text-align: center;
 
-    min-width: calc(50% - 20px);
 
-    margin-bottom: 15px;
 
-    padding: 12px;
 
-    background: rgba(30, 144, 255, 0.05);
 
-    border-radius: 10px;
 
-    flex: 1;
 
-}
 
-
 
-.data-value {
 
-    font-size: 24px;
 
-    font-weight: bold;
 
-    color: #1e90ff;
 
-    margin-bottom: 8px;
 
-}
 
-
 
-.data-label {
 
-    font-size: 13px;
 
-    color: #666;
 
-    white-space: nowrap;
 
-}
 
-
 
-.map-area {
 
-    height: 180px;
 
-    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
 
-    border-radius: 12px;
 
-    margin-bottom: 20px;
 
-    display: flex;
 
-    align-items: center;
 
-    justify-content: center;
 
-    color: white;
 
-    font-weight: bold;
 
-    position: relative;
 
-    overflow: hidden;
 
-}
 
-
 
-.detail-data {
 
-    display: grid;
 
-    grid-template-columns: repeat(2, 1fr);
 
-    gap: 12px;
 
-}
 
-
 
-.detail-card {
 
-    background: #f8fafc;
 
-    border-radius: 10px;
 
-    padding: 12px;
 
-    text-align: center;
 
-}
 
-
 
-.footer {
 
-    padding: 15px;
 
-    border-top: 1px solid #eee;
 
-    display: flex;
 
-    justify-content: space-between;
 
-    align-items: center;
 
-}
 
-
 
-.source {
 
-    font-size: 12px;
 
-    color: #999;
 
-}
 
-
 
-.action-btn {
 
-    background: #1e90ff;
 
-    color: white;
 
-    border: none;
 
-    padding: 8px 16px;
 
-    border-radius: 18px;
 
-    font-size: 14px;
 
-    display: flex;
 
-    align-items: center;
 
-    gap: 5px;
 
-    cursor: pointer;
 
-}
 
-
 
-.action-btn::before {
 
-    content: '↑';
 
-}
 
-
 
-/* 手机端特定调整 */
 
-@media (max-width: 480px) {
 
-    .main-data {
 
-        gap: 8px;
 
-    }
 
-    .data-item {
 
-        min-width: calc(50% - 15px);
 
-        padding: 10px;
 
-    }
 
-    .data-value {
 
-        font-size: 22px;
 
-    }
 
-    .map-area {
 
-        height: 160px;
 
-    }
 
-}
 
+// * {
 
+//     margin: 0;
 
+//     padding: 0;
 
+//     box-sizing: border-box;
 
+//     font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 
+// }
 
 
 
-/* 电脑端适配 */
 
-@media (min-width: 768px) {
 
-    body {
 
-        align-items: center;
 
-        padding: 30px;
 
+// body {
 
+//     background-color: #f5f9ff;
 
+//     min-height: 100vh;
 
+//     display: flex;
 
+//     justify-content: center;
 
+//     align-items: flex-start;
 
+//     padding: 15px;
 
+// }
 
+
 
+// .swim-container {
 
+//     width: 100%;
 
+//     max-width: 500px;
 
+//     background: white;
 
+//     border-radius: 16px;
 
+//     box-shadow: 0 5px 15px rgba(30, 144, 255, 0.1);
 
+//     overflow: hidden;
 
+// }
 
+
 
+// .header {
 
+//     background: linear-gradient(135deg, #1e90ff, #00bfff);
 
+//     color: white;
 
+//     padding: 20px;
 
+//     position: relative;
 
+//     overflow: hidden;
 
+// }
 
+
 
+// .header::after {
 
+//     content: '';
 
+//     position: absolute;
 
+//     bottom: -50px;
 
+//     right: -50px;
 
+//     width: 150px;
 
+//     height: 150px;
 
+//     background: rgba(255, 255, 255, 0.1);
 
+//     border-radius: 50%;
 
+// }
 
+
 
+// .user-info {
 
+//     display: flex;
 
+//     align-items: center;
 
+//     gap: 15px;
 
+//     margin-bottom: 15px;
 
+//     position: relative;
 
+//     z-index: 1;
 
+// }
 
+
 
+// .avatar {
 
+//     width: 60px;
 
+//     height: 60px;
 
+//     background: rgba(255, 255, 255, 0.2);
 
+//     border-radius: 50%;
 
+//     display: flex;
 
+//     align-items: center;
 
+//     justify-content: center;
 
+//     font-size: 24px;
 
+//     font-weight: bold;
 
+// }
 
+
 
+// .user-text h2 {
 
+//     margin: 0;
 
+//     font-size: 20px;
 
+// }
 
+
 
+// .user-text p {
 
+//     margin: 5px 0 0;
 
+//     opacity: 0.9;
 
+//     font-size: 14px;
 
+// }
 
+
 
+// /* 优化后的数据区域 */
 
+// .data-section {
 
+//     padding: 15px;
 
+// }
 
+
 
+// .main-data {
 
+//     display: flex;
 
+//     justify-content: space-between;
 
+//     margin-bottom: 20px;
 
+//     gap: 10px;
 
+//     flex-wrap: wrap;
 
+// }
 
+
 
+// .data-item {
 
+//     text-align: center;
 
+//     min-width: calc(50% - 20px);
 
+//     margin-bottom: 15px;
 
+//     padding: 12px;
 
+//     background: rgba(30, 144, 255, 0.05);
 
+//     border-radius: 10px;
 
+//     flex: 1;
 
+// }
 
+
 
+// .data-value {
 
+//     font-size: 24px;
 
+//     font-weight: bold;
 
+//     color: #1e90ff;
 
+//     margin-bottom: 8px;
 
+// }
 
+
 
+// .data-label {
 
+//     font-size: 13px;
 
+//     color: #666;
 
+//     white-space: nowrap;
 
+// }
 
+
 
+// .map-area {
 
+//     height: 180px;
 
+//     background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
 
+//     border-radius: 12px;
 
+//     margin-bottom: 20px;
 
+//     display: flex;
 
+//     align-items: center;
 
+//     justify-content: center;
 
+//     color: white;
 
+//     font-weight: bold;
 
+//     position: relative;
 
+//     overflow: hidden;
 
+// }
 
+
 
+// .detail-data {
 
+//     display: grid;
 
+//     grid-template-columns: repeat(2, 1fr);
 
+//     gap: 12px;
 
+// }
 
+
 
+// .detail-card {
 
+//     background: #f8fafc;
 
+//     border-radius: 10px;
 
+//     padding: 12px;
 
+//     text-align: center;
 
+// }
 
+
 
+// .footer {
 
+//     padding: 15px;
 
+//     border-top: 1px solid #eee;
 
+//     display: flex;
 
+//     justify-content: space-between;
 
+//     align-items: center;
 
+// }
 
+
 
+// .source {
 
+//     font-size: 12px;
 
+//     color: #999;
 
+// }
 
+
 
+// .action-btn {
 
+//     background: #1e90ff;
 
+//     color: white;
 
+//     border: none;
 
+//     padding: 8px 16px;
 
+//     border-radius: 18px;
 
+//     font-size: 14px;
 
+//     display: flex;
 
+//     align-items: center;
 
+//     gap: 5px;
 
+//     cursor: pointer;
 
+// }
 
+
 
+// .action-btn::before {
 
+//     content: '↑';
 
+// }
 
+
 
+// /* 手机端特定调整 */
 
+// @media (max-width: 480px) {
 
+//     .main-data {
 
+//         gap: 8px;
 
+//     }
 
+//     .data-item {
 
+//         min-width: calc(50% - 15px);
 
+//         padding: 10px;
 
+//     }
 
+//     .data-value {
 
+//         font-size: 22px;
 
+//     }
 
+//     .map-area {
 
+//         height: 160px;
 
+//     }
 
+// }
 
+
 
+// /* 电脑端适配 */
 
+// @media (min-width: 768px) {
 
+//     body {
 
+//         align-items: center;
 
+//         padding: 30px;
 
+//     }
 
+    
+//     .swim-container {
 
+//         max-width: 800px;
 
+//         display: grid;
 
+//         grid-template-columns: 1fr 1fr;
 
+//     }
 
+    
+//     .header {
 
+//         grid-column: 1 / -1;
 
+//     }
 
+    
+//     .map-area {
 
+//         height: 250px;
 
+//         margin: 0 15px 15px 0;
 
+//     }
 
+    
+//     .data-section {
 
+//         display: grid;
 
+//         grid-template-columns: 1fr 1fr;
 
+//         gap: 15px;
 
+//         padding: 15px;
 
+//     }
 
+    
+//     .main-data {
 
+//         grid-column: 1 / -1;
 
+//     }
 
+    
+//     .footer {
 
+//         grid-column: 1 / -1;
 
+//     }
 
+// }
 
+/* 顶部导航栏样式 */
 
+ion-toolbar {
 
+    --background: var(--ion-color-primary);
 
+    --color: white;
 
+    
+    ion-segment {
 
+      ion-segment-button {
 
+        --color: rgba(255, 255, 255, 0.7);
 
+        --color-checked: white;
 
+        --indicator-color: transparent;
 
+        
+        &.active-tab {
 
+          --color: white;
 
+          position: relative;
 
+          
+          &::after {
 
+            content: '';
 
+            position: absolute;
 
+            bottom: 0;
 
+            left: 25%;
 
+            width: 50%;
 
+            height: 3px;
 
+            background: white;
 
+            border-radius: 3px;
 
+          }
 
+        }
 
+        
+        ion-icon {
 
+          font-size: 16px;
 
+        }
 
+        
+        ion-badge {
 
+          margin-left: 4px;
 
+        }
 
+      }
 
     }
 
     }
 
     
     
-    .swim-container {
 
-        max-width: 800px;
 
-        display: grid;
 
-        grid-template-columns: 1fr 1fr;
 
+    .notification-badge {
 
+      position: absolute;
 
+      top: 5px;
 
+      right: 5px;
 
+      width: 8px;
 
+      height: 8px;
 
+      border-radius: 50%;
 
+    }
 
+  }
 
+  
+  ion-searchbar {
 
+    --background: rgba(255, 255, 255, 0.2);
 
+    --color: white;
 
+    --placeholder-color: rgba(255, 255, 255, 0.7);
 
+    --border-radius: 20px;
 
+    padding: 0 10px;
 
+  }
 
+  
+  /* 内容区域样式 */
 
+  ion-content {
 
+    --background: #f5f5f5;
 
+  }
 
+  
+  .section-title {
 
+    font-size: 18px;
 
+    font-weight: bold;
 
+    margin: 16px 16px 8px;
 
+    color: var(--ion-color-dark);
 
+  }
 
+  
+  /* 快速入口分类 */
 
+  .quick-access-section {
 
+    background: white;
 
+    padding: 10px 0;
 
+    margin-bottom: 10px;
 
+    
+    .quick-access-grid {
 
+      display: grid;
 
+      grid-template-columns: repeat(4, 1fr);
 
+      gap: 10px;
 
+      padding: 0 10px;
 
+      
+      .quick-access-btn {
 
+        --padding-start: 0;
 
+        --padding-end: 0;
 
+        height: 80px;
 
+        margin: 0;
 
+        
+        .btn-content {
 
+          display: flex;
 
+          flex-direction: column;
 
+          align-items: center;
 
+          
+          ion-icon {
 
+            font-size: 24px;
 
+            margin-bottom: 8px;
 
+            color: var(--ion-color-primary);
 
+          }
 
+          
+          span {
 
+            font-size: 12px;
 
+            color: var(--ion-color-medium);
 
+          }
 
+        }
 
+      }
 
     }
 
     }
 
+  }
 
+  
+  /* 运动数据模块 */
 
+  .data-section {
 
+    background: white;
 
+    padding: 10px 0;
 
+    margin-bottom: 10px;
 
     
     
-    .header {
 
-        grid-column: 1 / -1;
 
+    ion-card {
 
+      margin: 0 10px;
 
+      box-shadow: none;
 
+      border-radius: 12px;
 
+      
+      ion-card-content {
 
+        padding: 16px;
 
+        
+        .calories-data {
 
+          margin-bottom: 16px;
 
+          
+          .data-main {
 
+            display: flex;
 
+            align-items: baseline;
 
+            margin-bottom: 8px;
 
+            
+            .calories-value {
 
+              font-size: 28px;
 
+              font-weight: bold;
 
+              color: var(--ion-color-primary);
 
+            }
 
+            
+            .calories-unit {
 
+              font-size: 14px;
 
+              color: var(--ion-color-medium);
 
+              margin: 0 8px;
 
+            }
 
+            
+            .trend-icon {
 
+              color: var(--ion-color-success);
 
+            }
 
+          }
 
+          
+          .progress-container {
 
+            display: flex;
 
+            align-items: center;
 
+            
+            ion-progress-bar {
 
+              flex: 1;
 
+              margin-right: 8px;
 
+              --progress-background: var(--ion-color-light);
 
+              border-radius: 4px;
 
+              height: 6px;
 
+            }
 
+            
+            .progress-text {
 
+              font-size: 12px;
 
+              color: var(--ion-color-medium);
 
+            }
 
+          }
 
+        }
 
+        
+        .rank-btn {
 
+          --padding-start: 0;
 
+          --padding-end: 0;
 
+          height: auto;
 
+          margin: 0;
 
+          
+          ion-icon {
 
+            color: var(--ion-color-warning);
 
+            margin-right: 4px;
 
+          }
 
+          
+          span {
 
+            font-size: 14px;
 
+            color: var(--ion-color-medium);
 
+          }
 
+        }
 
+      }
 
     }
 
     }
 
+  }
 
+  
+  /* 课程推荐模块 */
 
+  .course-section {
 
+    background: white;
 
+    padding: 10px 0;
 
+    margin-bottom: 10px;
 
     
     
-    .map-area {
 
-        height: 250px;
 
-        margin: 0 15px 15px 0;
 
+    .course-row {
 
+      margin-bottom: 20px;
 
+      
+      .row-header {
 
+        display: flex;
 
+        justify-content: space-between;
 
+        align-items: center;
 
+        padding: 0 16px;
 
+        margin-bottom: 10px;
 
+        
+        h3 {
 
+          margin: 0;
 
+          font-size: 16px;
 
+          font-weight: bold;
 
+        }
 
+      }
 
+      
+      ion-slides {
 
+        ion-slide {
 
+          width: 70%;
 
+          
+          ion-card {
 
+            margin: 0 8px;
 
+            border-radius: 12px;
 
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
+            
+            img {
 
+              width: 100%;
 
+              height: 120px;
 
+              object-fit: cover;
 
+            }
 
+            
+            .card-badge {
 
+              position: absolute;
 
+              top: 8px;
 
+              right: 8px;
 
+            }
 
+            
+            ion-card-header {
 
+              padding: 12px;
 
+              
+              ion-card-title {
 
+                font-size: 16px;
 
+                font-weight: bold;
 
+                margin-bottom: 4px;
 
+              }
 
+              
+              ion-card-subtitle {
 
+                display: flex;
 
+                align-items: center;
 
+                font-size: 12px;
 
+                color: var(--ion-color-medium);
 
+                
+                .calories-badge {
 
+                  margin-left: 8px;
 
+                  color: var(--ion-color-danger);
 
+                  font-size: 11px;
 
+                }
 
+              }
 
+            }
 
+            
+            ion-progress-bar {
 
+              --progress-background: var(--ion-color-primary);
 
+              height: 4px;
 
+            }
 
+            
+            .participants {
 
+              display: flex;
 
+              align-items: center;
 
+              padding: 0 12px 12px;
 
+              font-size: 12px;
 
+              color: var(--ion-color-medium);
 
+              
+              ion-icon {
 
+                margin-right: 4px;
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
     }
 
     }
 
+  }
 
+  
+  /* 为你推荐 */
 
+  .recommend-section {
 
+    background: white;
 
+    padding: 10px 0;
 
+    margin-bottom: 10px;
 
     
     
-    .data-section {
 
-        display: grid;
 
-        grid-template-columns: 1fr 1fr;
 
-        gap: 15px;
 
-        padding: 15px;
 
+    .section-header {
 
+      display: flex;
 
+      justify-content: space-between;
 
+      align-items: center;
 
+      padding: 0 16px;
 
+      margin-bottom: 10px;
 
     }
 
     }
 
     
     
-    .main-data {
 
-        grid-column: 1 / -1;
 
+    ion-list {
 
+      background: transparent;
 
+      padding: 0;
 
+      
+      ion-item {
 
+        --padding-start: 16px;
 
+        --inner-padding-end: 16px;
 
+        --border-color: var(--ion-color-light-shade);
 
+        
+        ion-thumbnail {
 
+          position: relative;
 
+          width: 80px;
 
+          height: 60px;
 
+          margin: 8px 16px 8px 0;
 
+          
+          img {
 
+            border-radius: 8px;
 
+            width: 100%;
 
+            height: 100%;
 
+            object-fit: cover;
 
+          }
 
+          
+          .match-badge {
 
+            position: absolute;
 
+            bottom: -6px;
 
+            right: -6px;
 
+            background: var(--ion-color-primary);
 
+            color: white;
 
+            font-size: 10px;
 
+            padding: 2px 6px;
 
+            border-radius: 10px;
 
+          }
 
+        }
 
+        
+        ion-label {
 
+          h3 {
 
+            font-size: 16px;
 
+            font-weight: bold;
 
+            margin-bottom: 4px;
 
+          }
 
+          
+          p {
 
+            font-size: 12px;
 
+            color: var(--ion-color-medium);
 
+            margin-bottom: 4px;
 
+          }
 
+          
+          .course-description {
 
+            display: -webkit-box;
 
+            -webkit-line-clamp: 2;
 
+            -webkit-box-orient: vertical;
 
+            overflow: hidden;
 
+            text-overflow: ellipsis;
 
+            font-size: 12px;
 
+            color: var(--ion-color-medium);
 
+          }
 
+        }
 
+      }
 
     }
 
     }
 
+  }
 
+  
+  /* 年度报告入口 */
 
+  .report-section {
 
+    padding: 10px 16px;
 
+    margin-bottom: 20px;
 
     
     
-    .footer {
 
-        grid-column: 1 / -1;
 
+    ion-card {
 
+      border-radius: 12px;
 
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 
+      background: linear-gradient(135deg, var(--ion-color-primary), var(--ion-color-secondary));
 
+      color: white;
 
+      
+      ion-card-header {
 
+        padding-bottom: 0;
 
+        
+        ion-card-title {
 
+          font-size: 18px;
 
+          font-weight: bold;
 
+        }
 
+        
+        ion-card-subtitle {
 
+          color: rgba(255, 255, 255, 0.8);
 
+          font-size: 14px;
 
+        }
 
+      }
 
+      
+      ion-card-content {
 
+        padding-top: 8px;
 
+        
+        .badges-container {
 
+          display: flex;
 
+          flex-wrap: wrap;
 
+          gap: 8px;
 
+          
+          ion-badge {
 
+            --background: rgba(255, 255, 255, 0.2);
 
+            --color: white;
 
+            font-weight: normal;
 
+            
+            ion-icon {
 
+              font-size: 12px;
 
+              margin-right: 4px;
 
+            }
 
+          }
 
+        }
 
+      }
 
     }
 
     }
 
-}
 
+  }

+ 153 - 4
src/app/tab1/tab1.page.ts
查看文件 

@@ -1,13 +1,162 @@
 
+// import { Component } from '@angular/core';
 
+// import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
 
+// import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
+
 
+// @Component({
 
+//   selector: 'app-tab1',
 
+//   templateUrl: 'tab1.page.html',
 
+//   styleUrls: ['tab1.page.scss'],
 
+//   imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
 
+// })
 
+// export class Tab1Page {
 
+//   constructor() {}
 
+// }
 
 import { Component } from '@angular/core';
 
 import { Component } from '@angular/core';
 
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
 
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
+import { 
+  IonHeader, IonToolbar, IonSegment, IonSegmentButton, IonLabel, 
+  IonIcon, IonBadge, IonButtons, IonButton, IonSearchbar, 
+  IonContent, IonCard, IonCardContent, IonCardHeader, 
+  IonCardTitle, IonCardSubtitle, IonProgressBar, IonList, 
+  IonItem, IonThumbnail 
+} from '@ionic/angular/standalone';
 
+import { CommonModule } from '@angular/common';
 
+import { FormsModule } from '@angular/forms'; // 添加这行
 
+import { register } from 'swiper/element/bundle';
 
+
 
+// 注册 Swiper 组件
 
+register();
 
 
 
 @Component({
 
 @Component({
 
   selector: 'app-tab1',
 
   selector: 'app-tab1',
 
   templateUrl: 'tab1.page.html',
 
   templateUrl: 'tab1.page.html',
 
   styleUrls: ['tab1.page.scss'],
 
   styleUrls: ['tab1.page.scss'],
 
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
 
+  standalone: true,
 
+  imports: [
 
+    CommonModule,
 
+    FormsModule,
 
+    IonHeader, IonToolbar, IonSegment, IonSegmentButton, IonLabel, 
+    IonIcon, IonBadge, IonButtons, IonButton, IonSearchbar, 
+    IonContent, IonCard, IonCardContent, IonCardHeader, 
+    IonCardTitle, IonCardSubtitle, IonProgressBar, IonList, 
+    IonItem, IonThumbnail
 
+  ]
 
 })
 
 })
 
 export class Tab1Page {
 
 export class Tab1Page {
 
-  constructor() {}
 
+  selectedTab = 'recommend';
 
+  isVip = false;
 
+  hasCampActivity = true;
 
+  unreadNotifications = true;
 
+  
+  searchQuery = '';
 
+  searchHints = ['5日突击燃脂', '晨间瑜伽', 'HIIT训练', '零基础拉伸'];
 
+  currentSearchHint = this.searchHints[0];
 
+  
+  // Swiper 配置
 
+  swiperConfig = {
 
+    slidesPerView: 'auto',
 
+    spaceBetween: 8,
 
+    freeMode: true
 
+  };
 
+
 
+  // 快速入口分类
 
+  quickAccessItems = [
 
+    { name: '跑步', icon: 'walk-outline' },
 
+    { name: '瑜伽', icon: 'body-outline' },
 
+    { name: '行走', icon: 'footsteps-outline' },
 
+    { name: '燃脂', icon: 'flame-outline' },
 
+    { name: '直播课', icon: 'videocam-outline' },
 
+    { name: '活动挑战', icon: 'trophy-outline' },
 
+    { name: '数据统计', icon: 'stats-chart-outline' },
 
+    { name: '商城', icon: 'cart-outline' }
 
+  ];
 
+  
+  // 最近练习
 
+  recentCourses = [
 
+    {
 
+      title: '活力燃脂走',
 
+      image: 'assets/images/workout1.jpg',
 
+      duration: '20分钟',
 
+      level: 'K1 零基础',
 
+      calories: 220,
 
+      progress: 0.6
 
+    },
 
+    {
 
+      title: '晨间唤醒瑜伽',
 
+      image: 'assets/images/yoga1.jpg',
 
+      duration: '15分钟',
 
+      level: 'K1 零基础',
 
+      calories: 180,
 
+      progress: 0.3
 
+    }
 
+  ];
 
+  
+  // 热门课程
 
+  popularCourses = [
 
+    {
 
+      title: '马甲线养成',
 
+      image: 'assets/images/abs1.jpg',
 
+      duration: '30分钟',
 
+      level: 'K2 初级',
 
+      calories: 280,
 
+      participants: '10万+'
 
+    },
 
+    {
 
+      title: '全身燃脂训练',
 
+      image: 'assets/images/workout2.jpg',
 
+      duration: '25分钟',
 
+      level: 'K2 初级',
 
+      calories: 320,
 
+      participants: '8.2万+'
 
+    }
 
+  ];
 
+  
+  // 为你推荐
 
+  recommendedCourses = [
 
+    {
 
+      title: '20分钟站立燃脂',
 
+      image: 'assets/images/workout3.jpg',
 
+      duration: '20分钟',
 
+      level: 'K1 零基础',
 
+      calories: 240,
 
+      matchRate: 92,
 
+      description: '无需器械，站立完成的高效燃脂训练'
 
+    },
 
+    {
 
+      title: '深度睡眠冥想',
 
+      image: 'assets/images/meditation1.jpg',
 
+      duration: '15分钟',
 
+      level: 'K1 零基础',
 
+      calories: 80,
 
+      matchRate: 88,
 
+      description: '帮助你快速入睡，提高睡眠质量'
 
+    }
 
+  ];
 
+  
+  // 解锁徽章
 
+  unlockedBadges = [
 
+    { name: '坚持之星', icon: 'star-outline' },
 
+    { name: '燃脂达人', icon: 'flame-outline' },
 
+    { name: '早起鸟', icon: 'alarm-outline' }
 
+  ];
 
+  
+  constructor() {
 
+    // 模拟搜索提示轮播
 
+    setInterval(() => {
 
+      const currentIndex = this.searchHints.indexOf(this.currentSearchHint);
 
+      const nextIndex = (currentIndex + 1) % this.searchHints.length;
 
+      this.currentSearchHint = this.searchHints[nextIndex];
 
+    }, 3000);
 
+  }
 
+  
+  openSearchModal() {
 
+    console.log('打开搜索模态框');
 
+  }
 
+  
+  openNotifications() {
 
+    console.log('打开通知页面');
 
+  }
 
+  
+  viewReport() {
 
+    console.log('查看年度报告');
 
+  }
 
 }
 
 }