feat(FamilyRank): 在排名卡片中显示步数并优化样式

添加步数显示到排名卡片中，使用千位分隔符格式化数字重构排名卡片布局，调整高度和样式以更好展示信息新增 formatStepsForList 方法用于列表中的步数格式化

feat(FamilyRank): 在排名卡片中显示步数并优化样式
添加步数显示到排名卡片中，使用千位分隔符格式化数字重构排名卡片布局，调整高度和样式以更好展示信息新增 formatStepsForList 方法用于列表中的步数格式化
hookehuyr
Commit ce197619f968354d53211a4599089449a2f3645c ce197619 1 parent fe0affae
Showing 1 changed file with 44 additions and 18 deletions
src/pages/FamilyRank/index.vue
--- a/src/pages/FamilyRank/index.vue
View file @ce19761
+++ b/src/pages/FamilyRank/index.vue
View file @ce19761
 <!--
  * @Date: 2025-09-01 13:07:52
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-01 13:43:56
+ * @LastEditTime: 2025-09-01 14:46:59
  * @FilePath: /lls_program/src/pages/FamilyRank/index.vue
  * @Description: 文件描述
 -->
@@ -39,7 +39,10 @@
           </view>
           <view class="family-name">{{ topRanks[1]?.familyName }}</view>
           <view class="leader-name">大家长：{{ topRanks[1]?.leaderName }}</view>
-          <view class="rank-number">2</view>
+          <view class="rank-number">
+            <view class="rank-num">2</view>
+            <view class="steps-in-rank">{{ formatSteps(topRanks[1]?.steps) }}</view>
+          </view>
         </view>
         <!-- 第一名 -->
@@ -50,7 +53,10 @@
           </view>
           <view class="family-name">{{ topRanks[0]?.familyName }}</view>
           <view class="leader-name">大家长：{{ topRanks[0]?.leaderName }}</view>
-          <view class="rank-number">1</view>
+          <view class="rank-number">
+            <view class="rank-num">1</view>
+            <view class="steps-in-rank">{{ formatSteps(topRanks[0]?.steps) }}</view>
+          </view>
         </view>
         <!-- 第三名 -->
@@ -61,7 +67,10 @@
           </view>
           <view class="family-name">{{ topRanks[2]?.familyName }}</view>
           <view class="leader-name">大家长：{{ topRanks[2]?.leaderName }}</view>
-          <view class="rank-number">3</view>
+          <view class="rank-number">
+            <view class="rank-num">3</view>
+            <view class="steps-in-rank">{{ formatSteps(topRanks[2]?.steps) }}</view>
+          </view>
         </view>
       </view>
@@ -83,7 +92,7 @@
             </view>
           </view>
           <view class="steps-info">
-            <view class="steps">{{ formatSteps(item.steps) }}</view>
+            <view class="steps">{{ formatStepsForList(item.steps) }}</view>
           </view>
         </view>
       </view>
@@ -103,7 +112,7 @@
           </view>
         </view>
         <view class="my-rank-right">
-          <view class="my-steps">{{ formatSteps(myRank.steps) }}</view>
+          <view class="my-steps">{{ formatStepsForList(myRank.steps) }}</view>
           <view class="rank-status">{{ myRank.status }}</view>
         </view>
       </view>
@@ -131,12 +140,16 @@ const switchTab = (tab) => {
  * @returns {string} 格式化后的步数
  */
 const formatSteps = (steps) => {
-  if (steps >= 10000) {
+  return steps ? steps.toLocaleString() : '0'
-    return (steps / 10000).toFixed(1) + 'w'
+}
-  } else if (steps >= 1000) {
+
-    return (steps / 1000).toFixed(1) + 'k'
+/**
-  }
+ * 格式化步数显示（用于列表显示，使用千位分隔符格式）
-  return steps.toString()
+ * @param {number} steps - 步数
+ * @returns {string} 格式化后的步数
+ */
+const formatStepsForList = (steps) => {
+  return steps ? steps.toLocaleString() : '0'
 }
 // 前三名数据
@@ -328,15 +341,28 @@ const myRank = ref({
         width: 160rpx;
         height: 200rpx;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
-        font-size: 48rpx;
-        font-weight: bold;
-        color: white;
         position: relative;
         background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
         border-radius: 20rpx 20rpx 0 0;
         box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2);
+
+        .rank-num {
+          font-size: 48rpx;
+          font-weight: bold;
+          color: white;
+          margin-bottom: 12rpx;
+        }
+
+        .steps-in-rank {
+          font-size: 35rpx;
+          font-weight: 600;
+          color: white;
+          text-align: center;
+          line-height: 1.2;
+        }
       }
       &.second {
@@ -351,7 +377,7 @@ const myRank = ref({
         .rank-number {
           width: 220rpx;
-          height: 180rpx;
+          height: 200rpx;
           background: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%);
         }
       }
@@ -369,7 +395,7 @@ const myRank = ref({
         .rank-number {
           width: 220rpx;
-          height: 240rpx;
+          height: 260rpx;
           background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
         }
       }
@@ -386,7 +412,7 @@ const myRank = ref({
         .rank-number {
           width: 220rpx;
-          height: 160rpx;
+          height: 180rpx;
           background: linear-gradient(135deg, #CD7F32 0%, #B8860B 100%);
         }
       }