Press Next

# MatchScheduleEndGame 赛事结束游戏卡片

赛事结束后的比赛展示组件，支持显示比赛结果、队伍信息、比分、状态标签等。提供双队伍比分模式和单队伍/用户模式两种展示方式。

# 特性

  • 🏆 多状态支持 - 支持冠军、亚军、季军、晋级等多种比赛状态
  • 🎯 双展示模式 - 支持双队伍比分模式和单队伍获胜模式
  • 🎨 主题定制 - 丰富的CSS变量支持主题定制
  • 📱 响应式设计 - 适配不同屏幕尺寸
  • 🔧 插槽支持 - 支持自定义标题、内容和按钮
  • ⚡ 轻量高效 - 优化的代码结构，性能出色

# 适用场景

  • 电竞比赛结果展示
  • 体育赛事比分卡片
  • 游戏对战结果
  • 锦标赛排名展示

# 引入

import PressMatchScheduleEndGame from 'press-next/press-match-schedule-end-game/press-match-schedule-end-game';

# 代码演示

# 基础用法 - 比分模式

<template>
  <PressMatchScheduleEndGame
    match-type="score"
    status="champion"
    :left-team="leftTeam"
    :right-team="rightTeam"
    match-time="11-18 12:00 已结束"
    button-text="分享比赛"
    @on-button-click="handleShare"
  />
</template>

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

const leftTeam = {
  name: '三好杯专业战队',
  avatar: 'https://placehold.co/144x144',
  score: 3,
};

const rightTeam = {
  name: '美丽杯专业战队',
  avatar: 'https://placehold.co/144x144',
  score: 1,
};

const handleShare = () => {
  console.log('分享比赛');
};
</script>

# 单队伍模式

<template>
  <PressMatchScheduleEndGame
    match-type="single"
    status="champion"
    :winner="winner"
    button-text="查看详情"
    @on-button-click="handleViewDetail"
  />
</template>

<script setup lang="ts">
const winner = {
  name: '用户昵称昵称最长十字',
  avatar: 'https://placehold.co/144x144',
};

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

# 显示自定义标签

<template>
  <PressMatchScheduleEndGame
    match-type="score"
    status="advance"
    :left-team="leftTeam"
    :right-team="rightTeam"
    match-time="11-18 12:00 已结束"
    :show-label="true"
    label-text="弃赛"
  />
</template>

<script setup lang="ts">
const leftTeam = {
  name: '三好杯专业战队',
  avatar: 'https://placehold.co/144x144',
  score: 0,
};

const rightTeam = {
  name: '美丽杯专业战队',
  avatar: 'https://placehold.co/144x144',
  score: 0,
};
</script>

# 显示用户统计数据

<template>
  <PressMatchScheduleEndGame
    match-type="single"
    status="champion"
    :winner="winner"
    :show-stats="true"
    :stats-items="statsItems"
  />
</template>

<script setup lang="ts">
const winner = {
  name: '用户昵称昵称最长十字',
  avatar: 'https://placehold.co/144x144',
};

const statsItems = [
  { label: '已完成', value: '1/10' },
  { label: '总积分', value: 1000 },
  { label: '总排名', value: 20 },
];
</script>

# 双按钮模式

<template>
  <PressMatchScheduleEndGame
    match-type="single"
    status="champion"
    :winner="winner"
    :show-double-buttons="true"
    primary-button-text="查看数据"
    secondary-button-text="分享比赛"
    @on-primary-button-click="handleViewData"
    @on-secondary-button-click="handleShare"
  />
</template>

<script setup lang="ts">
const handleViewData = () => {
  console.log('查看数据');
};

const handleShare = () => {
  console.log('分享比赛');
};
</script>

# 自定义主题

<template>
  <PressMatchScheduleEndGame
    custom-class="my-custom-theme"
    status="champion"
    :left-team="leftTeam"
    :right-team="rightTeam"
  />
</template>

<style>
.my-custom-theme {
  /* 卡片样式 */
  --seg-card-bg: #f5f5f5;
  --seg-card-radius: .16rem;
  
  /* 比分样式 */
  --seg-score-number-color: #ff6b00;
  --seg-score-number-font-size: 1rem;
  
  /* 按钮样式 */
  --seg-action-button-bg: #ff6b00;
  --seg-action-button-radius: .4rem;
  
  /* 标题样式（由 PressMatchScheduleTitle 组件控制） */
  --pmst-status-bg-champion: linear-gradient(90deg, #ff6b00 0%, #ff9500 100%);
}
</style>

# API

# Props

参数 说明 类型 默认值
custom-class 自定义样式类 string ''
match-type 比赛类型 'score' | 'single' 'score'
status 比赛状态 Status 'advance'
status-text 状态文本（自定义） string ''
left-team 左侧队伍信息 TeamInfo -
right-team 右侧队伍信息 TeamInfo -
score-separator 比分分隔符 string ':'
winner 获胜者信息（单队伍模式） WinnerInfo -
match-time 比赛时间 string '11-18 12:00 已结束'
show-label 是否显示标签 boolean false
label-text 标签文本 string '弃赛'
show-stats 是否显示统计数据 boolean false
stats-items 统计数据项列表 StatsItem[] []
show-double-buttons 是否显示双按钮 boolean false
single-button-popover-default-show 单按钮 PopoverPlus 默认显示状态 boolean false
primary-button-popover-default-show 主按钮 PopoverPlus 默认显示状态 boolean false
secondary-button-popover-default-show 次按钮 PopoverPlus 默认显示状态 boolean false
single-button-popover-text 单按钮 PopoverPlus 提示文本 string '等待本局结束后开始下一局匹配'
single-button-popover-theme 单按钮 PopoverPlus 主题 'light' | 'dark' 'dark'
single-button-popover-placement 单按钮 PopoverPlus 位置 PopoverPlacement 'top'
single-button-popover-offset 单按钮 PopoverPlus 偏移量 number[] [0, 8]
single-button-popover-overlay 单按钮 PopoverPlus 是否显示遮罩层 boolean false
single-button-popover-close-on-click-action 单按钮 PopoverPlus 点击选项后是否关闭 boolean true
single-button-popover-close-on-click-outside 单按钮 PopoverPlus 点击外部是否关闭 boolean true
single-button-popover-get-container 单按钮 PopoverPlus 指定挂载的节点 string | () => HTMLElement ''
single-button-popover-z-index 单按钮 PopoverPlus 层级 number 9999
single-button-popover-duration 单按钮 PopoverPlus 动画时长（ms） number 200
single-button-popover-custom-style 单按钮 PopoverPlus 自定义样式 string | Record<string, string> ''
button-text 单按钮文字 string '分享比赛'
button-type 单按钮类型 ButtonType 'primary'
button-plain 单按钮是否为朴素按钮 boolean false
button-size 单按钮尺寸 ButtonSize 'large'
button-open-type 单按钮开放能力 string ''
button-disabled 单按钮是否禁用 boolean false
button-custom-style 自定义单按钮样式 Record<string, string> {}
primary-button-text 主按钮文字 string '查看数据'
primary-button-type 主按钮类型 ButtonType 'primary'
primary-button-plain 主按钮是否为朴素按钮 boolean false
primary-button-size 主按钮尺寸 ButtonSize 'normal'
primary-button-open-type 主按钮开放能力 string ''
primary-button-disabled 主按钮是否禁用 boolean false
primary-button-custom-style 自定义主按钮样式 Record<string, string> {}
primary-button-popover-text 主按钮 PopoverPlus 提示文本 string '等待本局结束后开始下一局匹配'
primary-button-popover-theme 主按钮 PopoverPlus 主题 'light' | 'dark' 'dark'
primary-button-popover-placement 主按钮 PopoverPlus 位置 PopoverPlacement 'top'
primary-button-popover-offset 主按钮 PopoverPlus 偏移量 number[] [0, 8]
primary-button-popover-overlay 主按钮 PopoverPlus 是否显示遮罩层 boolean false
primary-button-popover-close-on-click-action 主按钮 PopoverPlus 点击选项后是否关闭 boolean true
primary-button-popover-close-on-click-outside 主按钮 PopoverPlus 点击外部是否关闭 boolean true
primary-button-popover-get-container 主按钮 PopoverPlus 指定挂载的节点 string | () => HTMLElement ''
primary-button-popover-z-index 主按钮 PopoverPlus 层级 number 9999
primary-button-popover-duration 主按钮 PopoverPlus 动画时长（ms） number 200
primary-button-popover-custom-style 主按钮 PopoverPlus 自定义样式 string | Record<string, string> ''
secondary-button-text 次按钮文字 string '分享比赛'
secondary-button-type 次按钮类型 ButtonType 'default'
secondary-button-plain 次按钮是否为朴素按钮 boolean true
secondary-button-size 次按钮尺寸 ButtonSize 'normal'
secondary-button-open-type 次按钮开放能力 string ''
secondary-button-disabled 次按钮是否禁用 boolean false
secondary-button-custom-style 自定义次按钮样式 Record<string, string> {}
secondary-button-popover-text 次按钮 PopoverPlus 提示文本 string '等待本局结束后开始下一局匹配'
secondary-button-popover-theme 次按钮 PopoverPlus 主题 'light' | 'dark' 'dark'
secondary-button-popover-placement 次按钮 PopoverPlus 位置 PopoverPlacement 'top'
secondary-button-popover-offset 次按钮 PopoverPlus 偏移量 number[] [0, 8]
secondary-button-popover-overlay 次按钮 PopoverPlus 是否显示遮罩层 boolean false
secondary-button-popover-close-on-click-action 次按钮 PopoverPlus 点击选项后是否关闭 boolean true
secondary-button-popover-close-on-click-outside 次按钮 PopoverPlus 点击外部是否关闭 boolean true
secondary-button-popover-get-container 次按钮 PopoverPlus 指定挂载的节点 string | () => HTMLElement ''
secondary-button-popover-z-index 次按钮 PopoverPlus 层级 number 9999
secondary-button-popover-duration 次按钮 PopoverPlus 动画时长（ms） number 200
secondary-button-popover-custom-style 次按钮 PopoverPlus 自定义样式 string | Record<string, string> ''

# ButtonType 按钮类型

type ButtonType =
  | 'primary'   // 主要按钮
  | 'default'   // 默认按钮
  | 'info'      // 信息按钮
  | 'warning'   // 警告按钮
  | 'danger';   // 危险按钮

# ButtonSize 按钮尺寸

type ButtonSize =
  | 'normal'    // 正常尺寸
  | 'large'     // 大尺寸
  | 'small'     // 小尺寸
  | 'mini';     // 迷你尺寸

# PopoverPlacement PopoverPlus 位置

type PopoverPlacement =
  | 'top'
  | 'bottom'
  | 'left'
  | 'right'
  | 'top-start'
  | 'top-end'
  | 'bottom-start'
  | 'bottom-end'
  | 'left-start'
  | 'left-end'
  | 'right-start'
  | 'right-end';

# Status 状态类型

type Status =
  | 'champion'        // 冠军
  | 'runner-up'       // 亚军
  | 'third-place'     // 季军
  | 'reached'         // 止步xx强
  | 'advance'         // 晋级
  | 'not-advance'     // 未晋级
  | 'number-place'    // 第xx名
  | 'placed-finished' // 第xx-xx名
  | 'none';           // 无状态

# TeamInfo 数据结构

interface TeamInfo {
  name: string;      // 队伍名称
  avatar: string;    // 队伍头像URL
  score?: number;    // 队伍比分
}

# WinnerInfo 数据结构

interface WinnerInfo {
  name: string;      // 获胜者名称
  avatar: string;    // 获胜者头像URL
}

# StatsItem 数据结构

interface StatsItem {
  label: string;           // 标签文本
  value: string | number;  // 数值
}

# Slots

名称 说明
title 自定义标题区域内容
content 自定义比赛内容区域
footer 自定义底部按钮区域内容（单按钮模式）
primary-btn 自定义主按钮（双按钮模式）
secondary-btn 自定义次按钮（双按钮模式）
single-btn 自定义单按钮（单按钮模式）
popover-content 自定义单按钮 PopoverPlus 内容
primary-popover-content 自定义主按钮 PopoverPlus 内容
secondary-popover-content 自定义次按钮 PopoverPlus 内容

# Events

事件名 说明 回调参数
on-button-click 点击单按钮时触发 -
on-primary-button-click 点击主按钮时触发（双按钮模式） -
on-secondary-button-click 点击次按钮时触发（双按钮模式） -
on-single-button-popover-close 单按钮 PopoverPlus 关闭时触发 -
on-single-button-popover-closed 单按钮 PopoverPlus 完全关闭后触发 -
on-single-button-popover-open 单按钮 PopoverPlus 打开时触发 -
on-single-button-popover-opened 单按钮 PopoverPlus 完全打开后触发 -
on-primary-button-popover-close 主按钮 PopoverPlus 关闭时触发 -
on-primary-button-popover-closed 主按钮 PopoverPlus 完全关闭后触发 -
on-primary-button-popover-open 主按钮 PopoverPlus 打开时触发 -
on-primary-button-popover-opened 主按钮 PopoverPlus 完全打开后触发 -
on-secondary-button-popover-close 次按钮 PopoverPlus 关闭时触发 -
on-secondary-button-popover-closed 次按钮 PopoverPlus 完全关闭后触发 -
on-secondary-button-popover-open 次按钮 PopoverPlus 打开时触发 -
on-secondary-button-popover-opened 次按钮 PopoverPlus 完全打开后触发 -

# 注意事项

# 使用建议

  1. 模式选择：比分模式适合双队对战，单队伍模式适合个人赛或团队展示
  2. 状态文本：可通过 status-text 自定义任意文本，不传则根据 status 自动计算
  3. 头像加载：建议为队伍/用户头像设置默认占位图，避免加载失败时显示空白
  4. 响应式适配：在小屏幕设备上，建议适当调整相关尺寸变量
  5. 状态颜色：不同状态会通过 PressMatchScheduleTitle 子组件自动应用对应的顶部装饰条和状态标签颜色
  6. 按钮配置：
    • 双按钮模式下，次按钮默认使用镂空效果（plain: true），符合设计规范
    • 使用 plain 属性可实现镂空按钮效果
    • 使用 size 属性控制按钮尺寸
    • 使用 type 属性设置按钮类型
    • 在小程序中使用 open-type 实现分享、获取用户信息等开放能力

# 性能优化

  • 头像图片建议使用 CDN 加速
  • 避免频繁切换 status 属性
  • 大量卡片展示时考虑虚拟滚动
  • 组件使用虚拟化节点减少DOM层级

# 兼容性

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

# 主题定制

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

注意：标题部分的样式由 PressMatchScheduleTitle 组件控制，请使用 --pmst-* 前缀的CSS变量进行定制。详见 PressMatchScheduleTitle 文档。

# 样式变量

# 定位系统 (Positioning)

名称 默认值 描述
--seg-card-position relative 卡片定位方式
--seg-single-avatar-position relative 单队伍头像定位方式
--seg-team-avatar-position relative 队伍头像定位方式

# 盒模型系统 (Box Model)

名称 默认值 描述
--seg-card-display flex 卡片显示方式
--seg-card-direction column 卡片排列方向
--seg-card-width 100% 卡片宽度
--seg-content-padding .4rem .52rem 内容区域内边距
--seg-team-section-width 100% 队伍区域宽度
--seg-team-avatar-size 1.44rem 队伍头像尺寸
--seg-team-avatar-overflow hidden 队伍头像溢出处理
--seg-team-avatar-img-width 100% 队伍头像图片宽度
--seg-team-avatar-img-height 100% 队伍头像图片高度
--seg-team-name-width 1.68rem 队伍名称宽度
--seg-team-item-gap $spacing-xs 队伍项间距
--seg-single-avatar-size 1.44rem 单队伍头像尺寸
--seg-single-avatar-overflow hidden 单队伍头像溢出处理
--seg-single-avatar-img-width 100% 单队伍头像图片宽度
--seg-single-avatar-img-height 100% 单队伍头像图片高度
--seg-single-name-width 2.4rem 单队伍名称宽度
--seg-single-section-gap $spacing-xs 单队伍区域间距
--seg-score-section-gap .16rem 比分区域间距
--seg-score-display-gap .26rem 比分显示间距
--seg-label-width 1.72rem 标签宽度
--seg-label-height .36rem 标签高度
--seg-label-margin-top $spacing-xs 标签上边距
--seg-stats-section-margin-top $spacing-sm 统计区域上边距
--seg-stats-section-gap .4rem 统计区域间距
--seg-stats-item-gap $spacing-xs 统计项内间距
--seg-double-buttons-gap $spacing-md 双按钮间距
--seg-double-buttons-padding 0 .28rem .32rem .28rem 双按钮区域内边距
--seg-action-button-width 100% 操作按钮宽度
--seg-action-button-height .8rem 操作按钮高度
--seg-action-button-margin 0 .54rem .32rem .54rem 操作按钮外边距
--seg-primary-button-flex 1 主按钮弹性值
--seg-secondary-button-flex 1 次按钮弹性值
--seg-popover-width auto PopoverPlus 宽度
--seg-popover-wrapper-flex 1 PopoverPlus 包装器弹性值
--seg-popover-wrapper-display flex PopoverPlus 包装器显示方式
--seg-popover-wrapper-align-items center PopoverPlus 包装器垂直对齐
--seg-popover-wrapper-justify-content center PopoverPlus 包装器水平对齐
--seg-popover-container-padding .04rem .08rem PopoverPlus 容器内边距

# 边框系统 (Border)

名称 默认值 描述
--seg-card-radius $border-radius-sm 卡片圆角
--seg-team-avatar-radius $border-radius-circle 队伍头像圆角
--seg-team-avatar-border-color $color-divider-light 队伍头像边框颜色
--seg-single-avatar-radius $border-radius-circle 单队伍头像圆角
--seg-single-avatar-border-color $color-divider-default 单队伍头像边框颜色
--seg-label-radius 0 标签圆角
--seg-action-button-radius $border-radius-999 操作按钮圆角
--seg-action-button-border-color transparent 单按钮边框颜色
--seg-primary-button-border-color transparent 主按钮边框颜色
--seg-secondary-button-border-width .01rem 次按钮边框宽度
--seg-secondary-button-border-style solid 次按钮边框样式
--seg-secondary-button-border-color $color-border-brand 次按钮边框颜色
--seg-popover-content-border-radius .04rem PopoverPlus 内容圆角

# 背景系统 (Background)

名称 默认值 描述
--seg-card-bg $color-surface-default 卡片背景色
--seg-label-bg $color-surface-secondary 标签背景色
--seg-action-button-bg $color-surface-brand 单按钮背景色
--seg-action-button-disabled-bg $color-surface-secondary 单按钮禁用背景色
--seg-primary-button-bg $color-surface-brand 主按钮背景色
--seg-secondary-button-bg transparent 次按钮背景色
--seg-popover-content-background-color $color-surface-dark PopoverPlus 内容背景色
--seg-popover-arrow-color $color-surface-dark PopoverPlus 箭头颜色
--seg-popover-arrow-border-top-color $color-surface-dark PopoverPlus 箭头边框颜色

# 文本系统 (Typography)

名称 默认值 描述
--seg-team-name-color $color-text-primary 队伍名称文字颜色
--seg-team-name-font-size $font-size-sm 队伍名称字体大小
--seg-team-name-font-weight $font-weight-bold 队伍名称字体粗细
--seg-team-name-text-align center 队伍名称文本对齐
--seg-score-number-color $color-text-primary 比分数字颜色
--seg-score-number-font-size .8rem 比分数字字体大小
--seg-score-number-font-family 'PingFang SC', sans-serif 比分数字字体族
--seg-score-number-font-weight $font-weight-bold 比分数字字体粗细
--seg-score-number-line-height 1 比分数字行高
--seg-score-separator-color $color-text-primary 比分分隔符颜色
--seg-score-separator-font-size .3rem 比分分隔符字体大小
--seg-score-separator-font-family 'PingFang SC', sans-serif 比分分隔符字体族
--seg-score-separator-font-weight $font-weight-bold 比分分隔符字体粗细
--seg-score-separator-line-height 1 比分分隔符行高
--seg-match-time-color $color-text-invert-default 比赛时间文字颜色
--seg-match-time-font-size $font-size-xs 比赛时间字体大小
--seg-match-time-font-weight $font-weight-regular 比赛时间字体粗细
--seg-match-time-text-align center 比赛时间文本对齐
--seg-label-color $color-text-secondary 标签文字颜色
--seg-label-font-size $font-size-xs 标签字体大小
--seg-label-font-weight $font-weight-regular 标签字体粗细
--seg-label-text-align center 标签文本对齐
--seg-single-name-color $color-text-primary 单队伍名称文字颜色
--seg-single-name-font-size $font-size-sm 单队伍名称字体大小
--seg-single-name-font-weight $font-weight-bold 单队伍名称字体粗细
--seg-single-name-text-align center 单队伍名称文本对齐
--seg-stats-label-color $color-text-invert-default 统计标签文字颜色
--seg-stats-label-font-size $font-size-xs 统计标签字体大小
--seg-stats-label-font-weight $font-weight-regular 统计标签字体粗细
--seg-stats-label-text-align center 统计标签文本对齐
--seg-stats-value-color $color-text-primary 统计数值文字颜色
--seg-stats-value-font-size $font-size-sm 统计数值字体大小
--seg-stats-value-font-weight $font-weight-bold 统计数值字体粗细
--seg-stats-value-text-align center 统计数值文本对齐
--seg-action-button-color $color-text-invert-light 单按钮文字颜色
--seg-action-button-font-size $font-size-lg 单按钮字体大小
--seg-action-button-font-weight $font-weight-bold 单按钮字体粗细
--seg-action-button-disabled-color $color-text-invert-default 单按钮禁用文字颜色
--seg-primary-button-color $color-text-invert-light 主按钮文字颜色
--seg-secondary-button-color $color-text-brand 次按钮文字颜色
--seg-popover-container-color $color-text-invert-light PopoverPlus 容器文字颜色
--seg-popover-container-font-size $font-size-xs PopoverPlus 容器字体大小
--seg-popover-container-font-weight $font-weight-regular PopoverPlus 容器字体粗细
--seg-popover-container-line-height 1.5 PopoverPlus 容器行高

# 其他 (Others)

名称 默认值 描述
--seg-team-avatar-img-object-fit cover 队伍头像图片适配方式
--seg-single-avatar-img-object-fit cover 单队伍头像图片适配方式
--seg-action-button-disabled-opacity 1 操作按钮禁用透明度

← MatchScheduleInGame →