MatchScheduleTitle 赛事日程标题

# MatchScheduleTitle 赛事日程标题

赛事结束状态的顶部标题组件，展示装饰条和状态标签。支持多种状态样式，包括冠亚季军、晋级、排名等。

# 特性

🏆 多状态支持 - 支持9种状态：冠军、亚军、季军、晋级等
🎨 主题定制 - 丰富的CSS变量支持主题定制
💬 自定义文案 - 支持自定义状态文案
🎯 精美样式 - 梯形clip-path裁剪，视觉效果出众
📱 响应式设计 - 适配不同屏幕尺寸
⚡ 轻量高效 - 纯CSS实现，性能出色

# 适用场景

电竞比赛结果展示
体育赛事排名展示
团队竞赛成绩公示
在线竞技状态标识

# 引入

import PressMatchScheduleTitle from 'press-next/press-match-schedule-title/press-match-schedule-title';

# 代码演示

# 基础用法

显示晋级状态的标题。

<template>
  <PressMatchScheduleTitle status="advance" />
</template>

<script setup lang="ts">
import PressMatchScheduleTitle from 'press-next/press-match-schedule-title/press-match-schedule-title';
</script>

# 冠亚季军状态

显示冠军、亚军、季军状态。

<template>
  <PressMatchScheduleTitle status="champion" />
  <PressMatchScheduleTitle status="runner-up" />
  <PressMatchScheduleTitle status="third-place" />
</template>

# 其他状态

显示止步、未晋级、排名等状态。

<template>
  <PressMatchScheduleTitle status="reached" />
  <PressMatchScheduleTitle status="not-advance" />
  <PressMatchScheduleTitle status="number-place" />
  <PressMatchScheduleTitle status="placed-finished" />
</template>

# 自定义文案

通过 status-text 属性自定义状态文案。

<template>
  <PressMatchScheduleTitle 
    status="advance" 
    status-text="自定义状态文案" 
  />
</template>

# 无状态

不显示状态标签，仅显示装饰条。

<template>
  <PressMatchScheduleTitle status="none" />
</template>

# 自定义主题

<template>
  <PressMatchScheduleTitle
    custom-class="my-custom-theme"
    status="champion"
  />
</template>

<style>
.my-custom-theme {
  --pst-bar-champion-bg: linear-gradient(90deg, #ffd700 0%, #ffed4e 100%);
  --pst-status-tag-champion-bg: linear-gradient(90deg, #ffd700 0%, #ffed4e 100%);
  --pst-status-tag-font-size: 0.32rem;
}
</style>

# API

# Props

参数	说明	类型	默认值
custom-class	自定义样式类	string	`''`
status	比赛状态	StatusType	`'advance'`
status-text	状态文本，可自定义传入	string	`''`

# StatusType 类型

type StatusType = 
  | 'champion'        // 冠军
  | 'runner-up'       // 亚军
  | 'third-place'     // 季军
  | 'reached'         // 止步xx强
  | 'advance'         // 晋级
  | 'not-advance'     // 未晋级
  | 'number-place'    // 第xx名
  | 'placed-finished' // 第xx-xx名
  | 'none';           // 无状态

# 状态说明

状态值	显示文案	装饰条颜色	标签颜色
champion	冠军	金色 (#ffdb4b)	金色 (#ffdb4b)
runner-up	亚军	银色 (#b1c0c8)	银色 (#b1c0c8)
third-place	季军	铜色 (#daa47b)	铜色 (#daa47b)
reached	止步xx强	紫色 (#e38ce9)	紫色 (#e38ce9)
advance	晋级	蓝色 (#d4e2ff)	蓝色 (#d4e2ff)
not-advance	未晋级	灰色 (#eaeff2)	灰色 (#eaeff2)
number-place	第xx名	灰色 (#eaeff2)	灰色 (#eaeff2)
placed-finished	第xx-xx名	灰色 (#eaeff2)	灰色 (#eaeff2)
none	-	浅蓝 (#d3d4fc)	不显示

# 注意事项

# 使用建议

状态文案：优先使用传入的 status-text，未传入时根据 status 自动计算
自定义样式：通过 custom-class 配合CSS变量实现主题定制
视觉层次：装饰条和状态标签颜色保持一致，增强视觉识别
梯形裁剪：状态标签使用 clip-path 实现梯形效果，提升视觉美感

# 性能优化

纯CSS实现，无JS运算开销
使用CSS变量，便于主题切换
支持通过 v-if 控制标签显示，减少DOM节点

# 兼容性

支持 Vue 3.0+
兼容现代浏览器（Chrome 60+, Firefox 60+, Safari 12+）
支持微信小程序、支付宝小程序等平台
clip-path 需要浏览器支持（IE不支持）

# 主题定制

# 样式变量

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

# 间距系统 (Spacing)

名称	默认值	描述
--pst-status-tag-margin-top	-0.02rem	状态标签上边距
--pst-status-tag-margin-left	auto	状态标签左边距
--pst-status-tag-margin-right	auto	状态标签右边距

# 块状系统 (Box Model)

名称	默认值	描述
--pst-card-width	100%	组件宽度
--pst-bar-width	100%	装饰条宽度
--pst-bar-height	0.08rem	装饰条高度
--pst-status-tag-width	2rem	状态标签宽度
--pst-status-tag-height	0.56rem	状态标签高度

# 颜色系统 (Colors)

名称	默认值	描述
--pst-status-tag-color	$color-text-primary	状态标签文字颜色
--pst-bar-none-bg	$color-surface-brand-light2	无状态装饰条背景色
--pst-bar-champion-bg	#ffdb4b	冠军装饰条背景色
--pst-bar-runner-up-bg	#b1c0c8	亚军装饰条背景色
--pst-bar-third-place-bg	#daa47b	季军装饰条背景色
--pst-bar-reached-bg	#e38ce9	止步装饰条背景色
--pst-bar-advance-bg	#d4e2ff	晋级装饰条背景色
--pst-bar-not-advance-bg	#eaeff2	未晋级装饰条背景色
--pst-bar-number-place-bg	#eaeff2	第xx名装饰条背景色
--pst-bar-placed-finished-bg	#eaeff2	第xx-xx名装饰条背景色
--pst-status-tag-champion-bg	#ffdb4b	冠军标签背景色
--pst-status-tag-runner-up-bg	#b1c0c8	亚军标签背景色
--pst-status-tag-third-place-bg	#daa47b	季军标签背景色
--pst-status-tag-reached-bg	#e38ce9	止步标签背景色
--pst-status-tag-advance-bg	#d4e2ff	晋级标签背景色
--pst-status-tag-not-advance-bg	#eaeff2	未晋级标签背景色
--pst-status-tag-number-place-bg	#eaeff2	第xx名标签背景色
--pst-status-tag-placed-finished-bg	#eaeff2	第xx-xx名标签背景色

# 字体系统 (Typography)

名称	默认值	描述
--pst-status-tag-font-size	$font-size-md	状态标签字体大小
--pst-status-tag-font-weight	$font-weight-bold	状态标签字体粗细

# 圆角系统 (Border Radius)

名称	默认值	描述
--pst-bar-border-top-left-radius	$border-radius-sm	装饰条左上圆角
--pst-bar-border-top-right-radius	$border-radius-sm	装饰条右上圆角
--pst-status-tag-radius	0	状态标签圆角

# 其他属性 (Others)

名称	默认值	描述
--pst-card-position	relative	组件定位方式
--pst-bar-position	relative	装饰条定位方式
--pst-status-tag-position	relative	状态标签定位方式
--pst-status-tag-clip-path	polygon(0 0, 100% 0, 85% 100%, 15% 100%)	状态标签裁剪路径（梯形效果）

← MatchScheduleNotStart MatchSetAwardPopup →