app-first

src/app/tab1/tab1.page.html

@@ -1,17 +1,186 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 1
-    </ion-title>
+    <ion-buttons slot="start">
+      <div class="avatar-container">
+        <div class="avatar">
+          <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+" alt="用户头像">
+        </div>
+        <div class="streak">
+          <span class="lightning-icon">⚡</span>
+          <span class="streak-days">7天</span>
+        </div>
+      </div>
+    </ion-buttons>
+
+    <ion-buttons slot="end">
+      <div class="message-icon">
+        ✉️
+        <span class="message-badge">3</span>
+      </div>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 1</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <app-explore-container name="Tab 1 page"></app-explore-container>
+  <div class="search-container">
+    <div class="search-bar">
+      <span class="search-icon">🔍</span>
+      <input 
+        type="text" 
+        class="search-input" 
+        placeholder="跑步节奏训练" 
+        id="searchInput"
+      />
+    </div>
+  </div>
+  
+   <!-- 内容区域 -->
+   <div class="content">
+    <!-- 选项卡 -->
+    <div class="tab-container" id="tabContainer">
+        <div class="tab-item active">社区</div>
+        <div class="tab-item">推荐</div>
+        <div class="tab-item">课程</div>
+        <div class="tab-item">计划</div>
+        <div class="tab-item">奖牌</div>
+        <div class="tab-item">比赛</div>
+        <div class="tab-item">路线</div>
+        <div class="indicator" id="indicator"></div>
+    </div>
+    
+    <!-- 卡片区域 -->
+    <div class="card-container">
+        <!-- 卡片1 -->
+        <div class="card">
+            <div class="card-image">
+                <img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跑步图片">
+            </div>
+            <div class="card-content">
+                <div class="card-desc">今天完成了5公里跑步，感觉整个人都焕然一新！</div>
+                <div class="card-footer">
+                    <div class="user-info">
+                        <div class="user-avatar">
+                            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+" alt="用户头像">
+                        </div>
+                        <span class="user-name">跑步达人</span>
+                    </div>
+                    <div class="like-count">
+                        <span class="like-icon">❤️</span>
+                        245
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 卡片2 -->
+        <div class="card">
+            <div class="card-image">
+                <img src="https://images.unsplash.com/photo-1552674605-db6ffd4facb5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跑步图片">
+            </div>
+            <div class="card-content">
+                <div class="card-desc">分享我的10公里训练计划，适合新手进阶</div>
+                <div class="card-footer">
+                    <div class="user-info">
+                        <div class="user-avatar">
+                            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+" alt="用户头像">
+                        </div>
+                        <span class="user-name">运动教练</span>
+                    </div>
+                    <div class="like-count">
+                        <span class="like-icon">❤️</span>
+                        189
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 卡片3 -->
+        <div class="card">
+            <div class="card-image">
+                <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跑步图片">
+            </div>
+            <div class="card-content">
+                <div class="card-desc">晨跑5公里打卡，坚持30天了！分享我的跑步装备</div>
+                <div class="card-footer">
+                    <div class="user-info">
+                        <div class="user-avatar">
+                            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+" alt="用户头像">
+                        </div>
+                        <span class="user-name">跑步小将</span>
+                    </div>
+                    <div class="like-count">
+                        <span class="like-icon">❤️</span>
+                        312
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 卡片4 -->
+        <div class="card">
+            <div class="card-image">
+                <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跑步图片">
+            </div>
+            <div class="card-content">
+                <div class="card-desc">马拉松训练第15周，今天完成了32公里长距离跑</div>
+                <div class="card-footer">
+                    <div class="user-info">
+                        <div class="user-avatar">
+                            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+" alt="用户头像">
+                        </div>
+                        <span class="user-name">马拉松选手</span>
+                    </div>
+                    <div class="like-count">
+                        <span class="like-icon">❤️</span>
+                        428
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 卡片5 -->
+        <div class="card">
+            <div class="card-image">
+                <img src="https://images.unsplash.com/photo-1543351611-58f69d7c1781?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跑步图片">
+            </div>
+            <div class="card-content">
+                <div class="card-desc">分享我的跑步歌单，这些音乐让我跑得更远</div>
+                <div class="card-footer">
+                    <div class="user-info">
+                        <div class="user-avatar">
+                            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+" alt="用户头像">
+                        </div>
+                        <span class="user-name">音乐跑者</span>
+                    </div>
+                    <div class="like-count">
+                        <span class="like-icon">❤️</span>
+                        156
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 卡片6 -->
+        <div class="card">
+            <div class="card-image">
+                <img src="https://images.unsplash.com/photo-1538805060514-97d9cc17730c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跑步图片">
+            </div>
+            <div class="card-content">
+                <div class="card-desc">新手跑步指南：如何避免受伤和正确热身</div>
+                <div class="card-footer">
+                    <div class="user-info">
+                        <div class="user-avatar">
+                            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+" alt="用户头像">
+                        </div>
+                        <span class="user-name">健康教练</span>
+                    </div>
+                    <div class="like-count">
+                        <span class="like-icon">❤️</span>
+                        278
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
 </ion-content>

src/app/tab1/tab1.page.scss

@@ -0,0 +1,294 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+body {
+    background-color: #f5f5f5;
+    color: #333;
+    padding-bottom: 60px; /* 为底部导航留出空间 */
+}
+
+/* 顶部导航栏 */
+.header {
+    
+    position: fixed;
+    top: 0px;
+    left: 0;
+    right: 0;
+    height: 60px;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    padding: 0 15px;
+    z-index: 100;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
+}
+
+.avatar-container {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+}
+
+.avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: 2px solid #07C160;
+    position: relative;
+    overflow: hidden;
+    background-color: #f0f0f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.streak {
+    display: flex;
+    align-items: center;
+    margin-left: 5px;
+}
+
+.lightning-icon {
+    color: #FFCC00;
+    font-size: 14px;
+    margin-right: 5px;
+}
+
+.streak-days {
+    font-size: 12px;
+    color: #666;
+}
+
+.search-bar {
+    flex: 1;
+    height: 36px;
+    background-color: #f5f5f5;
+    border-radius: 18px;
+    display: flex;
+    align-items: center;
+    padding: 0 15px;
+    margin: 0 10px;
+    margin-top: 15px;
+  }
+
+.search-icon {
+    color: #999;
+    font-size: 16px;
+    margin-right: 8px;
+}
+
+.search-input {
+    flex: 1;
+    border: none;
+    background: transparent;
+    outline: none;
+    font-size: 14px;
+    color: #333;
+}
+
+.message-icon {
+    color: #333;
+    font-size: 20px;
+    position: relative;
+}
+
+.message-badge {
+    position: absolute;
+    top: -5px;
+    right: 10px;
+    width: 16px;
+    height: 16px;
+    background-color: #FF2442;
+    border-radius: 50%;
+    color: white;
+    font-size: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* 内容区域 */
+.content {
+    margin-top: 0px; /* 顶部导航高度 */
+    padding: 15px;
+}
+
+/* 选项卡 */
+.tab-container {
+    display: flex;
+    overflow-x: auto;
+    white-space: nowrap;
+    padding: 10px 0;
+    background-color: white;
+    position: relative;
+    margin-bottom: 10px;
+    scrollbar-width: none; /* Firefox */
+}
+
+.tab-container::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+}
+
+.tab-item {
+    padding: 8px 15px;
+    font-size: 14px;
+    color: #666;
+    position: relative;
+    flex-shrink: 0;
+    cursor: pointer;
+}
+
+.tab-item.active {
+    color: #333;
+    font-weight: 500;
+}
+
+.indicator {
+    position: absolute;
+    bottom: 5px;
+    left: 0;
+    height: 2px;
+    width: 0;
+    background-color: #07C160;
+    transition: all 0.3s ease;
+}
+
+/* 卡片区域 */
+.card-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.card {
+    width: calc(50% - 5px);
+    background-color: white;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-bottom: 10px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.card-image {
+    width: 100%;
+    height: 0;
+    padding-bottom: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.card-image img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.card-content {
+    padding: 10px;
+}
+
+.card-desc {
+    font-size: 14px;
+    color: #333;
+    margin-bottom: 10px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.4;
+}
+
+.card-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.user-info {
+    display: flex;
+    align-items: center;
+}
+
+.user-avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    margin-right: 5px;
+    background-color: #f0f0f0;
+}
+
+.user-name {
+    font-size: 12px;
+    color: #666;
+}
+
+.like-count {
+    font-size: 12px;
+    color: #999;
+    display: flex;
+    align-items: center;
+}
+
+.like-icon {
+    font-size: 14px;
+    margin-right: 3px;
+}
+
+/* 底部导航 */
+.bottom-nav {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 60px;
+    background-color: white;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    border-top: 1px solid #f0f0f0;
+    z-index: 100;
+}
+
+.nav-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #666;
+    font-size: 12px;
+    text-decoration: none;
+}
+
+.nav-icon {
+    font-size: 20px;
+    margin-bottom: 3px;
+}
+
+.nav-item.active {
+    color: #07C160;
+}
+
+/* 动画效果 */
+@keyframes placeholderAnimation {
+    0%, 100% { opacity: 0.5; }
+    50% { opacity: 1; }
+}
+
+.placeholder-text {
+    animation: placeholderAnimation 3s infinite;
+}
+

src/app/tab2/tab2.page.html

@@ -1,17 +1,202 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
+    <ion-title>运动健身</ion-title>
+    <ion-buttons slot="end">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
   </ion-toolbar>
+  <ion-searchbar placeholder="搜索课程或运动项目"></ion-searchbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
-    </ion-toolbar>
-  </ion-header>
+  <div class="sports-buttons">
+    <div class="sport-button">
+        <div class="sport-icon">🏃</div>
+        <div class="sport-name">去跑步</div>
+    </div>
+    <div class="sport-button">
+        <div class="sport-icon">🚶</div>
+        <div class="sport-name">去健走</div>
+    </div>
+    <div class="sport-button">
+        <div class="sport-icon">🚴</div>
+        <div class="sport-name">去骑行</div>
+    </div>
+    <div class="sport-button">
+        <div class="sport-icon">💪</div>
+        <div class="sport-name">去健身</div>
+    </div>
+    <div class="sport-button">
+        <div class="sport-icon">📺</div>
+        <div class="sport-name">看直播</div>
+    </div>
+</div>
 
-  <app-explore-container name="Tab 2 page"></app-explore-container>
+<!-- 内容区域 -->
+<div class="content">
+    <!-- 跑步卡片 -->
+    <div class="sport-card">
+        <div class="card-header bg-running">
+            <div class="card-overlay"></div>
+            <h3 class="card-title">跑步方程式</h3>
+            <p class="card-subtitle">还不知道怎么跑步才能坚持下来？这一次，跟着跑，就对了！</p>
+        </div>
+        <div class="card-content">
+            <div class="course-list">
+                <div class="course-item">
+                    <div class="course-container">
+                        <div class="course-image">
+                            <img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跑步课程">
+                        </div>
+                        <div class="course-info">
+                            <div class="course-title">新手五公里达成计划</div>
+                            <div class="course-desc">新手跑者里程碑</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="course-item">
+                    <div class="course-container">
+                        <div class="course-image">
+                            <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跑步课程">
+                        </div>
+                        <div class="course-info">
+                            <div class="course-title">10公里进阶训练</div>
+                            <div class="course-desc">突破你的极限</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="course-item">
+                    <div class="course-container">
+                        <div class="course-image">
+                            <img src="https://images.unsplash.com/photo-1538805060514-97d9cc17730c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跑步课程">
+                        </div>
+                        <div class="course-info">
+                            <div class="course-title">跑步热身与拉伸</div>
+                            <div class="course-desc">避免运动伤害</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="course-item">
+                    <div class="course-container">
+                        <div class="course-image">
+                            <img src="https://images.unsplash.com/photo-1552674605-db6ffd4facb5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跑步课程">
+                        </div>
+                        <div class="course-info">
+                            <div class="course-title">马拉松备战计划</div>
+                            <div class="course-desc">42.195公里挑战</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 健走卡片 -->
+    <div class="sport-card">
+        <div class="card-header bg-walking">
+            <div class="card-overlay"></div>
+            <h3 class="card-title">健走新主张</h3>
+            <p class="card-subtitle">每天一万步，健康有保障！科学健走，走出好身材</p>
+        </div>
+        <div class="card-content">
+            <div class="course-list">
+                <div class="course-item">
+                    <div class="course-container">
+                        <div class="course-image">
+                            <img src="https://images.unsplash.com/photo-1543351611-58f69d7c1781?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="健走课程">
+                        </div>
+                        <div class="course-info">
+                            <div class="course-title">基础健走入门</div>
+                            <div class="course-desc">正确的健走姿势</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="course-item">
+                    <div class="course-container">
+                        <div class="course-image">
+                            <img src="https://images.unsplash.com/photo-1488646953014-85cb44e25828?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="健走课程">
+                        </div>
+                        <div class="course-info">
+                            <div class="course-title">北欧健走法</div>
+                            <div class="course-desc">使用健走杖更有效</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 骑行卡片 -->
+    <div class="sport-card">
+        <div class="card-header bg-cycling">
+            <div class="card-overlay"></div>
+            <h3 class="card-title">骑行天地</h3>
+            <p class="card-subtitle">骑出健康，骑出快乐！探索城市与自然的完美结合</p>
+        </div>
+        <div class="card-content">
+            <div class="course-list">
+                <div class="course-item">
+                    <div class="course-container">
+                        <div class="course-image">
+                            <img src="https://images.unsplash.com/photo-1488646953014-85cb44e25828?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="骑行课程">
+                        </div>
+                        <div class="course-info">
+                            <div class="course-title">城市骑行入门</div>
+                            <div class="course-desc">安全骑行指南</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="course-item">
+                    <div class="course-container">
+                        <div class="course-image">
+                            <img src="https://images.unsplash.com/photo-1507035895480-2b3156c31fc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="骑行课程">
+                        </div>
+                        <div class="course-info">
+                            <div class="course-title">山地骑行技巧</div>
+                            <div class="course-desc">征服崎岖地形</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 健身卡片 -->
+    <div class="sport-card">
+        <div class="card-header bg-fitness">
+            <div class="card-overlay"></div>
+            <h3 class="card-title">健身指南</h3>
+            <p class="card-subtitle">科学训练，高效健身！打造理想身材</p>
+        </div>
+        <div class="card-content">
+            <div class="course-list">
+                <div class="course-item">
+                    <div class="course-container">
+                        <div class="course-image">
+                            <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="健身课程">
+                        </div>
+                        <div class="course-info">
+                            <div class="course-title">家庭健身计划</div>
+                            <div class="course-desc">无需器械也能练</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="course-item">
+                    <div class="course-container">
+                        <div class="course-image">
+                            <img src="https://images.unsplash.com/photo-1538805060514-97d9cc17730c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="健身课程">
+                        </div>
+                        <div class="course-info">
+                            <div class="course-title">增肌训练指南</div>
+                            <div class="course-desc">打造完美肌肉线条</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
 </ion-content>

src/app/tab2/tab2.page.scss

@@ -0,0 +1,211 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+body {
+    background-color: #f5f5f5;
+    color: #333;
+    padding-bottom: 60px; /* 为底部导航留出空间 */
+}
+
+/* 顶部按钮区域 */
+.sports-buttons {
+    display: flex;
+    justify-content: space-around;
+    padding: 15px 10px;
+    background-color: white;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.sport-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 20%;
+    text-align: center;
+}
+
+.sport-icon {
+    width: 40px;
+    height: 40px;
+    background-color: #f0f0f0;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 5px;
+    font-size: 20px;
+}
+
+.sport-name {
+    font-size: 12px;
+    color: #666;
+}
+
+/* 内容区域 */
+.content {
+    padding: 15px;
+}
+
+/* 运动卡片 */
+.sport-card {
+    background-color: white;
+    border-radius: 12px;
+    overflow: hidden;
+    margin-bottom: 15px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.card-header {
+    height: 120px;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    position: relative;
+    color: white;
+}
+
+.card-title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 5px;
+    z-index: 2;
+}
+
+.card-subtitle {
+    font-size: 14px;
+    opacity: 0.9;
+    z-index: 2;
+}
+
+.card-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.2));
+    z-index: 1;
+}
+
+.card-content {
+    padding: 15px;
+}
+
+.course-list {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -5px;
+}
+
+.course-item {
+    width: 50%;
+    padding: 0 5px;
+    margin-bottom: 10px;
+}
+
+.course-container {
+    display: flex;
+}
+
+.course-image {
+    width: 60px;
+    height: 60px;
+    border-radius: 6px;
+    overflow: hidden;
+    flex-shrink: 0;
+    background-color: #f0f0f0;
+}
+
+.course-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.course-info {
+    flex: 1;
+    padding-left: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.course-title {
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 3px;
+    color: #333;
+}
+
+.course-desc {
+    font-size: 12px;
+    color: #999;
+}
+
+/* 底部导航 */
+.bottom-nav {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 60px;
+    background-color: white;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    border-top: 1px solid #f0f0f0;
+    z-index: 100;
+}
+
+.nav-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #666;
+    font-size: 12px;
+    text-decoration: none;
+}
+
+.nav-icon {
+    font-size: 20px;
+    margin-bottom: 3px;
+}
+
+.nav-item.active {
+    color: #07C160;
+}
+
+/* 卡片背景色 */
+.bg-running {
+    background-color: #FF6B6B;
+    background-image: url('https://images.unsplash.com/photo-1552674605-db6ffd4facb5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80');
+    background-size: cover;
+    background-position: center;
+}
+
+.bg-walking {
+    background-color: #4ECDC4;
+    background-image: url('https://images.unsplash.com/photo-1543351611-58f69d7c1781?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80');
+    background-size: cover;
+    background-position: center;
+}
+
+.bg-cycling {
+    background-color: #45B7D1;
+    background-image: url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80');
+    background-size: cover;
+    background-position: center;
+}
+
+.bg-fitness {
+    background-color: #A37EBA;
+    background-image: url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80');
+    background-size: cover;
+    background-position: center;
+}

src/app/tab3/tab3.page.html

@@ -1,17 +1,137 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </ion-title>
+    <ion-title>我的资料</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content class="ion-padding">
+  <!-- 顶部个人信息区域 -->
+  <div class="profile-section">
+    <div class="avatar">
+      <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+" alt="用户头像">
+    </div>
+    <div class="profile-info">
+      <div class="profile-name">
+        <span>运动达人</span>
+        <span class="profile-more">></span>
+      </div>
+      <div class="profile-stats">
+        <div class="stat-item">
+          <span class="stat-number">128</span> 关注
+        </div>
+        <div class="stat-item">
+          <span class="stat-number">356</span> 粉丝
+        </div>
+        <div class="stat-item">
+          <span class="stat-number">1,024</span> 加油
+        </div>
+      </div>
+      <div class="badge-container">
+        <ion-chip>
+          <ion-icon name="time-outline"></ion-icon>
+          <ion-label>累计运动 90h</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-icon name="calendar-outline"></ion-icon>
+          <ion-label>坚持运动 120天</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-icon name="trophy-outline"></ion-icon>
+          <ion-label>5枚奖牌</ion-label>
+        </ion-chip>
+      </div>
+    </div>
+  </div>
+  
+  <!-- 卡片区域 -->
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>我的数据</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <div class="data-card">
+        <div class="data-content">
+          <div class="data-value">90分钟</div>
+          <div class="data-label">本周运动</div>
+        </div>
+        <div class="data-chart">
+          <ion-row class="ion-justify-content-center ion-align-items-end" style="height: 80px;">
+            <ion-col size="1" *ngFor="let bar of [30,60,90,40,70,50,80]">
+              <div class="chart-bar" [style.height.%]="bar"></div>
+            </ion-col>
+          </ion-row>
+        </div>
+      </div>
+    </ion-card-content>
+  </ion-card>
 
-  <app-explore-container name="Tab 3 page"></app-explore-container>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>总运动数据</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <div class="data-card">
+        <div class="data-content">
+          <div class="data-value">5,400分钟</div>
+          <div class="data-label">累计运动时长</div>
+        </div>
+        <div class="data-chart">
+          <ion-row class="ion-justify-content-center ion-align-items-end" style="height: 80px;">
+            <ion-col size="1" *ngFor="let bar of [20,40,60,80,100,50,70]">
+              <div class="chart-bar" [style.height.%]="bar"></div>
+            </ion-col>
+          </ion-row>
+        </div>
+      </div>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 功能按钮区域 -->
+  <ion-list>
+    <ion-item>
+      <ion-icon slot="start" name="document-text-outline"></ion-icon>
+      <ion-label>我的动态</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" name="heart-outline"></ion-icon>
+      <ion-label>收藏与加油</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" name="school-outline"></ion-icon>
+      <ion-label>我的课程</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" name="medal-outline"></ion-icon>
+      <ion-label>我的活动</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" name="nutrition-outline"></ion-icon>
+      <ion-label>我的饮食</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" name="wallet-outline"></ion-icon>
+      <ion-label>订单与钱包</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" name="gift-outline"></ion-icon>
+      <ion-label>领福利</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" name="people-outline"></ion-icon>
+      <ion-label>我的团队</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" name="help-circle-outline"></ion-icon>
+      <ion-label>帮助中心</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    </ion-item>
+  </ion-list>
 </ion-content>

src/app/tab3/tab3.page.scss

@@ -0,0 +1,127 @@
+/* 添加到全局样式或组件样式 */
+ion-content {
+  --ion-background-color: #f8f8f8; /* 设置整体背景颜色 */
+}
+
+.profile-section {
+  display: flex;
+  margin-bottom: 16px;
+  background-color: #fff; /* 设置个人信息区域背景颜色 */
+  padding: 16px;
+  border-radius: 8px; /* 添加圆角 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+}
+
+.avatar {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  border: 2px solid var(--ion-color-primary); /* 统一边框颜色 */
+  overflow: hidden;
+  margin-right: 15px;
+  flex-shrink: 0;
+  background-color: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* 确保头像图片完整显示 */
+}
+
+.profile-info {
+  flex: 1;
+}
+
+.profile-name {
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+  color: var(--ion-color-primary); /* 设置字体颜色为深色 */
+}
+
+.profile-more {
+  font-size: 1.2rem;
+  color: var(--ion-color-primary); /* 设置“>”的颜色 */
+}
+
+.profile-stats {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.stat-item {
+  margin-right: 15px;
+  font-size: 0.8rem;
+  color: var(--ion-color-primary); /* 设置统计数字颜色 */
+}
+
+.stat-number {
+  font-weight: bold;
+  color: var(--ion-color-primary); /* 设置统计数字颜色 */
+}
+
+.badge-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+ion-chip {
+  --background: #f0f0f0; /* 设置徽章背景颜色 */
+  --color: var(--ion-color-primary); /* 设置徽章文字颜色 */
+  --border-radius: 8px; /* 设置徽章圆角 */
+  padding: 4px 8px; /* 调整徽章内边距 */
+}
+
+ion-icon {
+  font-size: 1rem; /* 调整图标大小 */
+}
+
+.data-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.data-value {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 5px;
+  color: var(--ion-color-primary); /* 设置数据值字体颜色 */
+}
+
+.data-label {
+  font-size: 0.8rem;
+  color: var(--ion-color-primary); /* 设置数据标签字体颜色 */
+}
+
+.chart-bar {
+  width: 8px;
+  background-color: var(--ion-color-primary);
+  border-radius: 4px;
+  margin: 0 auto;
+  transition: height 0.5s ease;
+}
+
+ion-list {
+  margin-top: 16px;
+}
+
+ion-item {
+  --background: #fff; /* 设置列表项背景颜色 */
+  --color: var(--ion-color-primary); /* 设置列表项字体颜色 */
+  --border-color: var(--ion-color-primary); /* 统一边框颜色 */
+  --padding-start: 16px; /* 调整列表项内边距 */
+  --padding-end: 16px;
+}
+
+ion-icon {
+  color: var(--ion-color-primary); /* 设置图标颜色 */
+}

src/app/tabs/tabs.page.html

@@ -2,18 +2,18 @@
 
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
-      <ion-label>Tab 1</ion-label>
+      <ion-icon aria-hidden="true" name="planet-outline"></ion-icon>
+      <ion-label>首页</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
-      <ion-label>Tab 2</ion-label>
+      <ion-icon aria-hidden="true" name="accessibility-outline"></ion-icon>
+      <ion-label>运动</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon aria-hidden="true" name="square"></ion-icon>
-      <ion-label>Tab 3</ion-label>
+      <ion-icon aria-hidden="true" name="person-outline"></ion-icon>
+      <ion-label>我的</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
 

src/theme/variables.scss

@@ -1,2 +1,9 @@
 // For information on how to create your own theme, please see:
 // http://ionicframework.com/docs/theming/
+/* 修改全局背景色 */
+/* 在 page-home.scss 或对应页面的 SCSS 文件 */
+// src/theme/variables.scss
+/* 在 page-home.scss 或对应页面的 SCSS 文件 */
+ion-content {
+    --background: #ffffff; /* 设置页面内容背景为白色 */
+}