martial-mini/pages/event-score/event-score.vue

<template>
  <view class="event-score-page">
    <!-- 项目分类 -->
    <view class="category-tabs">
      <view
        class="category-tab"
        v-for="(category, index) in categories"
        :key="index"
        :class="{ active: currentCategory === index }"
        @click="currentCategory = index"
      >
        {{ category }}
      </view>
    </view>

    <!-- 成绩列表 -->
    <view class="score-list">
      <view class="score-item" v-for="(item, index) in currentScores" :key="index">
        <view class="rank-badge" :class="'rank-' + item.rank">
          <text class="rank-number">{{ item.rank }}</text>
        </view>
        <view class="player-info">
          <view class="player-name">{{ item.name }}</view>
          <view class="player-team">{{ item.team }}</view>
        </view>
        <view class="score-info">
          <view class="score-value">{{ item.score }}</view>
          <view class="score-label">分</view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="currentScores.length === 0">
      <text class="empty-text">暂无成绩数据</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentCategory: 0,
      categories: ['男子散打', '男子套路', '女子散打', '女子套路'],
      scores: {
        0: [
          { rank: 1, name: '张三', team: '北京队', score: '9.85' },
          { rank: 2, name: '李四', team: '上海队', score: '9.72' },
          { rank: 3, name: '王五', team: '广东队', score: '9.68' },
          { rank: 4, name: '赵六', team: '天津队', score: '9.55' },
          { rank: 5, name: '刘七', team: '江苏队', score: '9.48' }
        ],
        1: [
          { rank: 1, name: '孙八', team: '浙江队', score: '9.90' },
          { rank: 2, name: '周九', team: '湖北队', score: '9.75' },
          { rank: 3, name: '吴十', team: '河北队', score: '9.60' }
        ],
        2: [],
        3: []
      }
    };
  },
  computed: {
    currentScores() {
      return this.scores[this.currentCategory] || [];
    }
  }
};
</script>

<style lang="scss" scoped>
.event-score-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.category-tabs {
  background-color: #fff;
  display: flex;
  padding: 20rpx 30rpx;
  gap: 15rpx;
  overflow-x: auto;
  margin-bottom: 20rpx;
}

.category-tab {
  padding: 15rpx 30rpx;
  border-radius: 50rpx;
  font-size: 26rpx;
  color: #666666;
  background-color: #f5f5f5;
  white-space: nowrap;
  flex-shrink: 0;
}

.category-tab.active {
  background-color: #C93639;
  color: #fff;
}

.score-list {
  padding: 0 30rpx 20rpx;
}

.score-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 25rpx 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  gap: 25rpx;
}

.rank-badge {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rank-badge.rank-1 {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
}

.rank-badge.rank-2 {
  background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
}

.rank-badge.rank-3 {
  background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%);
}

.rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
  background-color: #E0E0E0;
}

.rank-number {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
}

.player-info {
  flex: 1;
}

.player-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 8rpx;
}

.player-team {
  font-size: 24rpx;
  color: #666666;
}

.score-info {
  display: flex;
  align-items: baseline;
  gap: 5rpx;
  flex-shrink: 0;
}

.score-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #C93639;
}

.score-label {
  font-size: 24rpx;
  color: #999999;
}

.empty-state {
  padding: 200rpx 0;
  text-align: center;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}
</style>