cfc/cfc-frontend/components/CircleRanking.vue

<template>
  <view class="circle-ranking" v-if="circleName">
    <view class="cr-header">
      <text class="cr-title">🏅 {{ circleName }}</text>
    </view>
    <view class="cr-list">
      <view class="cr-item" v-for="(item, idx) in rankings" :key="idx">
        <text class="cr-rank">{{ rankIcon(idx) }}</text>
        <view class="cr-info">
          <text class="cr-family">家庭 {{ idx + 1 }}</text>
          <text class="cr-members">{{ item.memberCount || 0 }} 位成员</text>
        </view>
        <text class="cr-score">{{ item.totalScore || 0 }} 分</text>
      </view>
    </view>
  </view>
  <view v-else-if="!circleName && !loading" class="cr-empty">
    <text class="cr-empty-text">暂无健康圈数据</text>
  </view>
</template>

<script>
export default {
  props: {
    circleName: { type: String, default: '' },
    rankings: { type: Array, default: function() { return [] } },
    loading: { type: Boolean, default: false }
  },
  methods: {
    rankIcon: function(idx) {
      var medals = ['🥇', '🥈', '🥉']
      return medals[idx] || '#' + (idx + 1)
    }
  }
}
</script>

<style scoped>
.circle-ranking {
  background: #fff;
  border-radius: 20rpx;
  margin: 0 20rpx 20rpx 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.cr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.cr-title {
  font-size: 30rpx;
  font-weight: 700;
  color: #1E293B;
}
.cr-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #F1F5F9;
}
.cr-item:last-child { border-bottom: none; }
.cr-rank { font-size: 32rpx; width: 48rpx; text-align: center; }
.cr-info { flex: 1; min-width: 0; }
.cr-family { font-size: 26rpx; font-weight: 600; color: #334155; display: block; }
.cr-members { font-size: 20rpx; color: #94A3B8; margin-top: 2rpx; display: block; }
.cr-score { font-size: 30rpx; font-weight: 700; color: #6366F1; }
.cr-empty {
  padding: 60rpx 20rpx;
  display: flex;
  justify-content: center;
}
.cr-empty-text { font-size: 26rpx; color: #94A3B8; }
</style>