Press Next

# MatchScheduleNotKickoff 集结完毕组件

比赛集结完毕状态的赛程组件，显示品牌Logo、队伍成员列表和开赛倒计时信息。支持自动倒计时、成员头像展示、自定义样式等功能。

# 特性

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

# 适用场景

  • 电竞比赛开赛前展示
  • 团队活动集结状态
  • 在线游戏组队准备
  • 体育赛事开始倒计时

# 引入

import PressMatchScheduleNotKickoff from 'press-next/press-match-schedule-not-kickoff/press-match-schedule-not-kickoff';

# 代码演示

# 基础用法

<template>
  <PressMatchScheduleNotKickoff
    :logo="logo"
    :title="title"
    :members="members"
    :end-time="endTime"
    @on-countdown-end="handleCountdownEnd"
  />
</template>

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

const logo = 'https://placehold.co/72x72/1E72FF/ffffff?text=LOGO';
const title = '集结完毕，比赛即将开始';
const members = [
  { id: 1, name: '成员1', avatar: 'https://placehold.co/40x40' },
  { id: 2, name: '成员2', avatar: 'https://placehold.co/40x40' },
  { id: 3, name: '成员3', avatar: 'https://placehold.co/40x40' },
  { id: 4, name: '成员4', avatar: 'https://placehold.co/40x40' },
  { id: 5, name: '成员5', avatar: 'https://placehold.co/40x40' },
];

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

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

# 自定义Logo插槽

<template>
  <PressMatchScheduleNotKickoff
    :title="title"
    :members="members"
    :end-time="endTime"
  >
    <template #logo>
      <div class="custom-logo">
        <img src="your-logo.png" alt="自定义Logo">
      </div>
    </template>
  </PressMatchScheduleNotKickoff>
</template>

# 自定义主题

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

<style>
.my-custom-theme {
  --snk-card-bg: linear-gradient(180deg, #fff 0%, #fff 33%, #f0f0f0 100%);
  --snk-title-color: #212124;
  --snk-countdown-label-color: #434c58;
}
</style>

# 多成员展示

<template>
  <PressMatchScheduleNotKickoff
    :logo="logo"
    :title="title"
    :members="members"
    :max-display-members="5"
    :end-time="endTime"
  />
</template>

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

// 24个成员，只显示前5个，其余显示+19
const members = Array.from({ length: 24 }, (_, i) => ({
  id: i + 1,
  name: `成员${i + 1}`,
  avatar: `https://placehold.co/40x40?text=${i + 1}`,
}));

const endTime = Date.now() + 25 * 24 * 60 * 60 * 1000;
</script>

# API

# Props

参数 说明 类型 默认值
custom-class 自定义样式类 string ''
logo 品牌Logo地址 string 'https://placehold.co/72x72'
logo-alt Logo的alt文本 string '品牌Logo'
title 标题文字 string '集结完毕，比赛即将开始'
members 成员列表 Member[] []
max-display-members 最大显示成员数 number 5
countdown-label 倒计时标签 string '开赛倒计时'
end-time 倒计时结束时间戳（毫秒） number Date.now() + 25天25小时25分

# Member 数据结构

interface Member {
  id: string | number; // 成员ID
  name: string; // 成员姓名
  avatar: string; // 头像URL
}

# Slots

名称 说明
logo 自定义品牌Logo内容

# Events

事件名 说明 回调参数
on-countdown-end 倒计时结束时触发 -

# 注意事项

# 使用建议

  1. 倒计时自动更新：组件基于 PressCountDown 实现，会自动更新倒计时，无需手动管理定时器
  2. 成员数量：超过 max-display-members 的成员会显示为 +数字
  3. 头像加载：建议为成员头像设置默认占位图，避免加载失败时显示空白
  4. 时间戳格式：end-time 接收毫秒级时间戳

# 性能优化

  • 使用 v-memo 指令优化成员列表渲染
  • 大量成员时考虑虚拟滚动
  • 头像图片建议使用 CDN 加速

# 兼容性

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

# 主题定制

# 样式变量

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

# 定位系统 (Positioning)

名称 默认值 描述
--snk-card-position relative 卡片定位方式
--snk-bar-position relative 顶部横条定位方式
--snk-logo-wrapper-position relative Logo容器定位方式
--snk-member-avatar-position relative 成员头像定位方式
--snk-more-members-position relative 更多成员指示器定位方式

# 盒模型系统 (Box Model)

名称 默认值 描述
--snk-card-width 100% 卡片宽度
--snk-card-height auto 卡片高度
--snk-card-padding 0 0 0.52rem 0 卡片内边距
--snk-bar-width 100% 顶部横条宽度
--snk-bar-height 0.08rem 顶部横条高度
--snk-logo-wrapper-size 1.44rem Logo容器尺寸
--snk-logo-wrapper-margin -0.8rem auto 0 Logo容器外边距
--snk-logo-wrapper-overflow hidden Logo容器溢出处理
--snk-logo-wrapper-box-sizing border-box Logo容器盒模型
--snk-logo-bg-size 100% Logo背景尺寸
--snk-logo-size 100% Logo图片尺寸
--snk-title-wrapper-width 100% 标题容器宽度
--snk-title-wrapper-height 0.48rem 标题容器高度
--snk-title-wrapper-margin-top $spacing-lg 标题容器上边距
--snk-title-wrapper-padding 0 0.3rem 标题容器内边距
--snk-title-wrapper-gap 0.16rem 标题元素间距
--snk-title-decoration-flex 1 标题装饰线弹性值
--snk-title-decoration-height 0.02rem 标题装饰线高度
--snk-member-avatar-size 0.8rem 成员头像尺寸
--snk-member-img-size 100% 成员图片尺寸
--snk-more-members-size 0.8rem 更多成员指示器尺寸
--snk-members-margin-top $spacing-xl 成员列表上边距
--snk-members-gap 0.12rem 成员头像间距
--snk-countdown-margin-top $spacing-xl 倒计时上边距
--snk-countdown-gap 0.08rem 倒计时元素间距

# 边框系统 (Border)

名称 默认值 描述
--snk-card-radius $border-radius-sm 卡片圆角
--snk-bar-border-top-left-radius $border-radius-sm 顶部横条左上圆角
--snk-bar-border-top-right-radius $border-radius-sm 顶部横条右上圆角
--snk-logo-wrapper-border-width 1px Logo容器边框宽度
--snk-logo-wrapper-border-style solid Logo容器边框样式
--snk-logo-wrapper-border-color $color-divider-light Logo容器边框颜色
--snk-logo-wrapper-border-radius $border-radius-circle Logo容器圆角
--snk-logo-border-radius $border-radius-circle Logo图片圆角
--snk-member-avatar-radius $border-radius-circle 成员头像圆角
--snk-member-avatar-border-color $color-divider-default 成员头像边框颜色
--snk-more-members-border-color $color-divider-default 更多成员指示器边框颜色

# 背景系统 (Background)

名称 默认值 描述
--snk-card-bg linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(215, 226, 255, 0.6) 100%) 卡片背景渐变（前33%白色，后67%渐变）
--snk-bar-bg $color-surface-brand-light2 顶部横条背景色
--snk-more-members-bg $color-surface-secondary 更多成员指示器背景色
--snk-title-decoration-left-bg linear-gradient(to right, transparent, #d9e3ff) 左侧装饰线背景
--snk-title-decoration-right-bg linear-gradient(to left, transparent, #d9e3ff) 右侧装饰线背景

# 文本系统 (Typography)

名称 默认值 描述
--snk-title-color #212124 标题文字颜色
--snk-title-font-size $font-size-lg 标题字体大小
--snk-title-font-weight $font-weight-bold 标题字体粗细
--snk-title-line-height 1.5 标题行高
--snk-more-text-color $color-text-invert-default 更多成员文字颜色
--snk-more-text-font-size $font-size-md 更多成员文字大小
--snk-more-text-font-weight $font-weight-regular 更多成员文字粗细
--snk-countdown-label-color $color-text-secondary 倒计时标签颜色
--snk-countdown-label-font-size $font-size-sm 倒计时标签字体大小
--snk-countdown-label-font-weight $font-weight-regular 倒计时标签字体粗细
--snk-countdown-label-line-height 1.5 倒计时标签行高

# 其他属性 (Others)

名称 默认值 描述
--snk-logo-object-fit cover Logo图片填充方式
--snk-member-img-object-fit cover 成员头像填充方式

← MatchScheduleNotStart →