Press Next

# MatchScheduleNotStart 比赛未开始

比赛未开始时的赛程组件，显示倒计时和按钮状态。支持智能倒计时、自定义按钮样式等功能。

# 特性

  • ⏰ 智能倒计时 - 基于 PressCountDown 组件，自动更新倒计时
  • 🎨 主题定制 - 丰富的CSS变量支持主题定制
  • 📱 响应式设计 - 适配不同屏幕尺寸
  • 🔧 插槽支持 - 支持自定义底部按钮内容
  • ⚡ 轻量高效 - 优化的代码结构，性能出色

# 适用场景

  • 电竞比赛开赛前倒计时
  • 活动开始前状态提示
  • 在线游戏比赛等待
  • 体育赛事开赛倒计时

# 引入

import PressMatchScheduleNotStart from 'press-next/press-match-schedule-not-start/press-match-schedule-not-start';

# 代码演示

# 基础用法

<template>
  <PressMatchScheduleNotStart
    :title="title"
    :end-time="endTime"
    :button-text="buttonText"
    :button-disabled="buttonDisabled"
    @on-button-click="handleButtonClick"
    @on-countdown-end="handleCountdownEnd"
  />
</template>

<script setup lang="ts">
import PressMatchScheduleNotStart from 'press-next/press-match-schedule-not-start/press-match-schedule-not-start';

const title = '比赛即将开始';
const buttonText = '待开赛';
const buttonDisabled = true;

// 设置倒计时结束时间：25天16小时18分后
const endTime = Date.now() + 25 * 24 * 60 * 60 * 1000 + 16 * 60 * 60 * 1000 + 18 * 60 * 1000;

const handleButtonClick = () => {
  console.log('按钮点击');
};

const handleCountdownEnd = () => {
  console.log('倒计时结束');
};
</script>

# 按钮类型

<template>
  <!-- 默认按钮 -->
  <PressMatchScheduleNotStart
    title="比赛即将开始"
    :end-time="endTime"
    button-type="default"
    button-text="待开赛"
  />

  <!-- 主要按钮 -->
  <PressMatchScheduleNotStart
    title="比赛即将开始"
    :end-time="endTime"
    button-type="primary"
    button-text="报名中"
    :button-disabled="false"
  />

  <!-- 朴素按钮 -->
  <PressMatchScheduleNotStart
    title="比赛即将开始"
    :end-time="endTime"
    button-type="primary"
    :button-plain="true"
    button-text="报名中"
    :button-disabled="false"
  />

  <!-- 不同尺寸 -->
  <PressMatchScheduleNotStart
    title="比赛即将开始"
    :end-time="endTime"
    button-size="large"
    button-text="报名中"
  />

  <PressMatchScheduleNotStart
    title="比赛即将开始"
    :end-time="endTime"
    button-size="small"
    button-text="报名中"
  />
</template>

# 自定义插槽

<template>
  <PressMatchScheduleNotStart
    :title="title"
    :end-time="endTime"
  >
    <template #footer>
      <div class="custom-footer">
        <button @click="handleCustomAction">自定义按钮</button>
      </div>
    </template>
  </PressMatchScheduleNotStart>
</template>

# 自定义主题

<template>
  <PressMatchScheduleNotStart
    custom-class="my-custom-theme"
    :title="title"
    :end-time="endTime"
  />
</template>

<style>
.my-custom-theme {
  /* 卡片样式 */
  --sns-card-bg: linear-gradient(227deg, #667eea 0%, #764ba2 100%);
  --sns-title-color: #ffffff;
  
  /* 按钮样式 */
  --sns-action-button-radius: .4rem;
  --sns-action-button-bg: #667eea;
}
</style>

注意：倒计时部分的样式由 PressMatchCountDownNormal 组件控制，请使用 --pmcdn-* 前缀的CSS变量进行定制。详见 PressMatchCountDownNormal 文档。

# API

# Props

参数 说明 类型 默认值
custom-class 自定义样式类 string ''
title 标题文字 string '比赛即将开始'
end-time 倒计时结束时间戳（毫秒） number Date.now() + 25天16小时18分
button-text 按钮文字 string '待开赛'
button-type 按钮类型 'primary' | 'default' | 'info' | 'warning' | 'danger' 'primary'
button-plain 是否为朴素按钮 boolean false
button-size 按钮尺寸 'normal' | 'large' | 'small' | 'mini' 'large'
button-open-type 微信开放能力 string ''
button-disabled 按钮是否禁用 boolean true
button-custom-style 自定义按钮样式 object {}

# Slots

名称 说明
footer 自定义底部按钮区域内容

# Events

事件名 说明 回调参数
on-button-click 点击按钮时触发 -
on-countdown-end 倒计时结束时触发 -

# 注意事项

# 使用建议

  1. 倒计时自动更新：组件基于 PressMatchCountDownNormal 子组件实现倒计时，会自动更新，无需手动管理定时器
  2. 倒计时样式定制：倒计时部分的样式由 PressMatchCountDownNormal 组件控制，使用 --pmcdn-* 前缀的CSS变量进行定制。详见 PressMatchCountDownNormal 文档
  3. 时间戳格式：end-time 接收毫秒级时间戳
  4. 按钮配置：支持多种按钮类型（primary、info、warning、danger）、尺寸（normal、large、small、mini）和朴素模式
  5. 微信开放能力：通过 button-open-type 属性可以使用微信小程序的开放能力（如分享、获取手机号等）
  6. 按钮状态：建议在倒计时结束前将按钮设置为禁用状态
  7. 响应式适配：在小屏幕设备上，建议适当调整相关尺寸变量

# 性能优化

  • 组件使用虚拟化节点减少DOM层级
  • 倒计时基于高性能的 PressMatchCountDownNormal 子组件
  • 样式使用CSS变量，便于动态主题切换
  • 支持自定义插槽，灵活扩展功能

# 兼容性

  • 支持 Vue 3.0+
  • 兼容现代浏览器（Chrome 60+, Firefox 60+, Safari 12+）
  • 支持微信小程序、支付宝小程序等平台

# 主题定制

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

注意：倒计时部分的样式由 PressMatchCountDownNormal 组件控制，请使用 --pmcdn-* 前缀的CSS变量进行定制。详见 PressMatchCountDownNormal 文档。

# 样式变量

# 间距系统 (Spacing)

名称 默认值 描述
--sns-header-padding 0.56rem 0 0 0 头部区域内边距
--sns-title-wrapper-padding 0 0.66rem 标题包装区域内边距
--sns-title-wrapper-gap 0.32rem 标题装饰元素间距
--sns-countdown-padding 0.32rem 1.04rem 0 1.04rem 倒计时区域内边距
--sns-countdown-gap 0 倒计时容器间距
--sns-action-button-margin 0.48rem 0.56rem 底部按钮边距

# 块状系统 (Box Model)

名称 默认值 描述
--sns-card-display flex 卡片显示方式
--sns-card-flex-direction column 卡片排列方向
--sns-card-width 100% 卡片宽度
--sns-card-height 4.48rem 卡片高度
--sns-bar-width 100% 样式条宽度
--sns-bar-height 0.08rem 样式条高度
--sns-title-wrapper-width 100% 标题包装区域宽度
--sns-title-wrapper-height 0.48rem 标题包装区域高度
--sns-title-decoration-flex 1 标题装饰元素弹性值
--sns-title-decoration-height 0.02rem 标题装饰线高度
--sns-action-button-width auto 底部按钮宽度
--sns-action-button-height 0.8rem 底部按钮高度

# 颜色系统 (Colors)

名称 默认值 描述
--sns-card-bg $color-surface-default 卡片背景色
--sns-bar-bg $color-surface-brand-light2 样式条背景色
--sns-title-color $color-text-primary 标题文字颜色
--sns-title-decoration-left-bg linear-gradient(to right, rgba(217, 227, 255, 0), rgba(217, 227, 255, 0.75)) 左侧装饰线背景渐变
--sns-title-decoration-right-bg linear-gradient(to left, rgba(217, 227, 255, 0), rgba(217, 227, 255, 0.75)) 右侧装饰线背景渐变
--sns-action-button-bg $color-surface-secondary 底部按钮背景色
--sns-action-button-color $color-text-invert-default 底部按钮文字颜色
--sns-action-button-border-color transparent 底部按钮边框颜色

# 字体系统 (Typography)

名称 默认值 描述
--sns-title-font-size $font-size-lg 标题字体大小
--sns-title-font-weight $font-weight-bold 标题字体粗细
--sns-title-line-height 1.5 标题行高
--sns-header-text-align center 头部文本对齐方式
--sns-action-button-font-size $font-size-lg 底部按钮字体大小
--sns-action-button-font-weight $font-weight-bold 底部按钮字体粗细

# 圆角系统 (Border Radius)

名称 默认值 描述
--sns-card-radius $border-radius-sm 卡片圆角
--sns-bar-border-top-left-radius $border-radius-sm 样式条左上圆角
--sns-bar-border-top-right-radius $border-radius-sm 样式条右上圆角
--sns-action-button-radius $border-radius-999 底部按钮圆角

# 其他属性 (Others)

名称 默认值 描述
--sns-card-position relative 卡片定位方式
--sns-bar-position relative 样式条定位方式
--sns-header-position relative 头部定位方式
--sns-countdown-position relative 倒计时定位方式
--sns-action-button-disabled-opacity 1 底部按钮禁用时的透明度

← MatchScheduleTitle →