Press Next

# MatchMessagesSignin AI 办赛队伍签到组件

AI 办赛队伍签到组件，用于展示队伍签到状态，包括签到统计信息和各队伍的签到详情。

# 引入

import PressMatchMessagesSignin from "press-next/press-match-messages-signin/press-match-messages-signin";

# 代码演示

# 基础用法

<template>
  <PressMatchMessagesSignin :content="content" />
</template>

<script setup lang="ts">
import PressMatchMessagesSignin from "press-next/press-match-messages-signin/press-match-messages-signin";
import type { SigninContent } from "press-next/press-match-messages-signin/demo-data";

const content: SigninContent = {
  info: {
    min: 8,
    max: 16,
    text: '支队伍已签到',
  },
  items: [
    { id: 1, title: '王者荣耀战队', time: '14:30 签到', status: '已签到' },
    { id: 2, title: '英雄联盟战队', time: '14:25 签到', status: '已签到' },
    { id: 3, title: '和平精英战队', time: '14:20 签到', status: '已签到' },
  ],
};
</script>

# API

# Props

参数 说明 类型 默认值
content 签到内容 SigninContent -

# SigninContent 类型

属性 说明 类型
info 签到信息 SigninInfo
items 签到项目 SigninItem[]

# SigninInfo 类型

属性 说明 类型
min 已签到数量 number
max 总队伍数量 number
text 描述文本 string

# SigninItem 类型

属性 说明 类型
id 项目 ID string | number
title 队伍名称 string
time 签到时间 string
status 签到状态 string

# 主题定制

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

# 样式变量

名称 默认值 描述
--pmm-signin-spacing-sm .16rem 小间距
--pmm-signin-spacing-md .24rem 中等间距
--pmm-signin-padding .24rem 内边距
--pmm-signin-status-width 1.12rem 状态宽度
--pmm-signin-status-height .42rem 状态高度
--pmm-signin-bg #fff 组件背景
--pmm-signin-border-color rgba(211, 212, 252, 0.48) 边框颜色
--pmm-signin-text-color #212124 主文字颜色
--pmm-signin-sub-color rgba(33, 33, 36, 0.75) 次要文字颜色
--pmm-signin-purple-color #5300c3 紫色文字颜色
--pmm-signin-status-bg rgba(255, 191, 0, 0.3) 状态背景色
--pmm-signin-status-color #ed7b2f 状态文字颜色
--pmm-signin-font-size .24rem 字体大小
--pmm-signin-font-size-sm .2rem 小字体
--pmm-signin-line-height 1.5 行高
--pmm-signin-radius .08rem 圆角
--pmm-signin-border-width .02rem 边框宽度
--pmm-signin-clip-path-offset .07rem 裁剪路径偏移

← MatchMessagesTemplate →