X

app/myapp/src/app/tab1/page-share/page-share.page.html

@@ -31,7 +31,7 @@
       </div>
     </div>
     <div class="user-meta">
-      <h2 class="username">兵法策官方账号</h2>
+      <h2 class="username">六韬策官方账号</h2>
       <p class="post-time">发布于 1小时前</p>
     </div>
   </div>
@@ -64,7 +64,7 @@
 
   <!-- 评论区 -->
   <div class="comment-section">
-    <h3 class="comment-title">演武讨论（28）</h3>
+    <h3 class="comment-title">讨论（28）</h3>
     <ion-list class="comment-list">
       <ion-item class="comment-item">
         <ion-avatar slot="start">

app/myapp/src/app/tab1/page-share/page-share.page.scss

@@ -2,11 +2,11 @@
 @use '../../../theme/variables.scss';// 引入首页的变量
 
 .content-bg {
-  background: linear-gradient(135deg, #bca3a3dd 0%, #ff951cdd 100%);
+  background: linear-gradient(135deg, #bca3a3dd 0%, #1c27ffdd 100%);
 }
 
 .custom-header {
-  --background: rgb(255, 213, 5);
+  --background: rgb(30, 5, 255);
   --border-color: var(--gold);
   
   ion-title {
@@ -29,7 +29,7 @@
   
   .placeholder-image {
     height: 60vh;
-    background: linear-gradient(45deg, #e48519 0%, #bea8a8 100%);
+    background: linear-gradient(45deg, #5319e4 0%, #bea8a8 100%);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -100,7 +100,7 @@
     }
     
     .post-time {
-      color: rgba(255, 217, 0, 0.8);
+      color: rgba(4, 0, 255, 0.8);
       margin: 5px 0 0;
       font-size: 0.9rem;
     }
@@ -133,7 +133,7 @@
   
   .tip-text {
     font-style: italic;
-    color: rgba(255, 217, 0, 0.8);
+    color: rgba(34, 0, 255, 0.8);
     margin-top: 20px;
   }
 }
@@ -142,8 +142,8 @@
   display: flex;
   justify-content: center;
   padding: 20px 0;
-  border-top: 1px solid rgba(255, 217, 0, 0.3);
-  border-bottom: 1px solid rgba(255, 217, 0, 0.3);
+  border-top: 1px solid rgba(0, 85, 255, 0.3);
+  border-bottom: 1px solid rgba(0, 4, 255, 0.3);
   margin: 25px 0;
   
   .action-button {
@@ -182,7 +182,7 @@
     }
     
     .comment-text {
-      color: rgba(255, 217, 0, 0.9);
+      color: rgba(13, 0, 255, 0.9);
       white-space: normal;
     }
   }
@@ -194,7 +194,7 @@
     
     ion-textarea {
       color: var(--gold);
-      --placeholder-color: rgba(255, 217, 0, 0.6);
+      --placeholder-color: rgba(0, 34, 255, 0.6);
     }
     
     .send-button {

app/myapp/src/app/tab1/tab1.page.html

@@ -1,192 +1,152 @@
 <!-- tab1.page.html -->
 <ion-header [translucent]="true">
     <header class="header">六韬策</header>
-  </ion-header>
-  
-  <ion-content [fullscreen]="true">
+</ion-header>
+
+<ion-content [fullscreen]="true">
     <main class="main-content">
-      <!-- 搜索区域 -->
-      <div class="search-bar">
-          <select class="city-select">
-              <option>长安</option>
-              <option>洛阳</option>
-              <option>邺城</option>
-              <option>建康</option>
-          </select>
-          <input type="text" class="search-input" placeholder="谋定身心疆场，淬就今古锋芒">
-      </div>
-  
-      <!-- 完整战术按钮组 -->
-      <div class="button-grid">
-        <ion-button (click)="goTraining()">
-            <div class="tactics-btn">
-             <div class="tactics-icon" style="background-image:url('//iconfont.alicdn.com/t/font_1234567_wtzczz.css')"></div>
-             <div class="btn-text">
-                 <div class="btn-title">六韬智策</div>
-                 <div class="btn-subtitle">战略规划中枢</div>
-            </div>
-        </div>
-        </ion-button>
-        
-        <!-- <div class="tactics-btn">
-            <div class="tactics-icon" style="background-image:url('//iconfont.alicdn.com/t/font_1234567_xyzabc.css')"></div>
-            <div class="btn-text">
-                <div class="btn-title">武韬战枢</div>
-                <div class="btn-subtitle">竞技对抗熔炉</div>
-            </div>
+        <!-- 搜索区域 -->
+        <div class="search-bar">
+            <select class="city-select">
+                <option>北京</option>
+                <option>上海</option>
+                <option>广州</option>
+                <option>深圳</option>
+            </select>
+            <input type="text" class="search-input" placeholder="谋定身心疆场，淬就今古锋芒">
         </div>
-        <div class="tactics-btn">
-            <div class="tactics-icon" style="background-image:url('//iconfont.alicdn.com/t/font_1234567_uvwxyz.css')"></div>
-            <div class="btn-text">
-                <div class="btn-title">龙韬军阵</div>
-                <div class="btn-subtitle">团队协作密令</div>
-            </div>
+
+        <!-- 完整战术按钮组 -->
+        <div class="button-grid">
+            <ion-button (click)="goTraining()">
+                <div class="tactics-btn">
+                    <img src="/assets/images/1687682139730671.png" alt="image">
+                    <div class="tactics-icon" src="images/1687682139730671.png"></div>
+                    <div class="btn-text">
+                        <div class="btn-title">六韬智策</div>
+                        <div class="btn-subtitle">战略规划中枢</div>
+                    </div>
+                </div>
+            </ion-button>
         </div>
-        <div class="tactics-btn">
-            <div class="tactics-icon" style="background-image:url('//iconfont.alicdn.com/t/font_1234567_abcdefg.css')"></div>
-            <div class="btn-text">
-                <div class="btn-title">虎韬锋镝</div>
-                <div class="btn-subtitle">环境淬火疆场</div>
+
+        <!-- 广告区域 -->
+        <div class="ad-banner">
+            <div class="ad-text">体育产品</div>
+            <div class="ad-scroll">
+                <div class="ad-item"><img src="/assets/images/11.jpg" alt="image"></div>
+                <div class="ad-item"><img src="/assets/images/12.jpg" alt="image"></div>
+                <div class="ad-item"><img src="/assets/images/13.jpg" alt="image"></div>
+                <div class="ad-item"><img src="/assets/images/14.jpg" alt="image"></div>
+                <div class="ad-item"><img src="/assets/images/15.jpg" alt="image"></div>
             </div>
         </div>
-        <div class="tactics-btn">
-            <div class="tactics-icon" style="background-image:url('//iconfont.alicdn.com/t/font_1234567_hijklm.css')"></div>
-            <div class="btn-text">
-                <div class="btn-title">豹韬奇袭</div>
-                <div class="btn-subtitle">敏捷破阵锋刃</div>
-            </div>
+
+        <!-- 修改后的运动分享 -->
+        <div class="share-tabs">
+            <div class="tab-item"
+                 [class.active]="activeTab === 'nearby'"
+                 (click)="changeTab('nearby')">附近</div>
+            <div class="tab-item"
+                 [class.active]="activeTab === 'recommend'"
+                 (click)="changeTab('recommend')">推荐</div>
+            <div class="tab-item"
+                 [class.active]="activeTab === 'follow'"
+                 (click)="changeTab('follow')">关注</div>
+            <div class="tab-item" style="flex:0.6">+ 发布</div>
         </div>
-        <div class="tactics-btn">
-            <div class="tactics-icon" style="background-image:url('//iconfont.alicdn.com/t/font_1234567_nopqrs.css')"></div>
-            <div class="btn-text">
-                <div class="btn-title">犬韬训典</div>
-                <div class="btn-subtitle">动作基准火纹</div>
-            </div>
-        </div> -->
-    </div>
-  
-      <!-- 广告区域 -->
-      <div class="ad-banner">
-          <div class="ad-text">兵法精要</div>
-          <div class="ad-scroll">
-              <div class="ad-item"></div>
-              <div class="ad-item"></div>
-              <div class="ad-item"></div>
-              <div class="ad-item"></div>
-              <div class="ad-item"></div>
-          </div>
-      </div>
-  
-      <!-- 修改后的运动分享 -->
-      <div class="share-tabs">
-        <div class="tab-item" 
-             [class.active]="activeTab === 'nearby'"
-             (click)="changeTab('nearby')">附近</div>
-        <div class="tab-item" 
-             [class.active]="activeTab === 'recommend'"
-             (click)="changeTab('recommend')">推荐</div>
-        <div class="tab-item" 
-             [class.active]="activeTab === 'follow'"
-             (click)="changeTab('follow')">关注</div>
-        <div class="tab-item" style="flex:0.6">+ 发布</div>
-      </div>
-  
-      <!-- 附近内容 -->
-      <div class="share-grid" *ngIf="activeTab === 'nearby'">
-        
-        @for(share of shareList;track share){
-            
 
-          <div (click)="goShare(share)" class="share-card">
-            <div class="card-image">{{share.image}}</div>
-            <div class="card-info">
-                <div class="card-title">{{share.title}}</div>
-                <div class="card-footer">
-                    <span class="card-tag">{{share.tag}}</span>
-                    <div class="user-avatar">{{share.avatar}}</div>
+        <!-- 附近内容 -->
+        <div class="share-grid" *ngIf="activeTab === 'nearby'">
+            @for(share of shareList;track share){
+            <div (click)="goShare(share)" class="share-card">
+                <img class="card-image" [src]="share.image" alt="image">
+                <div class="card-info">
+                    <div class="card-title">{{share.title}}</div>
+                    <div class="card-footer">
+                        <span class="card-tag">{{share.tag}}</span>
+                        <div class="user-avatar"><img class="card-image" [src]="share.avatar" alt="image"></div>
+                    </div>
                 </div>
             </div>
+            }
         </div>
-        }
-          
-      </div>
-  
-      <!-- 推荐内容 -->
-      <div class="share-grid" *ngIf="activeTab === 'recommend'">
-      @for(share1 of shareList1;track share1){
-        <div (click)="goShare(share1)" class="share-card">
-            <div class="card-image">{{share1.image}}</div>
-            <div class="card-info">
-                <div class="card-title">{{share1.title}}</div>
-                <div class="card-footer">
-                    <span class="card-tag">{{share1.tag}}</span>
-                    <div class="user-avatar">{{share1.avatar}}</div>
+
+        <!-- 推荐内容 -->
+        <div class="share-grid" *ngIf="activeTab === 'recommend'">
+            @for(share1 of shareList1;track share1){
+            <div (click)="goShare(share1)" class="share-card">
+                <img class="card-image" [src]="share1.image" alt="image">
+                <div class="card-info">
+                    <div class="card-title">{{share1.title}}</div>
+                    <div class="card-footer">
+                        <span class="card-tag">{{share1.tag}}</span>
+                        <div class="user-avatar"><img class="card-image" [src]="share1.avatar" alt="image"></div>
+                    </div>
                 </div>
             </div>
+            <!-- 更多推荐卡片... -->
+            }
         </div>
-          <!-- 更多推荐卡片... -->
-        }
-      </div>
-    
-  
-      <!-- 关注内容 -->
-      <div class="share-grid" *ngIf="activeTab === 'follow'">
-      @for(share2 of shareList2;track share2){
-        <div (click)="goShare(share2)" class="share-card">
-            <div class="card-image">{{share2.image}}</div>
-            <div class="card-info">
-                <div class="card-title">{{share2.title}}</div>
-                <div class="card-footer">
-                    <span class="card-tag">{{share2.tag}}</span>
-                    <div class="user-avatar">{{share2.avatar}}</div>
+
+        <!-- 关注内容 -->
+        <div class="share-grid" *ngIf="activeTab === 'follow'">
+            @for(share2 of shareList2;track share2){
+            <div (click)="goShare(share2)" class="share-card">
+                <img class="card-image" [src]="share2.image" alt="image">
+                <div class="card-info">
+                    <div class="card-title">{{share2.title}}</div>
+                    <div class="card-footer">
+                        <span class="card-tag">{{share2.tag}}</span>
+                        <div class="user-avatar"><img class="card-image" [src]="share2.avatar" alt="image"></div>
+                    </div>
                 </div>
             </div>
+            <!-- 更多关注卡片... -->
+            }
         </div>
-          <!-- 更多关注卡片... -->
-        }
-      </div>
     </main>
-  
+
     <!-- 修改后的HTML脚本部分 -->
-<script>
-    document.addEventListener('DOMContentLoaded', function() {
-        // 获取所有选项卡和内容区域
-        const tabs = document.querySelectorAll('.share-tabs .tab-item');
-        const contents = document.querySelectorAll('.share-grid');
-    
-        // 初始化显示第一个选项卡内容
-        contents.forEach(content => content.style.display = 'none');
-        document.getElementById('nearby').style.display = 'grid';
-    
-        // 事件监听优化版
-        document.querySelector('.share-tabs').addEventListener('click', function(event) {
-            const clickedTab = event.target.closest('.tab-item');
-            
-            // 有效性验证
-            if (!clickedTab || 
-                clickedTab.style.flex === '0.6' || 
-                clickedTab.classList.contains('active')) return;
-    
-            // 获取目标ID
-            const tabId = clickedTab.dataset.tab;
-            const targetContent = document.getElementById(tabId);
-    
-            // 执行切换
-            tabs.forEach(tab => tab.classList.remove('active'));
-            clickedTab.classList.add('active');
-    
-            contents.forEach(content => {
-                content.style.display = 'none';
-                content.classList.remove('active');
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            // 获取所有选项卡和内容区域
+            const tabs = document.querySelectorAll('.share-tabs .tab-item');
+            const contents = document.querySelectorAll('.share-grid');
+
+            // 初始化显示第一个选项卡内容
+            contents.forEach(content => content.style.display = 'none');
+            document.getElementById('nearby').style.display = 'grid';
+
+            // 事件监听优化版
+            document.querySelector('.share-tabs').addEventListener('click', function (event) {
+                const clickedTab = event.target.closest('.tab-item');
+
+                // 有效性验证
+                if (!clickedTab ||
+                    clickedTab.style.flex === '0.6' ||
+                    clickedTab.classList.contains('active')) return;
+
+                // 获取目标ID
+                const tabId = clickedTab.dataset.tab;
+                const targetContent = document.getElementById(tabId);
+
+                // 执行切换
+                tabs.forEach(tab => tab.classList.remove('active'));
+                clickedTab.classList.add('active');
+
+                contents.forEach(content => {
+                    content.style.display = 'none';
+                    content.classList.remove('active');
+                });
+
+                if (targetContent) {
+                    targetContent.style.display = 'grid';
+                    setTimeout(() => {
+                        targetContent.classList.add('active');
+                    }, 10);
+                }
             });
-            
-            if (targetContent) {
-                targetContent.style.display = 'grid';
-                setTimeout(() => {
-                    targetContent.classList.add('active');
-                }, 10);
-            }
         });
-    });
     </script>
-  </ion-content>
+</ion-content>

app/myapp/src/app/tab1/tab1.page.scss

@@ -1,22 +1,23 @@
 // tab1.page.scss
 :root {
-    --gold: #FFD700;
-    --dark: #f04a4a;
+    --primary: #2f00ff; // 主色调为蓝色
+    --secondary: #6C757D; // 次要颜色
+    --background: #8ac4fd; // 背景颜色
+    --text-color: #bebebe; // 文字颜色
+    --font-family: "Roboto", sans-serif; // 字体改为Roboto
 }
 
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: "STXingkai", "华文行楷", cursive;
+    font-family: var(--font-family);
 }
 
 body {
-    background: 
-        linear-gradient(135deg, rgba(60, 60, 60, 0.9) 0%, rgba(30, 30, 30, 0.95) 100%),
-        url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEiLz4KICA8cGF0aCBkPSJNMjAgMjBMODAgODBNODAgMjBMMjAgODAiIHN0cm9rZT0iI2ZmZCIgc3Ryb2tlLXdpZHRoPSIxIi8+Cjwvc3ZnPg==');
+    background: var(--background);
+    color: var(--text-color);
     min-height: 100vh;
-    color: var(--gold);
 }
 
 /* 顶部标题 */
@@ -25,7 +26,7 @@ body {
     top: 0;
     width: 100%;
     height: 50px;
-    background: rgb(5, 13, 255);
+    background: var(--primary);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -33,9 +34,9 @@ body {
     letter-spacing: 4px;
     z-index: 100;
     backdrop-filter: blur(5px);
-    border-bottom: 2px solid var(--gold);
+    border-bottom: 2px solid var(--secondary);
     font-weight: bold;
-    text-shadow: 0 2px 4px rgba(160, 162, 198, 0.5);
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .main-content {
@@ -43,24 +44,23 @@ body {
     display: flex;
     flex-direction: column;
     gap: 25px;
-    background: transparent; // 新增
 }
 
 .search-bar {
     display: flex;
-    background: rgba(253, 236, 137, 0.884);
+    background: rgba(0, 0, 255, 0.8);
     border-radius: 30px;
     padding: 12px 20px;
-    border: 2px solid var(--gold);
+    border: 2px solid var(--primary);
     backdrop-filter: blur(4px);
 }
 
 .city-select {
     border: none;
     background: transparent;
-    color: var(--gold);
+    color: var(--primary);
     padding-right: 20px;
-    border-right: 2px solid rgba(255, 217, 0, 0.964);
+    border-right: 2px solid rgba(0, 0, 0, 0.2);
     font-size: 1rem;
 }
 
@@ -68,24 +68,25 @@ body {
     flex: 1;
     border: none;
     background: transparent;
-    color: var(--gold);
+    color: var(--text-color);
     padding: 8px 20px;
     font-size: 1rem;
 }
 
 .button-grid {
-    width: 100%; /* 占满整行 */
-    margin: 0 auto; /* 左右居中 */
-    aspect-ratio: 2 / 1; /* 宽度是高度的2倍 */
-    // display: grid;
-    // grid-template-columns: repeat(3, 1fr);
-    // gap: 15px;
+    width: 100%;
+    margin: 0 auto;
+    aspect-ratio: 2 / 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .tactics-btn {
-    aspect-ratio: 1;
-    background: rgba(247, 148, 34, 0.7); 
-    border: 2px solid var(--gold);
+    width: 100%;
+    height: 50%;
+    background: rgba(17, 41, 255, 0.8);
+    border: 2px solid var(--primary);
     border-radius: 16px;
     padding: 15px;
     display: flex;
@@ -94,12 +95,12 @@ body {
     justify-content: space-between;
     transition: all 0.3s ease;
     cursor: pointer;
-    box-shadow: 0 4px 12px rgba(194, 175, 175, 0.3);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .tactics-btn:hover {
     transform: translateY(-3px);
-    box-shadow: 0 6px 20px rgba(255, 217, 0, 0.995);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
 }
 
 .tactics-btn:active {
@@ -116,6 +117,10 @@ body {
 .btn-text {
     text-align: center;
     line-height: 1.3;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
 .btn-title {
@@ -130,12 +135,12 @@ body {
 }
 
 .ad-banner {
-    background: linear-gradient(to right, #e99433, #c2aeae);
+    background: linear-gradient(to right, var(--primary), var(--secondary));
     border-radius: 20px;
     padding: 15px;
     display: flex;
     align-items: center;
-    border: 1px solid rgb(255, 217, 0);
+    border: 1px solid rgba(0, 0, 0, 0.2);
 }
 
 .ad-text {
@@ -155,7 +160,7 @@ body {
     -ms-overflow-style: none;
 }
 
-.ad-scroll::-webkit-scrollbar { 
+.ad-scroll::-webkit-scrollbar {
     display: none;
 }
 
@@ -163,7 +168,7 @@ body {
     flex-shrink: 0;
     width: 150px;
     height: 100px;
-    background: #c4abab;
+    background: rgba(255, 255, 255, 0.8);
     border-radius: 12px;
     position: relative;
     overflow: hidden;
@@ -176,15 +181,15 @@ body {
     width: 100%;
     text-align: center;
     font-size: 0.9rem;
-    text-shadow: 0 2px 4px rgba(193, 153, 153, 0.6);
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 /* 新增选项卡样式 */
 .share-tabs {
     display: flex;
-    border-bottom: 2px solid rgba(255, 217, 0, 0.919);
+    border-bottom: 2px solid var(--primary);
     margin-bottom: 20px;
-    
+
     .tab-item {
         flex: 1;
         padding: 15px;
@@ -193,35 +198,15 @@ body {
         font-size: 1rem;
         transition: all 0.3s ease;
         cursor: pointer;
-        
+
         &:hover {
-            background: rgba(255, 217, 0, 0.2);
-        }
-        
-        &.active {
-            font-weight: 600;
-            
-            &::after {
-                content: '';
-                position: absolute;
-                bottom: -2px;
-                left: 50%;
-                transform: translateX(-50%);
-                width: 70%;
-                height: 3px;
-                background: var(--gold);
-                transition: width 0.3s ease;
-            }
+            background: rgba(111, 255, 243, 0.2);
         }
-    }
-    .tab-item {
-        cursor: pointer;
-        transition: all 0.3s ease;
-        
+
         &.active {
             font-weight: 600;
+
             &::after {
-                /* 下划线动画 */
                 content: '';
                 position: absolute;
                 bottom: -2px;
@@ -229,37 +214,43 @@ body {
                 transform: translateX(-50%);
                 width: 70%;
                 height: 3px;
-                background: var(--gold);
+                background: var(--primary);
                 transition: width 0.3s ease;
             }
         }
     }
 }
+
 .share-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
     animation: fadeIn 0.3s ease;
-  
+
     @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(10px); }
-      to { opacity: 1; transform: translateY(0); }
+        from {
+            opacity: 0;
+            transform: translateY(10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
     }
-  }
-
+}
 
 .share-card {
-    background: #c5b1b1;
+    background: rgba(206, 203, 255, 0.8);
     border-radius: 20px;
     overflow: hidden;
     aspect-ratio: 3/4;
     position: relative;
     transition: transform 0.3s ease;
-    
+
     &:hover {
         transform: translateY(-5px);
     }
-    
+
     &::before {
         content: "";
         position: absolute;
@@ -267,7 +258,7 @@ body {
         left: 0;
         right: 0;
         bottom: 0;
-        border: 2px solid var(--gold);
+        border: 2px solid var(--primary);
         border-radius: 20px;
         opacity: 0.2;
     }
@@ -275,7 +266,7 @@ body {
 
 .card-image {
     height: 70%;
-    background: linear-gradient(45deg, #e48519 0%, #bea8a8 100%);
+    background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
     border-radius: 20px 20px 0 0;
     position: relative;
     overflow: hidden;
@@ -285,14 +276,12 @@ body {
     padding: 15px;
 }
 
-// 修改卡片标题样式
 .card-title {
     font-weight: 600;
     margin-bottom: 10px;
     font-size: 1rem;
     line-height: 1.4;
-    
-    /* 多行文本截断方案 */
+
     display: -webkit-box;
     display: -moz-box;
     display: flex;
@@ -303,9 +292,8 @@ body {
     line-clamp: 1;
     overflow: hidden;
     text-overflow: ellipsis;
-    
-    /* 备用方案 */
-    max-height: 1.4em; // line-height × 行数
+
+    max-height: 1.4em;
     @supports not (line-clamp: 1) {
         display: -webkit-box;
         -webkit-line-clamp: 1;
@@ -323,7 +311,7 @@ body {
     font-size: 0.8rem;
     opacity: 0.9;
     padding: 4px 10px;
-    background: rgb(255, 217, 0);
+    background: var(--primary);
     border-radius: 5px;
 }
 
@@ -331,8 +319,8 @@ body {
     width: 30px;
     height: 30px;
     border-radius: 50%;
-    background: #b2adad;
-    border: 1px solid var(--gold);
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--primary);
 }
 
 /* 其他保持不变的样式... */
@@ -340,7 +328,7 @@ body {
 /* 覆盖分享卡片的字体 */
 .share-card,
 .share-card * {
-    font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important;
+    font-family: var(--font-family) !important;
 }
 
 /* 底部导航 */
@@ -348,15 +336,16 @@ body {
     position: fixed;
     bottom: 0;
     width: 100%;
-    height: 70px;  /* 加高导航栏 */
-    background: rgba(200, 177, 177, 0.97);
+    height: 70px;
+    background: rgba(68, 136, 255, 0.9);
     display: flex;
     justify-content: space-around;
     align-items: center;
     backdrop-filter: blur(10px);
-    border-top: 2px solid var(--gold);
-    box-shadow: 0 -4px 15px rgba(189, 162, 162, 0.3);
+    border-top: 2px solid var(--primary);
+    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
 }
+
 .nav-item {
     display: flex;
     flex-direction: column;
@@ -368,25 +357,31 @@ body {
     padding: 8px 15px;
     border-radius: 10px;
 }
+
 .nav-item:hover {
-    background: rgb(255, 217, 0);
+    background: var(--primary);
     opacity: 1;
 }
+
 .nav-item.active {
     opacity: 1;
     transform: scale(1.1);
-    background: rgb(255, 217, 0);
+    background: var(--primary);
 }
+
 .nav-icon {
-    width: 28px;  /* 放大图标 */
+    width: 28px;
     height: 28px;
     background-size: contain;
 }
 
 /* 加载动画 */
 @keyframes loadingShimmer {
-    100% { left: 200%; }
+    100% {
+        left: 200%;
+    }
 }
+
 .card-image::after,
 .ad-item::before {
     content: "";
@@ -397,9 +392,9 @@ body {
     height: 100%;
     background: linear-gradient(
         to right,
-        rgba(255, 255, 255, 0.667) 0%,
-        rgba(255, 255, 255, 0.879) 50%,
-        rgba(255, 255, 255, 0.747) 100%
+        rgba(179, 196, 255, 0.667) 0%,
+        rgba(132, 113, 255, 0.879) 50%,
+        rgba(148, 191, 255, 0.747) 100%
     );
     animation: loadingShimmer 2s infinite;
-}
+}

app/myapp/src/app/tab1/tab1.page.ts

@@ -17,210 +17,102 @@ export class Tab1Page {
     {
       "title": "洛阳骑射特训｜百步穿杨",
       "tag": "#精准射击",
-      "image": "",
-      "avatar": ""
+      "image": "/assets/images/90.jpg",
+      "avatar": "/assets/images/E.jpg"
     },
     {
       "title": "长安夜跑营｜戌时城门集结",
       "tag": "#耐力训练",
-      "image": "",
-      "avatar": ""
+      "image": "/assets/images/2439.jpg_wh860.jpg",
+      "avatar": "/assets/images/I.jpg"
     },
     {
       "title": "玄武门团队特训｜协作挑战",
       "tag": "#团队协作",
-      "image": "",
-      "avatar": ""
+      "image": "/assets/images/1661926112220064.jpg",
+      "avatar": "/assets/images/O.jpg"
     },
     {
       "title": "邺城器械训练｜攻城器械操作",
       "tag": "#力量训练",
-      "image": "",
-      "avatar": ""
+      "image": "/assets/images/1661927133103461.jpg",
+      "avatar": "/assets/images/W.jpeg"
     },
     {
       "title": "潼关剑术大师班｜剑指苍穹",
       "tag": "#技巧训练",
-      "image": "",
-      "avatar": ""
+      "image": "/assets/images/2439.jpg_wh860.jpg",
+      "avatar": "/assets/images/P.jpg"
     },
     {
       "title": "赤壁水战演练｜水上作战",
       "tag": "#水上训练",
-      "image": "",
-      "avatar": ""
+      "image": "/assets/images/R-C.jpg",
+      "avatar": "/assets/images/Q.jpg"
     },
     {
       "title": "襄阳城防特训｜守城战术",
       "tag": "#防御训练",
-      "image": "",
-      "avatar": ""
+      "image": "/assets/images/1.jpg",
+      "avatar": "/assets/images/R.jpg"
     },
     {
       "title": "虎牢关马术进阶｜人马合一",
       "tag": "#骑术训练",
-      "image": "",
-      "avatar": ""
+      "image": "/assets/images/2.jpg",
+      "avatar": "/assets/images/Y.jpg"
     },
     {
       "title": "华佗五禽戏｜养生功法",
       "tag": "#柔韧训练",
-      "image": "",
-      "avatar": ""
+      "image": "/assets/images/3.jpg",
+      "avatar": "/assets/images/T.jpg"
+    }
+  ]
+  shareList1:any[]=[
+    {
+      "title": "雁门关伏击训练｜暗夜潜行",
+      "tag": "#战略布局",
+      "image": "/assets/images/7.jpg",
+      "avatar": "/assets/images/U.jpg"
     },
     {
       "title": "长坂坡急行军｜负重越野",
       "tag": "#体能训练",
-      "image": "",
-      "avatar": ""
+      "image": "/assets/images/4.jpg",
+      "avatar": "/assets/images/E.jpg"
     },
     {
       "title": "函谷关箭阵演练｜万箭齐发",
       "tag": "#远程攻击",
-      "image": "",
-      "avatar": ""
+      "image": "/assets/images/5.jpg",
+      "avatar": "/assets/images/W.jpeg"
     },
     {
       "title": "白帝城攀岩挑战｜绝壁求生",
       "tag": "#极限训练",
-      "image": "",
-      "avatar": ""
-    }
-  ]
-  shareList1:any[]=[
-    {
-      "title": "雁门关伏击训练｜暗夜潜行",
-      "tag": "#战略布局",
-      "image": "",
-      "avatar": ""
+      "image": "/assets/images/6.jpg",
+      "avatar": "/assets/images/I.jpg"
     },
     {
       "title": "玉门关沙漠特训｜大漠孤烟",
       "tag": "#沙漠生存",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "敦煌壁画密室｜机关破解",
-      "tag": "#智力挑战",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "祁连山冰川穿越｜极寒考验",
-      "tag": "#寒冷训练",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "阴山骑兵阵演练｜铁骑冲锋",
-      "tag": "#阵型训练",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "楼兰古城寻踪｜追踪术特训",
-      "tag": "#侦察训练",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "居延海舟师集训｜芦苇荡作战",
-      "tag": "#隐蔽行动",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "贺兰山岩画解密｜古代密码学",
-      "tag": "#文化传承",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "河西走廊商队模拟｜物资押运",
-      "tag": "#后勤管理",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "昆仑山气功修炼｜吐纳心法",
-      "tag": "#内功修炼",
-      "image": "",
-      "avatar": ""
+      "image": "/assets/images/8.jpg",
+      "avatar": "/assets/images/O.jpg"
     }
   ]
   shareList2:any[]=[
     {
       "title": "太湖舟师操演｜八百里烟波",
       "tag": "#水上作战",
-      "image": "",
-      "avatar": ""
+      "image": "/assets/images/9.jpg",
+      "avatar": "/assets/images/P.jpg"
     },
     {
       "title": "钱塘江泅渡特训｜逆潮而上",
       "tag": "#激流挑战",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "武夷山采药人｜百草辨识",
-      "tag": "#野外生存",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "岭南醒狮特训｜梅花桩步法",
-      "tag": "#平衡训练",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "鄱阳湖观星营｜夜航定向",
-      "tag": "#天文导航",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "徽州古道负重｜青石板急行",
-      "tag": "#长途奔袭",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "岳阳楼瞭望哨｜烽火传讯",
-      "tag": "#信号传递",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "景德镇陶艺营｜器皿负重",
-      "tag": "#腕力训练",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "洞庭湖芦苇阵｜迷宫突围",
-      "tag": "#方向感知",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "龙虎山道术班｜符箓投掷",
-      "tag": "#精准投射",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "蜀道栈道修复｜高空作业",
-      "tag": "#悬崖训练",
-      "image": "",
-      "avatar": ""
-    },
-    {
-      "title": "江南织造坊｜锦缎举重",
-      "tag": "#巧劲运用",
-      "image": "",
-      "avatar": ""
+      "image": "/assets/images/0.jpg",
+      "avatar": "/assets/images/Y.jpg"
     }
   ]
   changeTab(tab: string) {

app/myapp/src/app/tab2/tab2.page.scss

@@ -18,7 +18,7 @@
   align-items: center;
   padding: 15px 10px;
   margin-bottom: 20px;
-  border-bottom: 2px solid rgba(255, 217, 0, 0.5);
+  border-bottom: 2px solid rgba(98, 0, 255, 0.5);
   
   .record-title {
     font-size: 1.5rem;
@@ -47,19 +47,19 @@
   background: rgba(197, 177, 177, 0.5);
   border-radius: 15px;
   padding: 15px;
-  border: 1px solid rgba(255, 217, 0, 0.3);
+  border: 1px solid rgba(0, 94, 255, 0.3);
   transition: all 0.3s ease;
   
   &:hover {
     transform: translateY(-3px);
-    box-shadow: 0 4px 12px rgba(255, 217, 0, 0.2);
+    box-shadow: 0 4px 12px rgba(68, 0, 255, 0.2);
   }
   
   .record-icon {
     width: 50px;
     height: 50px;
     border-radius: 50%;
-    background: linear-gradient(45deg, #f79422 0%, #debbbb 100%);
+    background: linear-gradient(45deg, #1c03ff 0%, #debbbb 100%);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -79,7 +79,7 @@
     
     .record-date {
       font-size: 0.9rem;
-      color: rgba(255, 111, 0, 0.937);
+      color: rgba(0, 72, 255, 0.937);
       margin-bottom: 5px;
     }
     
@@ -91,14 +91,14 @@
       span {
         font-size: 0.85rem;
         padding: 3px 8px;
-        background: rgba(255, 215, 0, 0.2);
+        background: rgba(0, 8, 255, 0.2);
         border-radius: 4px;
       }
     }
     
     .record-location {
       font-size: 0.9rem;
-      color: rgb(255, 140, 0);
+      color: rgb(55, 0, 255);
     }
   }
   

app/myapp/src/app/tab2/tab2.page.ts

@@ -17,7 +17,7 @@ export class Tab2Page {
       duration: 120,
       intensity: '高强度',
       fatigue: 7,
-      location: '虎牢关马场'
+      location: '骑行'
     },
     {
       type: 'archery',
@@ -26,7 +26,7 @@ export class Tab2Page {
       duration: 90,
       intensity: '中强度',
       fatigue: 5,
-      location: '洛阳射圃'
+      location: '射箭'
     },
     {
       type: 'martial',
@@ -35,7 +35,7 @@ export class Tab2Page {
       duration: 60,
       intensity: '高强度',
       fatigue: 8,
-      location: '玄武门演武场'
+      location: '武术'
     },
     {
       type: 'run',
@@ -44,7 +44,7 @@ export class Tab2Page {
       duration: 45,
       intensity: '低强度',
       fatigue: 3,
-      location: '长安城墙'
+      location: '跑步'
     },
     {
       type: 'swim',
@@ -53,7 +53,7 @@ export class Tab2Page {
       duration: 30,
       intensity: '中强度',
       fatigue: 6,
-      location: '赤壁水寨'
+      location: '游泳'
     },
     {
       type: 'ride',
@@ -62,7 +62,7 @@ export class Tab2Page {
       duration: 150,
       intensity: '高强度',
       fatigue: 9,
-      location: '潼关古道'
+      location: '骑行'
     }
   ];
 

app/myapp/src/app/tabs/tabs-routing.module.ts

@@ -22,7 +22,7 @@ const routes: Routes = [
       },
       {
         path: 'tab3',
-        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
+        loadComponent: () => import('../../demo/sport/page-sport-list/page-sport-list.component').then(m => m.PageSportListComponent)
       },
       {
         path: 'mine',