yingsa/miniprogram/pages/match/ranking/index.wxml

<!--排位赛详情页面 - 全新设计-->
<view class="page-container">
  <!-- 顶部背景 -->
  <view class="hero-bg">
    <view class="hero-pattern"></view>
  </view>

  <!-- 主要内容 -->
  <view class="main-content">
    <!-- 比赛头部信息 -->
    <view class="match-header animate-fadeInUp">
      <view class="match-badge">
        <image class="match-badge-img" src="/images/icon-ranking.svg" mode="aspectFit"></image>
      </view>
      <view class="match-title">{{match.name || '排位赛'}}</view>
      <view class="match-status status-{{match.status}}">
        <text class="status-dot"></text>
        <text>{{match.statusName || '待开始'}}</text>
      </view>
    </view>

    <!-- 比赛信息卡片 -->
    <view class="info-card animate-fadeInUp" style="animation-delay: 0.05s">
      <view class="info-grid">
        <view class="info-item">
          <text class="info-value">{{match.matchCode}}</text>
          <text class="info-label">比赛码</text>
        </view>
        <view class="info-item">
          <text class="info-value accent">×{{match.weight}}</text>
          <text class="info-label">权重</text>
        </view>
        <view class="info-item">
          <text class="info-value">{{match.players.length || 0}}</text>
          <text class="info-label">参赛人数</text>
        </view>
        <view class="info-item">
          <view class="stage-tag stage-{{match.stage}}">{{match.stageName || '报名中'}}</view>
          <text class="info-label">当前阶段</text>
        </view>
      </view>
    </view>

    <!-- 我的状态 -->
    <view class="my-status-card animate-fadeInUp" style="animation-delay: 0.1s" wx:if="{{myPlayer}}">
      <view class="card-header">
        <image class="card-icon" src="/images/icon-user.svg" mode="aspectFit"></image>
        <text class="card-title">我的状态</text>
      </view>
      <view class="status-content">
        <view class="status-main">
          <view class="status-badge {{myPlayer.status}}">
            <text wx:if="{{myPlayer.status === 'playing'}}">比赛中</text>
            <text wx:elif="{{myPlayer.status === 'finished'}}">已完成</text>
            <text wx:else>等待匹配</text>
          </view>
          <view class="win-lose-stats">
            <view class="stat win">
              <text class="stat-num">{{myPlayer.winCount || 0}}</text>
              <text class="stat-text">胜</text>
            </view>
            <view class="stat lose">
              <text class="stat-num">{{myPlayer.loseCount || 0}}</text>
              <text class="stat-text">负</text>
            </view>
          </view>
        </view>
        
        <!-- 当前对局 -->
        <view class="current-game" wx:if="{{currentGame}}">
          <view class="game-divider">
            <text class="divider-text">当前对局</text>
          </view>
          <view class="opponent-card">
            <image class="opponent-avatar" src="{{currentGame.opponent.avatar || '/images/avatar-default.svg'}}" mode="aspectFill"></image>
            <view class="opponent-info">
              <text class="opponent-name">VS {{currentGame.opponent.realName}}</text>
              <view class="opponent-meta">
                <view class="level-tag lv{{currentGame.opponent.level}}">Lv{{currentGame.opponent.level}}</view>
                <text class="opponent-power">战力 {{currentGame.opponent.powerScore}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 参赛选手 -->
    <view class="players-card animate-fadeInUp" style="animation-delay: 0.15s">
      <view class="card-header">
        <image class="card-icon" src="/images/icon-users.svg" mode="aspectFit"></image>
        <text class="card-title">参赛选手</text>
        <text class="player-count">{{match.players.length || 0}}人</text>
      </view>
      
      <view class="players-list" wx:if="{{match.players && match.players.length > 0}}">
        <view class="player-item {{item.ladderUserId === myPlayer.ladderUserId ? 'is-me' : ''}}" 
              wx:for="{{match.players}}" 
              wx:key="id">
          <view class="player-rank rank-{{index + 1}}">{{index + 1}}</view>
          <view class="player-main">
            <text class="player-name">{{item.realName}}</text>
            <view class="player-tags">
              <view class="level-tag lv{{item.level}}">Lv{{item.level}}</view>
              <text class="player-me" wx:if="{{item.ladderUserId === myPlayer.ladderUserId}}">我</text>
            </view>
          </view>
          <view class="player-record">
            <text class="record-win">{{item.winCount || 0}}胜</text>
            <text class="record-lose">{{item.loseCount || 0}}负</text>
          </view>
          <view class="player-status-dot {{item.status}}"></view>
        </view>
      </view>
      
      <view class="empty-players" wx:else>
        <image class="empty-icon" src="/images/empty-match.svg" mode="aspectFit"></image>
        <text class="empty-text">暂无参赛选手</text>
      </view>
    </view>
  </view>
</view>