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

<template>
  <view class="event-lineup-page">
    <!-- 组别选择 -->
    <view class="group-tabs">
      <view
        class="group-tab"
        v-for="(group, index) in groups"
        :key="index"
        :class="{ active: currentGroup === index }"
        @click="currentGroup = index"
      >
        {{ group }}
      </view>
    </view>

    <!-- 出场顺序列表 -->
    <view class="lineup-list">
      <view class="lineup-item" v-for="(item, index) in currentLineup" :key="index">
        <view class="lineup-order">
          <view class="order-number">{{ item.order }}</view>
          <text class="order-text">号</text>
        </view>
        <view class="lineup-info">
          <view class="lineup-name">{{ item.name }}</view>
          <view class="lineup-detail">
            <text class="detail-item">{{ item.team }}</text>
            <text class="divider">|</text>
            <text class="detail-item">{{ item.time }}</text>
          </view>
        </view>
        <view class="lineup-status" :class="item.status">
          {{ item.statusText }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentGroup: 0,
      groups: ['男子A组', '男子B组', '女子A组'],
      lineups: {
        0: [
          {
            order: 1,
            name: '张三',
            team: '北京队',
            time: '09:00',
            status: 'finished',
            statusText: '已完成'
          },
          {
            order: 2,
            name: '李四',
            team: '上海队',
            time: '09:15',
            status: 'finished',
            statusText: '已完成'
          },
          {
            order: 3,
            name: '王五',
            team: '广东队',
            time: '09:30',
            status: 'ongoing',
            statusText: '进行中'
          },
          {
            order: 4,
            name: '赵六',
            team: '天津队',
            time: '09:45',
            status: 'waiting',
            statusText: '待出场'
          },
          {
            order: 5,
            name: '刘七',
            team: '江苏队',
            time: '10:00',
            status: 'waiting',
            statusText: '待出场'
          }
        ],
        1: [
          {
            order: 1,
            name: '孙八',
            team: '浙江队',
            time: '10:30',
            status: 'waiting',
            statusText: '待出场'
          },
          {
            order: 2,
            name: '周九',
            team: '湖北队',
            time: '10:45',
            status: 'waiting',
            statusText: '待出场'
          }
        ],
        2: [
          {
            order: 1,
            name: '小红',
            team: '四川队',
            time: '14:00',
            status: 'waiting',
            statusText: '待出场'
          },
          {
            order: 2,
            name: '小芳',
            team: '河南队',
            time: '14:15',
            status: 'waiting',
            statusText: '待出场'
          }
        ]
      }
    };
  },
  computed: {
    currentLineup() {
      return this.lineups[this.currentGroup] || [];
    }
  }
};
</script>

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

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

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

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

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

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

.lineup-order {
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #C93639 0%, #A02629 100%);
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.order-number {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  line-height: 1;
}

.order-text {
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.9);
}

.lineup-info {
  flex: 1;
}

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

.lineup-detail {
  font-size: 24rpx;
  color: #666666;
}

.divider {
  margin: 0 10rpx;
}

.lineup-status {
  padding: 8rpx 20rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  flex-shrink: 0;
}

.lineup-status.finished {
  background-color: #E8F5E9;
  color: #4CAF50;
}

.lineup-status.ongoing {
  background-color: #FFF3E0;
  color: #FF9800;
}

.lineup-status.waiting {
  background-color: #F5F5F5;
  color: #999999;
}
</style>