MatchConfirm 待资格确认 | Press Next

# MatchConfirm 待资格确认

用于展示比赛即将开始时的待资格确认状态卡片。

# 引入

import PressMatchConfirm from 'press-next/press-match-confirm/press-match-confirm';

# 代码演示

# 基础用法

<PressMatchConfirm />

# 自定义内容

<PressMatchConfirm
  title-text="比赛即将开始"
  desc-text="请等待管理员核对报名玩家的参赛资格"
  btn-text="待管理员确认资格"
/>

# 带状态标签

<PressMatchConfirm
  schedule-status="advance"
  schedule-status-text="晋级"
/>

# API

# Props

参数	说明	类型	默认值
custom-class	自定义样式类	string	-
title-text	标题文字	string	`比赛即将开始`
desc-text	描述文字	string	`请等待管理员核对报名玩家的参赛资格`
btn-text	按钮文字	string	`待管理员确认资格`
btn-disabled	按钮禁用状态	boolean	`true`
schedule-status	顶部装饰条状态	string	`none`
schedule-status-text	顶部装饰条状态文字	string	-

# schedule-status 可选值

值	说明
default	默认状态
champion	冠军
runner-up	亚军
third-place	季军
reached	止步xx强
advance	晋级
not-advance	未晋级
number-place	第xx名
placed-finished	第xx-xx名
none	无状态

# Slots

名称	说明
btn	自定义按钮区域

# 主题定制

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

# 样式变量

名称	默认值	描述
--pmc-content-padding	$spacing-xl	内容区域内边距
--pmc-title-gap	$spacing-sm	标题区元素间距
--pmc-desc-mt	$spacing-md	描述区域上外边距
--pmc-desc-mb	$spacing-lg	描述区域下外边距
--pmc-desc-gap	$spacing-sm	描述区域元素间距
--pmc-btn-mt	$spacing-xxl	按钮上外边距
--pmc-card-width	100%	卡片宽度
--pmc-title-decor-width	1.76rem	标题装饰线宽度 (88px)
--pmc-title-decor-height	.02rem	标题装饰线高度 (1px)
--pmc-clock-icon-size	1.12rem	时钟图标尺寸 (56px)
--pmc-card-bg	$color-surface-default	卡片背景色
--pmc-title-color	$color-text-primary	标题文字颜色
--pmc-title-line-start	rgba(217, 227, 255, .75)	装饰线起始色
--pmc-title-line-end	rgba(217, 227, 255, 0)	装饰线结束色
--pmc-desc-color	$color-text-secondary	描述文字颜色
--pmc-clock-icon-color	$color-icon-brand	时钟图标颜色
--pmc-title-font-size	$font-size-lg	标题字体大小
--pmc-title-font-weight	$font-weight-bold	标题字重
--pmc-title-line-height	.48rem	标题行高
--pmc-desc-font-size	$font-size-sm	描述字体大小
--pmc-desc-font-weight	$font-weight-bold	描述字重
--pmc-desc-line-height	.36rem	描述行高
--pmc-card-border-radius	$border-radius-sm	卡片圆角

注：按钮样式通过 PressButton 组件的 CSS 变量进行定制。

← MatchChangeScorePopup MatchCountDownMini →