Press Next

# MatchScheduleInGame 比赛进行中

比赛进行中状态展示组件，用于显示比赛进行中的状态信息，包括队伍信息、参赛成员和操作按钮。

# 特性

  • 🎮 状态展示 - 清晰展示比赛进行中的状态信息
  • 👥 成员管理 - 显示参赛成员头像，支持显示更多成员数量
  • 🏷️ 组别标识 - 支持显示队伍所属组别信息
  • 🎨 自定义样式 - 丰富的CSS变量支持主题定制
  • 🔧 插槽支持 - 支持自定义底部操作按钮
  • ⚡ 轻量高效 - 优化的代码结构，性能出色

# 适用场景

  • 电竞比赛进行中状态展示
  • 团队比赛实时状态显示
  • 在线游戏对战状态
  • 体育赛事进行中展示

# 引入

import PressMatchScheduleInGame from 'press-next/press-match-schedule-in-game/press-match-schedule-in-game';

# 代码演示

# 基础用法

<template>
  <PressMatchScheduleInGame
    :title="title"
    :team-name="teamName"
    :team-logo="teamLogo"
    :group-text="groupText"
    :members="members"
    :max-display-members="5"
    :button-text="buttonText"
    @on-button-click="handleButtonClick"
  />
</template>

<script setup lang="ts">
import PressMatchScheduleInGame from 'press-next/press-match-schedule-in-game/press-match-schedule-in-game';

const title = '比赛进行中，等待裁判录入成绩';
const teamName = '深圳大学';
const teamLogo = 'https://placehold.co/48x48/1E72FF/ffffff?text=LOGO';
const groupText = '第5组';
const members = [
  { id: 1, name: '成员1', avatar: 'https://placehold.co/40x40/4A90E2/ffffff?text=1' },
  { id: 2, name: '成员2', avatar: 'https://placehold.co/40x40/7ED321/ffffff?text=2' },
  { id: 3, name: '成员3', avatar: 'https://placehold.co/40x40/F5A623/ffffff?text=3' },
  { id: 4, name: '成员4', avatar: 'https://placehold.co/40x40/BD10E0/ffffff?text=4' },
  { id: 5, name: '成员5', avatar: 'https://placehold.co/40x40/B8E986/ffffff?text=5' },
  { id: 6, name: '成员6', avatar: 'https://placehold.co/40x40/50E3C2/ffffff?text=6' },
  { id: 7, name: '成员7', avatar: 'https://placehold.co/40x40/D0021B/ffffff?text=7' },
];
const buttonText = '前往参赛';

const handleButtonClick = () => {
  console.log('点击操作按钮');
};
</script>

# 自定义成员显示数量

<template>
  <PressMatchScheduleInGame
    title="比赛进行中"
    team-name="王者战队"
    :team-logo="teamLogo"
    group-text="A组"
    :members="members"
    :max-display-members="3"
    button-text="查看详情"
    @on-button-click="handleClick"
  />
</template>

<script setup lang="ts">
import PressMatchScheduleInGame from 'press-next/press-match-schedule-in-game/press-match-schedule-in-game';

const teamLogo = 'https://placehold.co/48x48';
const members = [
  { id: 1, name: '成员1', avatar: 'https://placehold.co/40x40' },
  { id: 2, name: '成员2', avatar: 'https://placehold.co/40x40' },
  { id: 3, name: '成员3', avatar: 'https://placehold.co/40x40' },
  { id: 4, name: '成员4', avatar: 'https://placehold.co/40x40' },
  { id: 5, name: '成员5', avatar: 'https://placehold.co/40x40' },
];

const handleClick = () => {
  console.log('查看详情');
};
</script>

# 自定义按钮样式

<template>
  <PressMatchScheduleInGame
    title="比赛进行中，等待裁判录入成绩"
    team-name="深圳大学"
    team-logo="https://placehold.co/48x48"
    group-text="第5组"
    :members="members"
    button-text="立即参赛"
    button-type="primary"
    :button-custom-style="customButtonStyle"
    @on-button-click="handleButtonClick"
  />
</template>

<script setup lang="ts">
import PressMatchScheduleInGame from 'press-next/press-match-schedule-in-game/press-match-schedule-in-game';

const members = [
  { id: 1, name: '成员1', avatar: 'https://placehold.co/40x40' },
  { id: 2, name: '成员2', avatar: 'https://placehold.co/40x40' },
];

const customButtonStyle = {
  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  borderRadius: '20px',
};

const handleButtonClick = () => {
  console.log('立即参赛');
};
</script>

# 自定义底部插槽

<template>
  <PressMatchScheduleInGame
    title="比赛进行中，等待裁判录入成绩"
    team-name="深圳大学"
    team-logo="https://placehold.co/48x48"
    group-text="第5组"
    :members="members"
  >
    <template #footer>
      <div class="custom-footer">
        <button class="custom-btn custom-btn--primary" @click="handleJoin">
          加入比赛
        </button>
        <button class="custom-btn custom-btn--secondary" @click="handleWatch">
          观看直播
        </button>
      </div>
    </template>
  </PressMatchScheduleInGame>
</template>

<script setup lang="ts">
import PressMatchScheduleInGame from 'press-next/press-match-schedule-in-game/press-match-schedule-in-game';

const members = [
  { id: 1, name: '成员1', avatar: 'https://placehold.co/40x40' },
  { id: 2, name: '成员2', avatar: 'https://placehold.co/40x40' },
];

const handleJoin = () => {
  console.log('加入比赛');
};

const handleWatch = () => {
  console.log('观看直播');
};
</script>

<style scoped lang="scss">
.custom-footer {
  display: flex;
  gap: .24rem;
  padding: .32rem .48rem;
}

.custom-btn {
  flex: 1;
  padding: .24rem .48rem;
  border: none;
  border-radius: .16rem;
  font-size: .32rem;
  transition: all .3s;
}

.custom-btn--primary {
  background: #1e72ff;
  color: #fff;
}

.custom-btn--secondary {
  background: #f5f5f5;
  color: #333;
}
</style>

# API

# Props

参数 说明 类型 默认值
custom-class 自定义样式类 string ''
title 标题文字 string '比赛进行中，等待裁判录入成绩'
team-name 队伍名称 string '深圳大学'
team-logo 队伍logo string ''
group-text 组别文字 string '第5组'
members 成员列表 Member[] []
max-display-members 最大显示成员数 number 5
button-text 按钮文字 string '前往参赛'
button-type 按钮类型 'primary' | 'default' | 'info' | 'warning' | 'danger' 'primary'
button-plain 是否为朴素按钮 boolean false
button-size 按钮尺寸 'normal' | 'large' | 'small' | 'mini' 'large'
button-open-type 微信开放能力 string ''
button-custom-style 自定义按钮样式 object {}

# Member 数据结构

interface Member {
  id: string | number; // 成员ID
  name: string; // 成员名称
  avatar: string; // 成员头像URL
}

# Slots

名称 说明
footer 自定义底部内容

# Events

事件名 说明 参数
on-button-click 点击操作按钮时触发 -

# 注意事项

# 使用建议

  1. 成员头像：建议为成员头像设置默认占位图，避免加载失败时显示空白
  2. 成员数量：max-display-members 控制显示的成员数量，超出部分会显示 "+N" 的形式
  3. 队伍logo：建议使用正方形图片，组件会自动处理为圆形显示
  4. 按钮样式：可以通过 button-custom-style 自定义按钮样式，或使用插槽完全自定义底部内容
  5. 响应式适配：在小屏幕设备上，建议适当调整 --sig-member-avatar-size 等尺寸变量

# 性能优化

  • 使用 v-memo 指令优化成员列表渲染
  • 大量成员时建议限制 max-display-members 的值
  • 头像图片建议使用 CDN 加速

# 兼容性

  • 支持 Vue 3.0+
  • 兼容现代浏览器（Chrome 60+, Firefox 60+, Safari 12+）
  • 支持微信小程序、支付宝小程序等平台

# 主题定制

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

# 样式变量

# 间距系统 (Spacing)

名称 默认值 描述
--sig-header-padding $spacing-lg 0 头部区域内边距
--sig-title-wrapper-padding 0 .3rem 标题包装区域内边距
--sig-title-wrapper-gap .16rem 标题装饰元素间距
--sig-title-margin-top $spacing-md 标题上边距
--sig-content-margin 0 $spacing-md 内容区域外边距
--sig-team-info-padding $spacing-lg $spacing-md 队伍信息内边距
--sig-team-logo-wrapper-margin-top -1rem 队伍logo容器上边距
--sig-members-margin-top $spacing-md 成员列表上边距
--sig-members-gap .12rem 成员头像间距
--sig-action-button-margin .22rem .56rem $spacing-xl .56rem 底部按钮外边距

# 块状系统 (Box Model)

名称 默认值 描述
--sig-card-width 100% 卡片宽度
--sig-card-height 5.5rem 卡片高度
--sig-bar-width 100% 样式条宽度
--sig-bar-height .08rem 样式条高度
--sig-title-wrapper-width 100% 标题包装区域宽度
--sig-title-wrapper-height .48rem 标题包装区域高度
--sig-title-decoration-flex 1 标题装饰元素弹性值
--sig-title-decoration-height .02rem 标题装饰线高度
--sig-team-info-height 2.06rem 队伍信息高度
--sig-team-info-box-sizing border-box 队伍信息盒模型
--sig-team-logo-wrapper-size 1.44rem 队伍logo容器尺寸
--sig-team-logo-wrapper-overflow hidden 队伍logo容器溢出
--sig-team-logo-wrapper-box-sizing border-box 队伍logo容器盒模型
--sig-team-logo-bg-size 100% 队伍logo背景尺寸
--sig-team-logo-size 100% 队伍logo尺寸
--sig-group-tag-width 100% 组别标签宽度
--sig-group-tag-height .34rem 组别标签高度
--sig-member-avatar-size .8rem 成员头像尺寸
--sig-member-img-size 100% 成员图片尺寸
--sig-more-members-size .8rem 更多成员尺寸
--sig-action-button-width 100% 底部按钮宽度
--sig-action-button-height .8rem 底部按钮高度

# 边框属性 (Border)

名称 默认值 描述
--sig-team-logo-wrapper-border-width 1px 队伍logo边框宽度
--sig-team-logo-wrapper-border-style solid 队伍logo边框样式
--sig-team-logo-wrapper-border-color $color-divider-light 队伍logo边框颜色
--sig-member-avatar-border-color $color-divider-default 成员头像边框颜色
--sig-more-members-border-color $color-divider-default 更多成员边框颜色

# 颜色系统 (Colors)

名称 默认值 描述
--sig-card-bg $color-surface-default 卡片背景色
--sig-bar-bg $color-surface-brand-light2 样式条背景色
--sig-title-color #212124 标题文字颜色
--sig-title-decoration-left-bg linear-gradient(to right, transparent, #d9e3ff) 左侧装饰线背景渐变
--sig-title-decoration-right-bg linear-gradient(to left, transparent, #d9e3ff) 右侧装饰线背景渐变
--sig-team-info-bg linear-gradient(360deg, #d7e2ff00 0, #d7e2ff 100%) 队伍信息背景渐变
--sig-team-name-color $color-text-secondary 队伍名称文字颜色
--sig-group-tag-bg $color-text-primary 组别标签背景色
--sig-group-tag-color $color-surface-default 组别标签文字颜色
--sig-more-members-bg $color-surface-secondary 更多成员背景色
--sig-more-text-color $color-text-invert-default 更多成员文字颜色

# 字体系统 (Typography)

名称 默认值 描述
--sig-header-text-align center 头部文本对齐方式
--sig-title-font-size $font-size-lg 标题字体大小
--sig-title-font-weight $font-weight-bold 标题字体粗细
--sig-title-line-height 1.5 标题行高
--sig-team-name-align center 队伍名称对齐方式
--sig-team-name-font-size $font-size-sm 队伍名称字体大小
--sig-team-name-font-weight $font-weight-bold 队伍名称字体粗细
--sig-team-name-line-height 1.5 队伍名称行高
--sig-group-tag-font-size $font-size-xs 组别标签字体大小
--sig-group-tag-font-weight $font-weight-regular 组别标签字体粗细
--sig-group-tag-line-height 1.5 组别标签行高
--sig-more-text-font-size $font-size-md 更多成员字体大小
--sig-more-text-font-weight $font-weight-regular 更多成员字体粗细
--sig-action-button-font-size $font-size-lg 底部按钮字体大小
--sig-action-button-font-weight $font-weight-bold 底部按钮字体粗细

# 圆角系统 (Border Radius)

名称 默认值 描述
--sig-card-radius $border-radius-sm 卡片圆角
--sig-bar-border-top-left-radius $border-radius-sm 样式条左上圆角
--sig-bar-border-top-right-radius $border-radius-sm 样式条右上圆角
--sig-team-info-border-radius $border-radius-sm 队伍信息圆角
--sig-team-logo-wrapper-border-radius $border-radius-circle 队伍logo容器圆角
--sig-team-logo-border-radius $border-radius-circle 队伍logo圆角
--sig-group-tag-radius .04rem 组别标签圆角
--sig-member-avatar-radius $border-radius-circle 成员头像圆角
--sig-action-button-radius $border-radius-999 底部按钮圆角

# 其他属性 (Others)

名称 默认值 描述
--sig-card-position relative 卡片定位方式
--sig-bar-position relative 样式条定位方式
--sig-content-position relative 内容区域定位方式
--sig-team-logo-wrapper-position relative 队伍logo容器定位方式
--sig-member-avatar-position relative 成员头像定位方式
--sig-more-members-position relative 更多成员定位方式
--sig-group-tag-opacity .6 组别标签透明度
--sig-team-logo-object-fit cover 队伍logo填充方式
--sig-member-img-object-fit cover 成员图片填充方式

← MatchScheduleNotFull →