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

<template>
  <view class="event-medals-page">
    <!-- 顶部统计 -->
    <view class="top-stats">
      <view class="stat-item">
        <view class="stat-number">{{ totalTeams }}</view>
        <view class="stat-label">参赛队伍</view>
      </view>
      <view class="stat-item">
        <view class="stat-number">{{ totalMedals }}</view>
        <view class="stat-label">奖牌总数</view>
      </view>
    </view>

    <!-- 奖牌榜列表 -->
    <view class="medals-list">
      <view class="medals-header">
        <view class="header-rank">排名</view>
        <view class="header-team">代表队</view>
        <view class="header-medals">
          <text class="medal-icon gold">🥇</text>
          <text class="medal-icon silver">🥈</text>
          <text class="medal-icon bronze">🥉</text>
          <text class="medal-total">总计</text>
        </view>
      </view>

      <view class="medal-item" v-for="(item, index) in medalsList" :key="index">
        <view class="item-rank" :class="'rank-' + item.rank">{{ item.rank }}</view>
        <view class="item-team">
          <view class="team-name">{{ item.team }}</view>
        </view>
        <view class="item-medals">
          <text class="medal-count gold">{{ item.gold }}</text>
          <text class="medal-count silver">{{ item.silver }}</text>
          <text class="medal-count bronze">{{ item.bronze }}</text>
          <text class="medal-count total">{{ item.total }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      medalsList: [
        { rank: 1, team: '北京队', gold: 8, silver: 5, bronze: 3, total: 16 },
        { rank: 2, team: '上海队', gold: 6, silver: 7, bronze: 5, total: 18 },
        { rank: 3, team: '广东队', gold: 5, silver: 4, bronze: 6, total: 15 },
        { rank: 4, team: '天津队', gold: 4, silver: 5, bronze: 4, total: 13 },
        { rank: 5, team: '江苏队', gold: 3, silver: 3, bronze: 5, total: 11 },
        { rank: 6, team: '浙江队', gold: 2, silver: 4, bronze: 3, total: 9 },
        { rank: 7, team: '湖北队', gold: 2, silver: 2, bronze: 4, total: 8 },
        { rank: 8, team: '河北队', gold: 1, silver: 3, bronze: 2, total: 6 }
      ]
    };
  },
  computed: {
    totalTeams() {
      return this.medalsList.length;
    },
    totalMedals() {
      return this.medalsList.reduce((sum, item) => sum + item.total, 0);
    }
  }
};
</script>

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

.top-stats {
  background: linear-gradient(135deg, #C93639 0%, #A02629 100%);
  padding: 40rpx 30rpx;
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
}

.stat-item {
  text-align: center;
  color: #fff;
}

.stat-number {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  opacity: 0.9;
}

.medals-list {
  margin: 0 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.medals-header {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  background-color: #F8F8F8;
  font-size: 24rpx;
  font-weight: bold;
  color: #666666;
}

.header-rank {
  width: 80rpx;
  text-align: center;
}

.header-team {
  flex: 1;
}

.header-medals {
  display: flex;
  gap: 30rpx;
  align-items: center;
}

.medal-icon {
  font-size: 28rpx;
}

.medal-total {
  width: 60rpx;
  text-align: center;
}

.medal-item {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1rpx solid #F5F5F5;
}

.medal-item:last-child {
  border-bottom: none;
}

.item-rank {
  width: 80rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
}

.item-rank.rank-1 {
  color: #FFD700;
}

.item-rank.rank-2 {
  color: #C0C0C0;
}

.item-rank.rank-3 {
  color: #CD7F32;
}

.item-rank:not(.rank-1):not(.rank-2):not(.rank-3) {
  color: #999999;
}

.item-team {
  flex: 1;
}

.team-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
}

.item-medals {
  display: flex;
  gap: 30rpx;
  align-items: center;
}

.medal-count {
  width: 40rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: bold;
}

.medal-count.gold {
  color: #FFD700;
}

.medal-count.silver {
  color: #C0C0C0;
}

.medal-count.bronze {
  color: #CD7F32;
}

.medal-count.total {
  width: 60rpx;
  color: #C93639;
}
</style>