Press Next

# MatchMessagesCommon AI 办赛通用面板组件

AI 办赛通用面板组件，用于展示标签-值对形式的信息列表，适用于比赛信息、用户信息等场景的展示。

# 引入

import PressMatchMessagesCommon from "press-next/press-match-messages-common/press-match-messages-common";

# 代码演示

# 基础用法

<template>
  <PressMatchMessagesCommon :items="items" />
</template>

<script setup lang="ts">
import PressMatchMessagesCommon from "press-next/press-match-messages-common/press-match-messages-common";
import type { CommonItem } from "press-next/press-match-messages-common/demo-data";

const items: CommonItem[] = [
  { label: "比赛名称", value: "王者荣耀春季赛" },
  { label: "比赛时间", value: "2024年3月15日 14:00" },
  { label: "比赛地点", value: "线上比赛" },
  { label: "参赛人数", value: "32人" },
  { label: "比赛格式", value: "BO3单淘汰" },
];
</script>

# API

# Props

参数 说明 类型 默认值
items 信息项列表 CommonItem[] []

# CommonItem 类型

属性 说明 类型
label 标签文本 string
value 值文本 string

# 主题定制

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

# 样式变量

名称 默认值 描述
--pmm-common-spacing-sm .16rem 小间距
--pmm-common-spacing-md .24rem 中等间距
--pmm-common-padding .24rem 内边距
--pmm-common-label-min-width 1.2rem 标签最小宽度
--pmm-common-label-color rgba(33, 33, 36, 0.6) 标签文字颜色
--pmm-common-content-color #212124 内容文字颜色
--pmm-common-font-size .24rem 字体大小
--pmm-common-label-font-weight 400 标签字体粗细
--pmm-common-content-font-weight 400 内容字体粗细
--pmm-common-line-height 1.5 行高
--pmm-common-radius .08rem 圆角

← MatchMessagesCtrls →