Press Next

# MatchScheduleEndGame

Match schedule card component for displaying match results after the game ends. Supports showing match results, team information, scores, status tags, etc. Provides two display modes: dual-team score mode and single-team/user mode.

# Features

  • πŸ† Multi-Status Support - Supports champion, runner-up, third place, advance and other match statuses
  • 🎯 Dual Display Modes - Supports dual-team score mode and single-team winner mode
  • 🎨 Theme Customization - Rich CSS variables for theme customization
  • πŸ“± Responsive Design - Adapt to different screen sizes
  • πŸ”§ Slot Support - Support custom title, content and buttons
  • ⚑ Lightweight & Efficient - Optimized code structure with excellent performance

# Use Cases

  • E-sports match result display
  • Sports event score cards
  • Game battle results
  • Tournament ranking display

# Import

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

# Code Demo

# Basic Usage - Score Mode

<template>
  <PressMatchScheduleEndGame
    match-type="score"
    status="champion"
    :left-team="leftTeam"
    :right-team="rightTeam"
    match-time="11-18 12:00 Ended"
    button-text="Share Match"
    @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: 'Sanhao Cup Pro Team',
  avatar: 'https://placehold.co/144x144',
  score: 3,
};

const rightTeam = {
  name: 'Meili Cup Pro Team',
  avatar: 'https://placehold.co/144x144',
  score: 1,
};

const handleShare = () => {
  console.log('Share match');
};
</script>

# Single Team Mode

<template>
  <PressMatchScheduleEndGame
    match-type="single"
    status="champion"
    :winner="winner"
    button-text="View Details"
    @on-button-click="handleViewDetail"
  />
</template>

<script setup lang="ts">
const winner = {
  name: 'User Nickname Max Ten Chars',
  avatar: 'https://placehold.co/144x144',
};

const handleViewDetail = () => {
  console.log('View details');
};
</script>

# Display Custom Label

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

<script setup lang="ts">
const leftTeam = {
  name: 'Team A Professional',
  avatar: 'https://placehold.co/144x144',
  score: 0,
};

const rightTeam = {
  name: 'Team B Professional',
  avatar: 'https://placehold.co/144x144',
  score: 0,
};
</script>

# Display User Statistics

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

<script setup lang="ts">
const winner = {
  name: 'User Nickname Max Ten Chars',
  avatar: 'https://placehold.co/144x144',
};

const statsItems = [
  { label: 'Completed', value: '1/10' },
  { label: 'Total Points', value: 1000 },
  { label: 'Total Rank', value: 20 },
];
</script>

# Double Button Mode

<template>
  <PressMatchScheduleEndGame
    match-type="single"
    status="champion"
    :winner="winner"
    :show-double-buttons="true"
    primary-button-text="View Data"
    secondary-button-text="Share Match"
    @on-primary-button-click="handleViewData"
    @on-secondary-button-click="handleShare"
  />
</template>

<script setup lang="ts">
const handleViewData = () => {
  console.log('View data');
};

const handleShare = () => {
  console.log('Share match');
};
</script>

# Custom Theme

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

<style>
.my-custom-theme {
  /* Card styles */
  --seg-card-bg: #f5f5f5;
  --seg-card-radius: .16rem;
  
  /* Score styles */
  --seg-score-number-color: #ff6b00;
  --seg-score-number-font-size: 1rem;
  
  /* Button styles */
  --seg-action-button-bg: #ff6b00;
  --seg-action-button-radius: .4rem;
  
  /* Title styles (controlled by PressMatchScheduleTitle component) */
  --pmst-status-bg-champion: linear-gradient(90deg, #ff6b00 0%, #ff9500 100%);
}
</style>

# API

# Props

Parameter Description Type Default
custom-class Custom style class string ''
match-type Match type 'score' | 'single' 'score'
status Match status Status 'advance'
status-text Status text (custom) string ''
left-team Left team information TeamInfo -
right-team Right team information TeamInfo -
score-separator Score separator string ':'
winner Winner information (single team mode) WinnerInfo -
match-time Match time string '11-18 12:00 Ended'
show-label Whether to show label boolean false
label-text Label text string 'Forfeit'
show-stats Whether to show statistics boolean false
stats-items Statistics data items list StatsItem[] []
show-double-buttons Whether to show double buttons boolean false
single-button-popover-default-show Single button PopoverPlus default show state boolean false
primary-button-popover-default-show Primary button PopoverPlus default show state boolean false
secondary-button-popover-default-show Secondary button PopoverPlus default show state boolean false
single-button-popover-text Single button PopoverPlus text string 'Wait for this round to end before starting next match'
single-button-popover-theme Single button PopoverPlus theme 'light' | 'dark' 'dark'
single-button-popover-placement Single button PopoverPlus placement PopoverPlacement 'top'
single-button-popover-offset Single button PopoverPlus offset number[] [0, 8]
single-button-popover-overlay Single button PopoverPlus whether to show overlay boolean false
single-button-popover-close-on-click-action Single button PopoverPlus close on click action boolean true
single-button-popover-close-on-click-outside Single button PopoverPlus close on click outside boolean true
single-button-popover-get-container Single button PopoverPlus get container string | () => HTMLElement ''
single-button-popover-z-index Single button PopoverPlus z-index number 9999
single-button-popover-duration Single button PopoverPlus duration (ms) number 200
single-button-popover-custom-style Single button PopoverPlus custom style string | Record<string, string> ''
button-text Button text string 'Share Match'
button-type Button type ButtonType 'primary'
button-plain Whether button is plain boolean false
button-size Button size ButtonSize 'large'
button-open-type Button open type string ''
button-disabled Whether button is disabled boolean false
button-custom-style Custom button style Record<string, string> {}
primary-button-text Primary button text string 'View Data'
primary-button-type Primary button type ButtonType 'primary'
primary-button-plain Whether primary button is plain boolean false
primary-button-size Primary button size ButtonSize 'normal'
primary-button-open-type Primary button open type string ''
primary-button-disabled Whether primary button is disabled boolean false
primary-button-custom-style Custom primary button style Record<string, string> {}
primary-button-popover-text Primary button PopoverPlus text string 'Wait for this round to end before starting next match'
primary-button-popover-theme Primary button PopoverPlus theme 'light' | 'dark' 'dark'
primary-button-popover-placement Primary button PopoverPlus placement PopoverPlacement 'top'
primary-button-popover-offset Primary button PopoverPlus offset number[] [0, 8]
primary-button-popover-overlay Primary button PopoverPlus whether to show overlay boolean false
primary-button-popover-close-on-click-action Primary button PopoverPlus close on click action boolean true
primary-button-popover-close-on-click-outside Primary button PopoverPlus close on click outside boolean true
primary-button-popover-get-container Primary button PopoverPlus get container string | () => HTMLElement ''
primary-button-popover-z-index Primary button PopoverPlus z-index number 9999
primary-button-popover-duration Primary button PopoverPlus duration (ms) number 200
primary-button-popover-custom-style Primary button PopoverPlus custom style string | Record<string, string> ''
secondary-button-text Secondary button text string 'Share Match'
secondary-button-type Secondary button type ButtonType 'default'
secondary-button-plain Whether secondary button is plain boolean true
secondary-button-size Secondary button size ButtonSize 'normal'
secondary-button-open-type Secondary button open type string ''
secondary-button-disabled Whether secondary button is disabled boolean false
secondary-button-custom-style Custom secondary button style Record<string, string> {}
secondary-button-popover-text Secondary button PopoverPlus text string 'Wait for this round to end before starting next match'
secondary-button-popover-theme Secondary button PopoverPlus theme 'light' | 'dark' 'dark'
secondary-button-popover-placement Secondary button PopoverPlus placement PopoverPlacement 'top'
secondary-button-popover-offset Secondary button PopoverPlus offset number[] [0, 8]
secondary-button-popover-overlay Secondary button PopoverPlus whether to show overlay boolean false
secondary-button-popover-close-on-click-action Secondary button PopoverPlus close on click action boolean true
secondary-button-popover-close-on-click-outside Secondary button PopoverPlus close on click outside boolean true
secondary-button-popover-get-container Secondary button PopoverPlus get container string | () => HTMLElement ''
secondary-button-popover-z-index Secondary button PopoverPlus z-index number 9999
secondary-button-popover-duration Secondary button PopoverPlus duration (ms) number 200
secondary-button-popover-custom-style Secondary button PopoverPlus custom style string | Record<string, string> ''

# ButtonType

type ButtonType =
  | 'primary'   // Primary button
  | 'default'   // Default button
  | 'info'      // Info button
  | 'warning'   // Warning button
  | 'danger';   // Danger button

# ButtonSize

type ButtonSize =
  | 'normal'    // Normal size
  | 'large'     // Large size
  | 'small'     // Small size
  | 'mini';     // Mini size

# PopoverPlacement

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

# Status Types

type Status =
  | 'champion'        // Champion
  | 'runner-up'       // Runner-up
  | 'third-place'     // Third place
  | 'reached'         // Reached top xx
  | 'advance'         // Advance
  | 'not-advance'     // Not advance
  | 'number-place'    // xx place
  | 'placed-finished' // xx-xx place
  | 'none';           // No status

# TeamInfo Data Structure

interface TeamInfo {
  name: string;      // Team name
  avatar: string;    // Team avatar URL
  score?: number;    // Team score
}

# WinnerInfo Data Structure

interface WinnerInfo {
  name: string;      // Winner name
  avatar: string;    // Winner avatar URL
}

# StatsItem Data Structure

interface StatsItem {
  label: string;           // Label text
  value: string | number;  // Value
}

# Slots

Name Description
title Custom title area content
content Custom match content area
footer Custom footer button area content (single button mode)
primary-btn Custom primary button (double button mode)
secondary-btn Custom secondary button (double button mode)
single-btn Custom single button (single button mode)
popover-content Custom single button PopoverPlus content
primary-popover-content Custom primary button PopoverPlus content
secondary-popover-content Custom secondary button PopoverPlus content

# Events

Event Description Parameters
on-button-click Triggered when button is clicked -
on-primary-button-click Triggered when primary button is clicked (double button mode) -
on-secondary-button-click Triggered when secondary button is clicked (double button mode) -
on-single-button-popover-close Triggered when single button PopoverPlus starts closing -
on-single-button-popover-closed Triggered when single button PopoverPlus is fully closed -
on-single-button-popover-open Triggered when single button PopoverPlus starts opening -
on-single-button-popover-opened Triggered when single button PopoverPlus is fully opened -
on-primary-button-popover-close Triggered when primary button PopoverPlus starts closing -
on-primary-button-popover-closed Triggered when primary button PopoverPlus is fully closed -
on-primary-button-popover-open Triggered when primary button PopoverPlus starts opening -
on-primary-button-popover-opened Triggered when primary button PopoverPlus is fully opened -
on-secondary-button-popover-close Triggered when secondary button PopoverPlus starts closing -
on-secondary-button-popover-closed Triggered when secondary button PopoverPlus is fully closed -
on-secondary-button-popover-open Triggered when secondary button PopoverPlus starts opening -
on-secondary-button-popover-opened Triggered when secondary button PopoverPlus is fully opened -

# Notes

# Usage Recommendations

  1. Mode Selection: Score mode is suitable for dual-team battles, single-team mode is suitable for individual matches or team displays
  2. Status Text: You can customize any text through status-text, if not passed, it will be automatically calculated based on status
  3. Avatar Loading: It is recommended to set default placeholder images for team/user avatars to avoid blank display when loading fails
  4. Responsive Adaptation: On small screen devices, it is recommended to appropriately adjust related size variables
  5. Status Colors: Different statuses will automatically apply corresponding top decoration bar and status tag colors through PressMatchScheduleTitle child component
  6. Button Configuration:
    • In double button mode, secondary button uses plain effect by default (plain: true), conforming to design specifications
    • Use plain property to achieve plain button effect
    • Use size property to control button size
    • Use type property to set button type
    • Use open-type in mini programs to implement sharing, getting user information and other capabilities

# Performance Optimization

  • Avatar images are recommended to use CDN acceleration
  • Avoid frequently switching status property
  • Consider virtual scrolling for large number of card displays
  • Component uses virtual host to reduce DOM layers

# Compatibility

  • Support Vue 3.0+
  • Compatible with modern browsers (Chrome 60+, Firefox 60+, Safari 12+)
  • Support WeChat Mini Program, Alipay Mini Program and other platforms

# Theme Customization

The component provides the following CSS variables for custom styling. Please refer to the ConfigProvider component for usage.

Note: The title section styles are controlled by the PressMatchScheduleTitle component. Please use the --pmst-* prefix CSS variables for customization. See PressMatchScheduleTitle documentation for details.

# Style Variables

# Positioning System (Positioning)

Name Default Description
--seg-card-position relative Card position
--seg-single-avatar-position relative Single avatar position
--seg-team-avatar-position relative Team avatar position

# Box Model System (Box Model)

Name Default Description
--seg-card-display flex Card display
--seg-card-direction column Card flex direction
--seg-card-width 100% Card width
--seg-content-padding .4rem .52rem Content area padding
--seg-team-section-width 100% Team section width
--seg-team-avatar-size 1.44rem Team avatar size
--seg-team-avatar-overflow hidden Team avatar overflow
--seg-team-avatar-img-width 100% Team avatar image width
--seg-team-avatar-img-height 100% Team avatar image height
--seg-team-name-width 1.68rem Team name width
--seg-team-item-gap $spacing-xs Team item gap
--seg-single-avatar-size 1.44rem Single avatar size
--seg-single-avatar-overflow hidden Single avatar overflow
--seg-single-avatar-img-width 100% Single avatar image width
--seg-single-avatar-img-height 100% Single avatar image height
--seg-single-name-width 2.4rem Single name width
--seg-single-section-gap $spacing-xs Single section gap
--seg-score-section-gap .16rem Score section gap
--seg-score-display-gap .26rem Score display gap
--seg-label-width 1.72rem Label width
--seg-label-height .36rem Label height
--seg-label-margin-top $spacing-xs Label top margin
--seg-stats-section-margin-top $spacing-sm Stats section top margin
--seg-stats-section-gap .4rem Stats section gap
--seg-stats-item-gap $spacing-xs Stats item gap
--seg-double-buttons-gap $spacing-md Double buttons gap
--seg-double-buttons-padding 0 .28rem .32rem .28rem Double buttons area padding
--seg-action-button-width 100% Action button width
--seg-action-button-height .8rem Action button height
--seg-action-button-margin 0 .54rem .32rem .54rem Action button margin
--seg-primary-button-flex 1 Primary button flex
--seg-secondary-button-flex 1 Secondary button flex
--seg-popover-width auto PopoverPlus width
--seg-popover-wrapper-flex 1 PopoverPlus wrapper flex
--seg-popover-wrapper-display flex PopoverPlus wrapper display
--seg-popover-wrapper-align-items center PopoverPlus wrapper align items
--seg-popover-wrapper-justify-content center PopoverPlus wrapper justify content
--seg-popover-container-padding .04rem .08rem PopoverPlus container padding

# Border System (Border)

Name Default Description
--seg-card-radius $border-radius-sm Card border radius
--seg-team-avatar-radius $border-radius-circle Team avatar border radius
--seg-team-avatar-border-color $color-divider-light Team avatar border color
--seg-single-avatar-radius $border-radius-circle Single avatar border radius
--seg-single-avatar-border-color $color-divider-default Single avatar border color
--seg-label-radius 0 Label border radius
--seg-action-button-radius $border-radius-999 Action button border radius
--seg-action-button-border-color transparent Single button border color
--seg-primary-button-border-color transparent Primary button border color
--seg-secondary-button-border-width .01rem Secondary button border width
--seg-secondary-button-border-style solid Secondary button border style
--seg-secondary-button-border-color $color-border-brand Secondary button border color
--seg-popover-content-border-radius .04rem PopoverPlus content border radius

# Background System (Background)

Name Default Description
--seg-card-bg $color-surface-default Card background
--seg-label-bg $color-surface-secondary Label background
--seg-action-button-bg $color-surface-brand Single button background
--seg-action-button-disabled-bg $color-surface-secondary Single button disabled background
--seg-primary-button-bg $color-surface-brand Primary button background
--seg-secondary-button-bg transparent Secondary button background
--seg-popover-content-background-color $color-surface-dark PopoverPlus content background color
--seg-popover-arrow-color $color-surface-dark PopoverPlus arrow color
--seg-popover-arrow-border-top-color $color-surface-dark PopoverPlus arrow border color

# Typography System (Typography)

Name Default Description
--seg-team-name-color $color-text-primary Team name text color
--seg-team-name-font-size $font-size-sm Team name font size
--seg-team-name-font-weight $font-weight-bold Team name font weight
--seg-team-name-text-align center Team name text align
--seg-score-number-color $color-text-primary Score number color
--seg-score-number-font-size .8rem Score number font size
--seg-score-number-font-family 'PingFang SC', sans-serif Score number font family
--seg-score-number-font-weight $font-weight-bold Score number font weight
--seg-score-number-line-height 1 Score number line height
--seg-score-separator-color $color-text-primary Score separator color
--seg-score-separator-font-size .3rem Score separator font size
--seg-score-separator-font-family 'PingFang SC', sans-serif Score separator font family
--seg-score-separator-font-weight $font-weight-bold Score separator font weight
--seg-score-separator-line-height 1 Score separator line height
--seg-match-time-color $color-text-invert-default Match time text color
--seg-match-time-font-size $font-size-xs Match time font size
--seg-match-time-font-weight $font-weight-regular Match time font weight
--seg-match-time-text-align center Match time text align
--seg-label-color $color-text-secondary Label text color
--seg-label-font-size $font-size-xs Label font size
--seg-label-font-weight $font-weight-regular Label font weight
--seg-label-text-align center Label text align
--seg-single-name-color $color-text-primary Single name text color
--seg-single-name-font-size $font-size-sm Single name font size
--seg-single-name-font-weight $font-weight-bold Single name font weight
--seg-single-name-text-align center Single name text align
--seg-stats-label-color $color-text-invert-default Stats label text color
--seg-stats-label-font-size $font-size-xs Stats label font size
--seg-stats-label-font-weight $font-weight-regular Stats label font weight
--seg-stats-label-text-align center Stats label text align
--seg-stats-value-color $color-text-primary Stats value text color
--seg-stats-value-font-size $font-size-sm Stats value font size
--seg-stats-value-font-weight $font-weight-bold Stats value font weight
--seg-stats-value-text-align center Stats value text align
--seg-action-button-color $color-text-invert-light Single button text color
--seg-action-button-font-size $font-size-lg Single button font size
--seg-action-button-font-weight $font-weight-bold Single button font weight
--seg-action-button-disabled-color $color-text-invert-default Single button disabled text color
--seg-primary-button-color $color-text-invert-light Primary button text color
--seg-secondary-button-color $color-text-brand Secondary button text color
--seg-popover-container-color $color-text-invert-light PopoverPlus container text color
--seg-popover-container-font-size $font-size-xs PopoverPlus container font size
--seg-popover-container-font-weight $font-weight-regular PopoverPlus container font weight
--seg-popover-container-line-height 1.5 PopoverPlus container line height

# Others (Others)

Name Default Description
--seg-team-avatar-img-object-fit cover Team avatar image object fit
--seg-single-avatar-img-object-fit cover Single avatar image object fit
--seg-action-button-disabled-opacity 1 Action button disabled opacity

← MatchScheduleInGame β†’