MatchCardInfo | Press Next

# MatchCardInfo

Match card info component that displays event information, reward list and action buttons. Supports signup, live and finished status.

# Import

import PressMatchCardInfo from 'press-next/press-match-card-info/press-match-card-info';

# Code Demo

# Basic Usage

Display a match card in signup status, including event information, tags, location and reward list.

<template>
  <PressMatchCardInfo
    status="signup"
    title="Official Channel·2025 Delta Force League"
    game-title="Delta Force"
    logo-url="https://avatars.githubusercontent.com/u/9064066?v=4"
    :tags="tags"
    location-name="Wangyu Internet Cafe Store 1 (Kexing Store)"
    distance="Nanshan District 888m"
    :rewards="rewards"
    deadline="September 14, 2025"
    @signup-click="handleSignupClick"
  />
</template>

<script setup lang="ts">
import PressMatchCardInfo from 'press-next/press-match-card-info/press-match-card-info';

const tags = [
  {
    type: 'match',
    name: 'Official',
    srcPic: 'https://image-1251917893.file.myqcloud.com/general-match-components/img/card-info/match-icon.png',
  },
  {
    type: 'title',
    name: 'Delta Force',
  },
  {
    type: 'quantity',
    name: '1000 registered',
  },
];

const rewards = [
  {
    type: 'internet',
    icon: 'https://image-1251917893.file.myqcloud.com/general-match-components/img/card-info/reward-icon1.svg',
    name: 'Internet fee 66 yuan',
    label: 'Internet',
  },
  {
    type: 'cash',
    icon: 'https://image-1251917893.file.myqcloud.com/general-match-components/img/card-info/reward-icon3.svg',
    name: 'Cash 100 yuan',
    label: 'Cash',
  },
];

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

# Live Status

Display ongoing matches with more control button and schedule management functionality.

<template>
  <PressMatchCardInfo
    status="live"
    title="Official Channel·2025 Delta Force League"
    game-title="Delta Force"
    logo-url="https://avatars.githubusercontent.com/u/9064066?v=4"
    :tags="tags"
    location-name="Wangyu Internet Cafe Store 1 (Kexing Store)"
    distance="Nanshan District 888m"
    deadline="September 14, 2025 14:00"
    :has-more-ctrls="true"
    @manage-click="handleManageClick"
    @ctrls-click="handleCtrlsClick"
  />
</template>

<script setup lang="ts">
import PressMatchCardInfo from 'press-next/press-match-card-info/press-match-card-info';

const tags = [
  { type: 'title', name: 'Delta Force' },
  { type: 'normal', name: 'Hotfire Zone' },
  { type: 'quantity', name: '1000 players' },
];

const handleManageClick = () => {
  console.log('Manage schedule');
};

const handleCtrlsClick = () => {
  console.log('Show more controls');
};
</script>

# Finished Status

Display finished matches with view details functionality.

<template>
  <PressMatchCardInfo
    status="finished"
    title="Official Channel·2025 Delta Force League"
    game-title="Delta Force"
    logo-url="https://avatars.githubusercontent.com/u/9064066?v=4"
    :tags="tags"
    location-name="Wangyu Internet Cafe Store 1 (Kexing Store)"
    distance="Nanshan District 888m"
    deadline="September 14, 2025"
    @detail-click="handleDetailClick"
  />
</template>

<script setup lang="ts">
import PressMatchCardInfo from 'press-next/press-match-card-info/press-match-card-info';

const tags = [
  { type: 'title', name: 'Delta Force' },
  { type: 'normal', name: 'Hotfire Zone' },
  { type: 'quantity', name: '1000 players' },
];

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

# Custom Status Text and Button

Support custom status label text and button text to meet different business scenarios.

<template>
  <PressMatchCardInfo
    status="live"
    status-text="In Progress"
    button-text="Watch Now"
    title="Official Channel·2025 Delta Force League"
    game-title="Delta Force"
    logo-url="https://avatars.githubusercontent.com/u/9064066?v=4"
    :tags="tags"
    location-name="Wangyu Internet Cafe Store 1 (Kexing Store)"
    distance="Nanshan District 888m"
    deadline="September 14, 2025 14:00"
    @manage-click="handleManageClick"
  />
</template>

<script setup lang="ts">
import PressMatchCardInfo from 'press-next/press-match-card-info/press-match-card-info';

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

# Disabled Button

Support disabling action button, suitable for scenarios such as full registration or activity suspension.

<template>
  <PressMatchCardInfo
    status="signup"
    :disabled="true"
    title="Official Channel·2025 Delta Force League"
    game-title="Delta Force"
    logo-url="https://avatars.githubusercontent.com/u/9064066?v=4"
    :tags="tags"
    location-name="Wangyu Internet Cafe Store 1 (Kexing Store)"
    distance="Nanshan District 888m"
    :rewards="rewards"
    deadline="September 14, 2025"
  />
</template>

Customize footer button content and style through slots.

<template>
  <PressMatchCardInfo
    status="signup"
    title="Official Channel·2025 Delta Force League"
    game-title="Delta Force"
    logo-url="https://avatars.githubusercontent.com/u/9064066?v=4"
    :tags="tags"
    location-name="Wangyu Internet Cafe Store 1 (Kexing Store)"
    distance="Nanshan District 888m"
    :rewards="rewards"
    deadline="September 14, 2025"
  >
    <template #foot-btn>
      <PressButton type="primary" size="small" @click="handleCustomClick">
        Custom Button
      </PressButton>
    </template>
  </PressMatchCardInfo>
</template>

<script setup lang="ts">
import PressMatchCardInfo from 'press-next/press-match-card-info/press-match-card-info';
import { PressButton } from 'press-ui';

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

# API

# Props

Prop	Description	Type	Default
custom-class	Custom class name	string	`''`
status	Match status: `signup`-signing up, `live`-ongoing, `finished`-ended	'signup' \| 'live' \| 'finished'	`'signup'`
title	Event title	string	`''`
game-title	Game title	string	`''`
logo-url	Event logo URL	string	`''`
tags	Tag list	TagItem[]	`[]`
location-name	Location name	string	`''`
distance	Distance info	string	`''`
rewards	Reward list	RewardItem[]	`[]`
deadline	Registration deadline or match time	string	`''`
status-text	Custom status text, higher priority than default status text	string	`''`
button-text	Custom button text, higher priority than default button text	string	`''`
disabled	Whether the button is disabled	boolean	`false`
has-more-ctrls	Whether to show more control button (only effective in live status)	boolean	`false`

# TagItem Type

Prop	Description	Type
type	Tag type	'title' \| 'match' \| 'quantity' \| 'normal'
name	Tag name	string
srcPic	Tag image URL (optional, only supported by match type)	string

# RewardItem Type

Prop	Description	Type
type	Reward type	'internet' \| 'item' \| 'cash' \| 'merchandise'
icon	IconPlus URL	string
name	Reward name	string
label	Reward label	string

# Events

Event	Description	Arguments
signup-click	Triggered when signup button clicked (status is signup)	-
manage-click	Triggered when manage button clicked (status is live)	-
detail-click	Triggered when detail button clicked (status is finished)	-
ctrls-click	Triggered when more control button clicked (has-more-ctrls is true)	-

# Slots

Slot	Description
foot-btn	Custom footer button content

# Theme Customization

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

# Style Variables

Name	Default Value	Description
--pmci-card-spacing-lr	`.2rem`	Card horizontal padding
--pmci-card-spacing-tb	`$spacing-lg`	Card vertical padding
--pmci-main-spacing-gap	`$spacing-md`	Main content area gap
--pmci-main-spacing-bottom	`$spacing-md`	Main content area bottom padding
--pmci-title-margin-bottom	`$spacing-sm`	Title bottom margin
--pmci-tag-spacing-gap	`$spacing-xs`	Tag gap
--pmci-tag-margin-bottom	`$spacing-sm`	Tag bottom margin
--pmci-tag-item-spacing-lr	`$spacing-sm`	Tag item horizontal padding
--pmci-location-spacing-gag	`$spacing-xs`	Location gap
--pmci-rewards-spacing-gap	`.2rem`	Reward gap
--pmci-status-offset-x	`0`	Status label x offset
--pmci-status-offset-y	`0`	Status label y offset
--pmci-rewards-spacing-tb	`$spacing-md`	Reward vertical spacing
--pmci-rewards-content-padding	`$spacing-sm`	Reward content padding
--pmci-rewards-item-gap	`$spacing-sm`	Reward item gap
--pmci-reward-info-padding-lr	`$spacing-xs`	Reward info horizontal padding
--pmci-rewards-info-gap	`$spacing-xs`	Reward info gap
--pmci-foot-info-text-ml	`$spacing-xs`	Footer info text left margin
--pmci-foot-ctrls-mr	`$spacing-lg`	Footer control button right margin
--pmci-tag-item-pic-mr	`$spacing-xs`	Tag item picture right margin
--pmci-tag-item-pic-ml	`-.16rem`	Tag item picture left margin
--pmci-tag-item-icon-mr	`.04rem`	Tag item icon right margin
--pmci-status-padding-lr	`$spacing-xs`	Status label horizontal padding
--pmci-game-size	`1.44rem`	Game area size
--pmci-logo-size	`1.04rem`	Game logo size
--pmci-reward-icon-size	`.24rem`	Reward icon size
--pmci-game-name-height	`.4rem`	Game name height
--pmci-tag-item-height	`.36rem`	Tag height
--pmci-reward-info-height	`.36rem`	Reward info height
--pmci-foot-ctrls-size	`.4rem`	Footer control button size
--pmci-foot-ctrls-icon-size	`.4rem`	Footer control button icon size
--pmci-tag-item-pic-size	`.36rem`	Tag picture size
--pmci-tag-item-icon-size	`.24rem`	Tag icon size
--pmci-tag-item-name-width	`1.2rem`	Tag item name width
--pmci-status-height	`.32rem`	Status label height
--pmci-card-bg-color	`#fff`	Card background color
--pmci-name-text-color	`$color-text-invert-light`	Game name text color
--pmci-status-live-bg-color	`$color-surface-positive`	Live status label background
--pmci-status-live-text-color	`$color-surface-positive-2`	Live status label text
--pmci-status-signup-bg-color	`$color-surface-brand-light2`	Signup status label background
--pmci-status-signup-text-color	`$color-text-brand`	Signup status label text
--pmci-status-finished-bg-color	`$color-surface-secondary`	Finished status label background
--pmci-status-finished-text-color	`$color-text-secondary`	Finished status label text
--pmci-title-text-color	`$color-text-primary`	Title color
--pmci-tag-bg-color	`rgba(155, 155, 155, .12)`	Tag background color
--pmci-tag-text-color	`#9b9b9b`	Tag text color
--pmci-location-name-text-color	`$color-text-invert-default`	Location name text color
--pmci-location-distance-text-color	`$color-text-primary`	Location distance text color
--pmci-foot-info-text-color	`$color-text-brand`	Footer info text color
--pmci-foot-label-text-color	`$color-text-secondary`	Footer label text color
--pmci-main-border-color	`$color-divider-light`	Main content area border color
--pmci-rewards-live-bg-color	`#f7f9fa`	Reward background color
--pmci-game-border-color	`$color-divider-light`	Game border color
--pmci-game-bg-color	`$color-surface-brand-light`	Game background color
--pmci-game-name-bg-color	`rgba(#000913, .6)`	Game name background color
--pmci-reward-name-text-color	`$color-text-secondary`	Reward name text color
--pmci-reward-info-text-color	`$color-text-brand`	Reward info text color
--pmci-reward-info-bg-color	`$color-surface-brand-light2`	Reward info background color
--pmci-tag-match-bg-color	`$color-surface-brand-light`	Tag match background color
--pmci-tag-match-text-color	`$color-text-brand`	Tag match text color
--pmci-status-font-size	`$font-size-xs`	Status label font size
--pmci-name-font-size	`$font-size-sm`	Game name font size
--pmci-title-font-size	`$font-size-md`	Title font size
--pmci-tag-font-size	`$font-size-xs`	Tag font size
--pmci-location-font-size	`$font-size-xs`	Location font size
--pmci-foot-info-font-size	`$font-size-sm`	Footer info font size
--pmci-reward-name-font-size	`$font-size-xs`	Reward name font size
--pmci-reward-info-font-size	`$font-size-xs`	Reward info font size
--pmci-tag-item-border-radius	`$border-radius-none`	Tag border radius

← MatchBindRolePopup MatchCertificationPopup →