cfc/cfc-frontend/components/FamilyHealthRanking.vue

<template>
  <view class="family-ranking" v-if="list && list.length > 0">
    <view class="ranking-header">
      <text class="ranking-title">👨‍👩‍👧‍👦 家庭健康榜</text>
      <text class="ranking-total">全家积分: {{ totalScore }}</text>
    </view>
    <view class="ranking-list">
      <view class="ranking-item" v-for="(m, idx) in list" :key="m.memberId">
        <text class="rank-medal">{{ idx === 0 ? '🥇' : idx === 1 ? '🥈' : idx === 2 ? '🥉' : '#' + m.rank }}</text>
        <image class="rank-avatar" :src="m.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
        <view class="rank-info">
          <text class="rank-name">{{ m.name }}</text>
          <text class="rank-level">{{ m.levelTitle || '' }}</text>
        </view>
        <view class="rank-score-wrap">
          <text class="rank-score">{{ m.score }}</text>
          <text class="rank-unit">分</text>
        </view>
        <text class="rank-streak" v-if="m.streakDays && m.streakDays > 0">🔥 {{ m.streakDays }}天</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: { type: Array, default: function() { return [] } },
    totalScore: { type: Number, default: 0 }
  }
}
</script>

<style scoped>
.family-ranking {
  background: #fff;
  border-radius: 20rpx;
  margin: 0 20rpx 20rpx 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.ranking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.ranking-title {
  font-size: 30rpx;
  font-weight: 700;
  color: #1E293B;
}
.ranking-total {
  font-size: 24rpx;
  color: #F97316;
  font-weight: 600;
}
.ranking-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #F1F5F9;
}
.ranking-item:last-child { border-bottom: none; }
.rank-medal { font-size: 32rpx; width: 48rpx; text-align: center; }
.rank-avatar {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  flex-shrink: 0;
}
.rank-info { flex: 1; min-width: 0; }
.rank-name {
  font-size: 26rpx;
  font-weight: 600;
  color: #334155;
}
.rank-level {
  font-size: 20rpx;
  color: #94A3B8;
  margin-top: 2rpx;
  display: block;
}
.rank-score-wrap {
  display: flex;
  align-items: baseline;
  gap: 4rpx;
}
.rank-score {
  font-size: 32rpx;
  font-weight: 700;
  color: #10B981;
}
.rank-unit {
  font-size: 22rpx;
  color: #94A3B8;
}
.rank-streak {
  font-size: 22rpx;
  color: #F97316;
  white-space: nowrap;
}
</style>