Press Next

# MatchCardInfo 赛事卡片

赛事卡片信息组件，展示赛事基本信息、奖励列表和操作按钮。支持报名中、比赛中和已结束三种状态。

# 引入

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

# 代码演示

# 基础用法

展示报名中状态的赛事卡片，包含赛事基本信息、标签、地点和奖励列表。

<template>
  <PressMatchCardInfo
    status="signup"
    title="官方通道·2025年三角洲行动联赛"
    game-title="三角洲行动"
    logo-url="https://avatars.githubusercontent.com/u/9064066?v=4"
    :tags="tags"
    location-name="网鱼网咖1号店（科兴店）"
    distance="南山区 888m"
    :rewards="rewards"
    deadline="2025年9月14日"
    @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: '官方赛',
    srcPic: 'https://image-1251917893.file.myqcloud.com/general-match-components/img/card-info/match-icon.png',
  },
  {
    type: 'title',
    name: '三角洲行动',
  },
  {
    type: 'quantity',
    name: '1000人已报名',
  },
];

const rewards = [
  {
    type: 'internet',
    icon: 'https://image-1251917893.file.myqcloud.com/general-match-components/img/card-info/reward-icon1.svg',
    name: '网费66元',
    label: '网费',
  },
  {
    type: 'cash',
    icon: 'https://image-1251917893.file.myqcloud.com/general-match-components/img/card-info/reward-icon3.svg',
    name: '现金100元',
    label: '金额',
  },
];

const handleSignupClick = () => {
  console.log('点击报名按钮');
};
</script>

# 比赛中状态

展示正在进行中的赛事，显示更多操作按钮和赛程管理功能。

<template>
  <PressMatchCardInfo
    status="live"
    title="官方通道·2025年三角洲行动联赛"
    game-title="三角洲行动"
    logo-url="https://avatars.githubusercontent.com/u/9064066?v=4"
    :tags="tags"
    location-name="网鱼网咖1号店（科兴店）"
    distance="南山区 888m"
    deadline="2025年9月14日 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: '三角洲行动' },
  { type: 'normal', name: '烽火地带' },
  { type: 'quantity', name: '1000人' },
];

const handleManageClick = () => {
  console.log('赛程管理');
};

const handleCtrlsClick = () => {
  console.log('点击更多操作');
};
</script>

# 已结束状态

展示已结束的赛事，支持查看详情操作。

<template>
  <PressMatchCardInfo
    status="finished"
    title="官方通道·2025年三角洲行动联赛"
    game-title="三角洲行动"
    logo-url="https://avatars.githubusercontent.com/u/9064066?v=4"
    :tags="tags"
    location-name="网鱼网咖1号店（科兴店）"
    distance="南山区 888m"
    deadline="2025年9月14日"
    @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: '三角洲行动' },
  { type: 'normal', name: '烽火地带' },
  { type: 'quantity', name: '1000人' },
];

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

# 自定义状态文本和按钮

支持自定义状态标签文本和按钮文本，以满足不同业务场景需求。

<template>
  <PressMatchCardInfo
    status="live"
    status-text="火热进行中"
    button-text="立即观战"
    title="官方通道·2025年三角洲行动联赛"
    game-title="三角洲行动"
    logo-url="https://avatars.githubusercontent.com/u/9064066?v=4"
    :tags="tags"
    location-name="网鱼网咖1号店（科兴店）"
    distance="南山区 888m"
    deadline="2025年9月14日 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('立即观战');
};
</script>

# 禁用按钮

支持禁用操作按钮，适用于报名已满、活动暂停等场景。

<template>
  <PressMatchCardInfo
    status="signup"
    :disabled="true"
    title="官方通道·2025年三角洲行动联赛"
    game-title="三角洲行动"
    logo-url="https://avatars.githubusercontent.com/u/9064066?v=4"
    :tags="tags"
    location-name="网鱼网咖1号店（科兴店）"
    distance="南山区 888m"
    :rewards="rewards"
    deadline="2025年9月14日"
  />
</template>

# 自定义底部按钮

通过插槽自定义底部按钮内容和样式。

<template>
  <PressMatchCardInfo
    status="signup"
    title="官方通道·2025年三角洲行动联赛"
    game-title="三角洲行动"
    logo-url="https://avatars.githubusercontent.com/u/9064066?v=4"
    :tags="tags"
    location-name="网鱼网咖1号店（科兴店）"
    distance="南山区 888m"
    :rewards="rewards"
    deadline="2025年9月14日"
  >
    <template #foot-btn>
      <PressButton type="primary" size="small" @click="handleCustomClick">
        自定义按钮
      </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('自定义按钮点击');
};
</script>

# API

# Props

参数 说明 类型 默认值
custom-class 自定义类名 string ''
status 比赛状态：signup-报名中，live-比赛中，finished-已结束 'signup' | 'live' | 'finished' 'signup'
title 赛事标题 string ''
game-title 游戏标题 string ''
logo-url 赛事LOGO地址 string ''
tags 标签列表 TagItem[] []
location-name 地点名称 string ''
distance 距离信息 string ''
rewards 奖励列表 RewardItem[] []
deadline 报名截止时间或比赛时间 string ''
status-text 自定义状态文本，优先级高于默认状态文本 string ''
button-text 自定义按钮文本，优先级高于默认按钮文本 string ''
disabled 按钮是否禁用 boolean false
has-more-ctrls 是否显示更多操作按钮（仅在 live 状态下生效） boolean false

# TagItem 类型

参数 说明 类型
type 标签类型 'title' | 'match' | 'quantity' | 'normal'
name 标签名称 string
srcPic 标签图片地址（可选，仅 match 类型支持） string

# RewardItem 类型

参数 说明 类型
type 奖励类型 'internet' | 'item' | 'cash' | 'merchandise'
icon 图标地址 string
name 奖励名称 string
label 奖励标签 string

# Events

事件名 说明 参数
signup-click 点击报名按钮时触发（status 为 signup 时） -
manage-click 点击赛程管理按钮时触发（status 为 live 时） -
detail-click 点击查看详情按钮时触发（status 为 finished 时） -
ctrls-click 点击更多操作按钮时触发（has-more-ctrls 为 true 时） -

# Slots

插槽名 说明
foot-btn 自定义底部按钮内容

# 主题定制

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

# 样式变量

名称 默认值 描述
--pmci-card-spacing-lr .2rem 卡片左右内边距
--pmci-card-spacing-tb $spacing-lg 卡片上下内边距
--pmci-main-spacing-gap $spacing-md 主内容区域间距
--pmci-main-spacing-bottom $spacing-md 主内容区域底部内边距
--pmci-title-margin-bottom $spacing-sm 标题底部间距
--pmci-tag-spacing-gap $spacing-xs 标签间距
--pmci-tag-margin-bottom $spacing-sm 标签底部间距
--pmci-tag-item-spacing-lr $spacing-sm 标签内左右间距
--pmci-location-spacing-gag $spacing-xs 地理位置间距
--pmci-rewards-spacing-gap .2rem 奖励间距
--pmci-status-offset-x 0 状态标签x偏移量
--pmci-status-offset-y 0 状态标签y偏移量
--pmci-rewards-spacing-tb $spacing-md 奖励上下间距
--pmci-rewards-content-padding $spacing-sm 奖励内容内边距
--pmci-rewards-item-gap $spacing-sm 奖励项目间距
--pmci-reward-info-padding-lr $spacing-xs 奖励信息左右内边距
--pmci-rewards-info-gap $spacing-xs 奖励信息间距
--pmci-foot-info-text-ml $spacing-xs 底部信息文字左边距
--pmci-foot-ctrls-mr $spacing-lg 底部控制按钮右边距
--pmci-tag-item-pic-mr $spacing-xs 标签项目图片右边距
--pmci-tag-item-pic-ml -.16rem 标签项目图片左边距
--pmci-tag-item-icon-mr .04rem 标签项目图标右边距
--pmci-status-padding-lr $spacing-xs 状态标签左右内边距
--pmci-game-size 1.44rem 游戏区域尺寸
--pmci-logo-size 1.04rem 游戏LOGO尺寸
--pmci-reward-icon-size .24rem 奖励图标尺寸
--pmci-game-name-height .4rem 游戏名称高度
--pmci-tag-item-height .36rem 标签高度
--pmci-reward-info-height .36rem 奖励信息高度
--pmci-foot-ctrls-size .4rem 底部操作更多按钮尺寸
--pmci-foot-ctrls-icon-size .4rem 底部操作更多按钮图标尺寸
--pmci-tag-item-pic-size .36rem 标签图片尺寸
--pmci-tag-item-icon-size .24rem 标签图标尺寸
--pmci-tag-item-name-width 1.2rem 标签项目名称宽度
--pmci-status-height .32rem 状态标签高度
--pmci-card-bg-color #fff 卡片背景色
--pmci-name-text-color $color-text-invert-light 游戏名称文字颜色
--pmci-status-live-bg-color $color-surface-positive 比赛中状态标签背景
--pmci-status-live-text-color $color-surface-positive-2 比赛中状态标签文字
--pmci-status-signup-bg-color $color-surface-brand-light2 报名中状态标签背景
--pmci-status-signup-text-color $color-text-brand 报名中状态标签文字
--pmci-status-finished-bg-color $color-surface-secondary 已结束状态标签背景
--pmci-status-finished-text-color $color-text-secondary 已结束状态标签文字
--pmci-title-text-color $color-text-primary 标题颜色
--pmci-tag-bg-color rgba(155, 155, 155, .12) 标签背景色
--pmci-tag-text-color #9b9b9b 标签文字颜色
--pmci-location-name-text-color $color-text-invert-default 地理位置名称文字颜色
--pmci-location-distance-text-color $color-text-primary 地理位置距离文字颜色
--pmci-foot-info-text-color $color-text-brand 底部信息文字颜色
--pmci-foot-label-text-color $color-text-secondary 底部标签文字颜色
--pmci-main-border-color $color-divider-light 主内容区域边框颜色
--pmci-rewards-live-bg-color #f7f9fa 奖励背景色
--pmci-game-border-color $color-divider-light 游戏边框颜色
--pmci-game-bg-color $color-surface-brand-light 游戏背景色
--pmci-game-name-bg-color rgba(#000913, .6) 游戏名称背景色
--pmci-reward-name-text-color $color-text-secondary 奖励名称文字颜色
--pmci-reward-info-text-color $color-text-brand 奖励信息文字颜色
--pmci-reward-info-bg-color $color-surface-brand-light2 奖励信息背景色
--pmci-tag-match-bg-color $color-surface-brand-light 标签匹配背景色
--pmci-tag-match-text-color $color-text-brand 标签匹配文字颜色
--pmci-status-font-size $font-size-xs 状态标签字体大小
--pmci-name-font-size $font-size-sm 游戏名称字体大小
--pmci-title-font-size $font-size-md 标题字体大小
--pmci-tag-font-size $font-size-xs 标签字体大小
--pmci-location-font-size $font-size-xs 地理位置字体大小
--pmci-foot-info-font-size $font-size-sm 底部信息字体大小
--pmci-reward-name-font-size $font-size-xs 奖励名称字体大小
--pmci-reward-info-font-size $font-size-xs 奖励信息字体大小
--pmci-tag-item-border-radius $border-radius-none 标签圆角

← MatchCertificationPopup →