MatchEventsItem 赛事头图组件

# MatchEventsItem 赛事头图组件

用于展示赛事信息的卡片组件，包含游戏信息、赛事标题、地址信息和时间标签等内容。

# 引入

import PressMatchEventsItem from 'press-next/press-match-events-item/press-match-events-item.vue';

# 代码演示

# 基础用法

<template>
  <PressMatchEventsItem 
    :game-name="gameName"
    :game-icon="gameIcon"
    :header-title="headerTitle"
    :header-bg-image="headerBgImage"
    :event-title="eventTitle"
    :address="address"
    :labels="labels"
    @view-map="handleViewMap"
    @view-detail="handleViewDetail"
  />
</template>

<script setup>
const gameName = '英雄联盟';
const gameIcon = 'https://example.com/lol-icon.png';
const headerTitle = '全英雄+精选皮肤';
const headerBgImage = 'https://example.com/bg.jpg';
const eventTitle = '无畏契约xx杯赛事';
const address = '大白兔网吧xxx街道xxx号';

const labels = [
  { id: 1, text: '4月14日 24:00报名截止' },
  { id: 2, text: '4月16日 24:00正式开赛' },
];

const handleViewMap = () => {
  console.log('查看地图');
};

const handleViewDetail = () => {
  console.log('查看详情');
};
</script>

# 自定义样式

<template>
  <PressMatchEventsItem 
    :game-name="gameName"
    :game-icon="gameIcon"
    :header-title="headerTitle"
    :header-bg-image="headerBgImage"
    :event-title="eventTitle"
    :address="address"
    :labels="labels"
    custom-class="custom-events-item"
    @view-map="handleViewMap"
    @view-detail="handleViewDetail"
  />
</template>

<style lang="scss">
.custom-events-item {
  --mei-card-height: 6rem;
  --mei-head-title-color: #ff6b00;
  --mei-foot-title-color: #333;
  --mei-card-border-radius: .24rem;
}
</style>

# 完整示例

<template>
  <div class="events-list">
    <PressMatchEventsItem 
      v-for="event in eventList"
      :key="event.id"
      :game-name="event.gameName"
      :game-icon="event.gameIcon"
      :header-title="event.headerTitle"
      :header-bg-image="event.headerBgImage"
      :event-title="event.eventTitle"
      :address="event.address"
      :labels="event.labels"
      @view-map="handleViewMap(event.id)"
      @view-detail="handleViewDetail(event.id)"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const eventList = ref([
  {
    id: 1,
    gameName: '英雄联盟',
    gameIcon: 'https://example.com/lol-icon.png',
    headerTitle: '全英雄+精选皮肤',
    headerBgImage: 'https://example.com/lol-bg.jpg',
    eventTitle: '英雄联盟城市争霸赛',
    address: '网鱼网咖科兴店',
    labels: [
      { id: 1, text: '4月14日 24:00报名截止' },
      { id: 2, text: '4月16日 24:00正式开赛' },
    ],
  },
  {
    id: 2,
    gameName: '王者荣耀',
    gameIcon: 'https://example.com/wzry-icon.png',
    headerTitle: '全英雄+全皮肤',
    headerBgImage: 'https://example.com/wzry-bg.jpg',
    eventTitle: '王者荣耀高校联赛',
    address: '杰拉网咖南山店',
    labels: [
      { id: 1, text: '5月1日 18:00报名截止' },
      { id: 2, text: '5月3日 14:00正式开赛' },
    ],
  },
]);

const handleViewMap = (eventId) => {
  console.log('查看地图:', eventId);
};

const handleViewDetail = (eventId) => {
  console.log('查看详情:', eventId);
};
</script>

<style lang="scss">
.events-list {
  display: flex;
  flex-direction: column;
  gap: .32rem;
  padding: .32rem;
}
</style>

# API

# Props

参数	说明	类型	默认值
game-name	游戏名称	string	`''`
game-icon	游戏图标地址	string	`''`
game-logo-text	游戏Logo文字水印	string	`''`
header-title	头部标题	string	`'全英雄+'`
header-bg-image	头部背景图片地址	string	`''`
event-title	赛事标题	string	`''`
address	地址信息	string	`''`
labels	标签列表	LabelItem[]	`[]`
custom-class	自定义外部样式类名	string	`''`

# LabelItem 数据结构

参数	说明	类型
id	标签ID	string \| number
text	标签文本	string

# Events

事件名	说明	参数
view-map	点击查看地图时触发	-
view-detail	点击查看详情时触发	-

# 样式变量

组件提供了下列 CSS 变量，可用于自定义样式。

名称	默认值	描述
--mei-head-pt	`.36rem`	头部内容上内边距
--mei-foot-padding-tb	`$spacing-md`	底部内容上下内边距
--mei-foot-padding-lr	`$spacing-lg`	底部内容左右内边距
--mei-game-gap	`$spacing-sm`	游戏信息间距
--mei-game-mb	`$spacing-md`	游戏信息下边距
--mei-labels-gap	`$spacing-sm`	标签间距
--mei-labels-spacing	`$spacing-md`	标签上下间距
--mei-labels-pr	`$spacing-sm`	标签左右内边距
--mei-address-link-ml	`$spacing-xs`	地址链接左边距
--mei-foot-row-mb	`$spacing-xs`	底部行下边距
--mei-head-content-pl	`.4rem`	头部内容左边距
--mei-card-height	`5rem`	卡片总高度
--mei-header-height	`3rem`	头部图片区域高度
--mei-game-icon-size	`.48rem`	游戏图标尺寸
--mei-labels-height	`.36rem`	标签行高
--mei-head-content-height	`2.6rem`	头部内容高度
--mei-card-bg-color	`$color-surface-default`	卡片背景色
--mei-head-title-color	`$color-text-invert-light`	头部标题颜色
--mei-game-name-color	`#eee9c4`	游戏名称颜色
--mei-foot-title-color	`$color-text-primary`	底部标题颜色
--mei-foot-ctrls-color	`$color-text-brand`	底部控制按钮颜色
--mei-foot-ctrls-icon-color	`$color-text-primary`	底部控制图标颜色
--mei-address-icon-color	`$color-text-invert-default`	地址图标颜色
--mei-address-text-color	`$color-text-invert-default`	地址文字颜色
--mei-address-link-color	`$color-text-brand`	地址链接颜色
--mei-labels-bg-color	`$color-surface-brand-light2`	标签背景色
--mei-labels-text-color	`$color-text-secondary`	标签文字颜色
--mei-map-icon-color	`$color-text-primary`	地图图标颜色
--mei-head-title-font-size	`$font-size-lg`	头部标题字体大小
--mei-game-name-font-size	`$font-size-md`	游戏名称字体大小
--mei-foot-title-font-size	`$font-size-lg`	底部标题字体大小
--mei-foot-ctrls-font-size	`$font-size-sm`	底部控制按钮字体大小
--mei-foot-ctrls-icon-font-size	`$font-size-lg`	底部控制图标字体大小
--mei-address-icon-font-size	`$font-size-sm`	地址图标字体大小
--mei-address-text-font-size	`$font-size-xs`	地址文字字体大小
--mei-address-link-font-size	`$font-size-xs`	地址链接字体大小
--mei-labels-font-size	`$font-size-xs`	标签字体大小
--mei-title-font-weight	`$font-weight-bold`	标题字体粗细
--mei-card-border-radius	`$border-radius-sm`	卡片圆角
--mei-game-icon-border-radius	`$border-radius-circle`	游戏图标圆角
--mei-card-shadow	`$shadow-md`	卡片阴影

# 注意事项

图标资源：组件使用 pmg-iconfont 图标字体，需确保项目中已引入相关图标资源
- pmg-icon-arrow：箭头图标
- pmg-icon-address：地址图标
背景图片：header-bg-image 支持任意图片URL，建议使用高质量图片以获得更好的视觉效果
标签滚动：标签列表支持横向滚动，当标签数量较多时会自动启用滚动功能
响应式：组件高度通过 --mei-card-height 变量控制，可根据实际需求调整

← MatchDocs MatchFillApplicationPopup →