Press Next

# MatchScheduleInGame

A component for displaying match in-progress status, including team information, participants, and action buttons.

# Features

  • 🎮 Status Display - Clearly display match in-progress status information
  • 👥 Member Management - Display participant avatars with support for showing more member count
  • 🏷️ Group Identification - Support displaying team group information
  • 🎨 Custom Styles - Rich CSS variables for theme customization
  • 🔧 Slot Support - Support custom footer action buttons
  • ⚡ Lightweight & Efficient - Optimized code structure with excellent performance

# Use Cases

  • E-sports match in-progress status display
  • Team competition real-time status display
  • Online game battle status
  • Sports event in-progress display

# Import

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

# Code Demo

# Basic Usage

<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 = 'Match in progress, waiting for referee to enter scores';
const teamName = 'Shenzhen University';
const teamLogo = 'https://placehold.co/48x48/1E72FF/ffffff?text=LOGO';
const groupText = 'Group 5';
const members = [
  { id: 1, name: 'Member 1', avatar: 'https://placehold.co/40x40/4A90E2/ffffff?text=1' },
  { id: 2, name: 'Member 2', avatar: 'https://placehold.co/40x40/7ED321/ffffff?text=2' },
  { id: 3, name: 'Member 3', avatar: 'https://placehold.co/40x40/F5A623/ffffff?text=3' },
  { id: 4, name: 'Member 4', avatar: 'https://placehold.co/40x40/BD10E0/ffffff?text=4' },
  { id: 5, name: 'Member 5', avatar: 'https://placehold.co/40x40/B8E986/ffffff?text=5' },
  { id: 6, name: 'Member 6', avatar: 'https://placehold.co/40x40/50E3C2/ffffff?text=6' },
  { id: 7, name: 'Member 7', avatar: 'https://placehold.co/40x40/D0021B/ffffff?text=7' },
];
const buttonText = 'Join Match';

const handleButtonClick = () => {
  console.log('Action button clicked');
};
</script>

# Custom Member Display Count

<template>
  <PressMatchScheduleInGame
    title="Match in Progress"
    team-name="King Team"
    :team-logo="teamLogo"
    group-text="Group A"
    :members="members"
    :max-display-members="3"
    button-text="View Details"
    @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: 'Member 1', avatar: 'https://placehold.co/40x40' },
  { id: 2, name: 'Member 2', avatar: 'https://placehold.co/40x40' },
  { id: 3, name: 'Member 3', avatar: 'https://placehold.co/40x40' },
  { id: 4, name: 'Member 4', avatar: 'https://placehold.co/40x40' },
  { id: 5, name: 'Member 5', avatar: 'https://placehold.co/40x40' },
];

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

# Custom Button Style

<template>
  <PressMatchScheduleInGame
    title="Match in progress, waiting for referee"
    team-name="Shenzhen University"
    team-logo="https://placehold.co/48x48"
    group-text="Group 5"
    :members="members"
    button-text="Join Now"
    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: 'Member 1', avatar: 'https://placehold.co/40x40' },
  { id: 2, name: 'Member 2', avatar: 'https://placehold.co/40x40' },
];

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

const handleButtonClick = () => {
  console.log('Join now');
};
</script>

<template>
  <PressMatchScheduleInGame
    title="Match in progress, waiting for referee"
    team-name="Shenzhen University"
    team-logo="https://placehold.co/48x48"
    group-text="Group 5"
    :members="members"
  >
    <template #footer>
      <div class="custom-footer">
        <button class="custom-btn custom-btn--primary" @click="handleJoin">
          Join Match
        </button>
        <button class="custom-btn custom-btn--secondary" @click="handleWatch">
          Watch Live
        </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: 'Member 1', avatar: 'https://placehold.co/40x40' },
  { id: 2, name: 'Member 2', avatar: 'https://placehold.co/40x40' },
];

const handleJoin = () => {
  console.log('Join match');
};

const handleWatch = () => {
  console.log('Watch live');
};
</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

Attribute Description Type Default
custom-class Custom CSS class string ''
title Title text string 'Match in progress, waiting for referee'
team-name Team name string 'Shenzhen University'
team-logo Team logo string ''
group-text Group text string 'Group 5'
members Members list Member[] []
max-display-members Maximum display members number 5
button-text Button text string 'Join Match'
button-type Button type 'primary' | 'default' | 'info' | 'warning' | 'danger' 'primary'
button-plain Whether button is plain boolean false
button-size Button size 'normal' | 'large' | 'small' | 'mini' 'large'
button-open-type WeChat open capability string ''
button-custom-style Custom button style object {}

# Member Data Structure

interface Member {
  id: string | number; // Member ID
  name: string; // Member name
  avatar: string; // Member avatar URL
}

# Slots

Name Description
footer Custom footer content

# Events

Event Description Parameters
on-button-click Triggered when action button clicked -

# Notes

# Usage Recommendations

  1. Member Avatars: It is recommended to set default placeholder images for member avatars to avoid blank display when loading fails
  2. Member Count: max-display-members controls the number of members displayed, excess will be shown as "+N"
  3. Team Logo: It is recommended to use square images, the component will automatically handle circular display
  4. Button Style: You can customize button style through button-custom-style, or use slots to fully customize footer content
  5. Responsive Adaptation: On small screen devices, it's recommended to appropriately adjust size variables like --sig-member-avatar-size

# Performance Optimization

  • Component uses virtualized nodes to reduce DOM hierarchy
  • It is recommended to limit the value of max-display-members for large numbers of members
  • Avatar images are recommended to use CDN acceleration
  • Styles use CSS variables for easy dynamic theme switching
  • Support custom slots for flexible function extension

# 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.

# Style Variables

# Spacing System

Name Default Description
--sig-header-padding $spacing-lg 0 Header area padding
--sig-title-wrapper-padding 0 .3rem Title wrapper padding
--sig-title-wrapper-gap .16rem Title decoration gap
--sig-title-margin-top $spacing-md Title margin top
--sig-content-margin 0 $spacing-md Content area margin
--sig-team-info-padding $spacing-lg $spacing-md Team info padding
--sig-team-logo-wrapper-margin-top -1rem Team logo wrapper margin top
--sig-members-margin-top $spacing-md Members margin top
--sig-members-gap .12rem Member avatar gap
--sig-action-button-margin .22rem .56rem $spacing-xl .56rem Footer button margin

# Box Model System

Name Default Description
--sig-card-width 100% Card width
--sig-card-height 5.5rem Card height
--sig-bar-width 100% Bar width
--sig-bar-height .08rem Bar height
--sig-title-wrapper-width 100% Title wrapper width
--sig-title-wrapper-height .48rem Title wrapper height
--sig-title-decoration-flex 1 Title decoration flex
--sig-title-decoration-height .02rem Title decoration height
--sig-team-info-height 2.06rem Team info height
--sig-team-info-box-sizing border-box Team info box sizing
--sig-team-logo-wrapper-size 1.44rem Team logo wrapper size
--sig-team-logo-wrapper-overflow hidden Team logo wrapper overflow
--sig-team-logo-wrapper-box-sizing border-box Team logo wrapper box sizing
--sig-team-logo-bg-size 100% Team logo background size
--sig-team-logo-size 100% Team logo size
--sig-group-tag-width 100% Group tag width
--sig-group-tag-height .34rem Group tag height
--sig-member-avatar-size .8rem Member avatar size
--sig-member-img-size 100% Member image size
--sig-more-members-size .8rem More members size
--sig-action-button-width 100% Footer button width
--sig-action-button-height .8rem Footer button height

# Border Properties

Name Default Description
--sig-team-logo-wrapper-border-width 1px Team logo border width
--sig-team-logo-wrapper-border-style solid Team logo border style
--sig-team-logo-wrapper-border-color $color-divider-light Team logo border color
--sig-member-avatar-border-color $color-divider-default Member avatar border color
--sig-more-members-border-color $color-divider-default More members border color

# Color System

Name Default Description
--sig-card-bg $color-surface-default Card background
--sig-bar-bg $color-surface-brand-light2 Bar background
--sig-title-color #212124 Title text color
--sig-title-decoration-left-bg linear-gradient(to right, transparent, #d9e3ff) Left decoration background gradient
--sig-title-decoration-right-bg linear-gradient(to left, transparent, #d9e3ff) Right decoration background gradient
--sig-team-info-bg linear-gradient(360deg, #d7e2ff00 0, #d7e2ff 100%) Team info background gradient
--sig-team-name-color $color-text-secondary Team name text color
--sig-group-tag-bg $color-text-primary Group tag background
--sig-group-tag-color $color-surface-default Group tag text color
--sig-more-members-bg $color-surface-secondary More members background
--sig-more-text-color $color-text-invert-default More text color

# Typography System

Name Default Description
--sig-header-text-align center Header text align
--sig-title-font-size $font-size-lg Title font size
--sig-title-font-weight $font-weight-bold Title font weight
--sig-title-line-height 1.5 Title line height
--sig-team-name-align center Team name align
--sig-team-name-font-size $font-size-sm Team name font size
--sig-team-name-font-weight $font-weight-bold Team name font weight
--sig-team-name-line-height 1.5 Team name line height
--sig-group-tag-font-size $font-size-xs Group tag font size
--sig-group-tag-font-weight $font-weight-regular Group tag font weight
--sig-group-tag-line-height 1.5 Group tag line height
--sig-more-text-font-size $font-size-md More text font size
--sig-more-text-font-weight $font-weight-regular More text font weight
--sig-action-button-font-size $font-size-lg Footer button font size
--sig-action-button-font-weight $font-weight-bold Footer button font weight

# Border Radius System

Name Default Description
--sig-card-radius $border-radius-sm Card border radius
--sig-bar-border-top-left-radius $border-radius-sm Bar top left border radius
--sig-bar-border-top-right-radius $border-radius-sm Bar top right border radius
--sig-team-info-border-radius $border-radius-sm Team info border radius
--sig-team-logo-wrapper-border-radius $border-radius-circle Team logo wrapper border radius
--sig-team-logo-border-radius $border-radius-circle Team logo border radius
--sig-group-tag-radius .04rem Group tag border radius
--sig-member-avatar-radius $border-radius-circle Member avatar border radius
--sig-action-button-radius $border-radius-999 Footer button border radius

# Others

Name Default Description
--sig-card-position relative Card position
--sig-bar-position relative Bar position
--sig-content-position relative Content area position
--sig-team-logo-wrapper-position relative Team logo wrapper position
--sig-member-avatar-position relative Member avatar position
--sig-more-members-position relative More members position
--sig-group-tag-opacity .6 Group tag opacity
--sig-team-logo-object-fit cover Team logo object fit
--sig-member-img-object-fit cover Member image object fit

← MatchScheduleNotFull →