Press Next

# MatchEventsItem

A card component for displaying event information, including game info, event title, address information, and time labels.

# Import

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

# Usage

# Basic Usage

<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 = 'League of Legends';
const gameIcon = 'https://example.com/lol-icon.png';
const headerTitle = 'All Heroes + Selected Skins';
const headerBgImage = 'https://example.com/bg.jpg';
const eventTitle = 'Valorant XX Cup Tournament';
const address = 'Big White Rabbit Internet Cafe XXX Street XXX';

const labels = [
  { id: 1, text: 'Registration ends April 14 24:00' },
  { id: 2, text: 'Tournament starts April 16 24:00' },
];

const handleViewMap = () => {
  console.log('View map');
};

const handleViewDetail = () => {
  console.log('View details');
};
</script>

# Custom Styling

<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>

# Complete Example

<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: 'League of Legends',
    gameIcon: 'https://example.com/lol-icon.png',
    headerTitle: 'All Heroes + Selected Skins',
    headerBgImage: 'https://example.com/lol-bg.jpg',
    eventTitle: 'League of Legends City Championship',
    address: 'Wangyu Internet Cafe Kexing Store',
    labels: [
      { id: 1, text: 'Registration ends April 14 24:00' },
      { id: 2, text: 'Tournament starts April 16 24:00' },
    ],
  },
  {
    id: 2,
    gameName: 'Honor of Kings',
    gameIcon: 'https://example.com/wzry-icon.png',
    headerTitle: 'All Heroes + All Skins',
    headerBgImage: 'https://example.com/wzry-bg.jpg',
    eventTitle: 'Honor of Kings College League',
    address: 'Jala Internet Cafe Nanshan Store',
    labels: [
      { id: 1, text: 'Registration ends May 1 18:00' },
      { id: 2, text: 'Tournament starts May 3 14:00' },
    ],
  },
]);

const handleViewMap = (eventId) => {
  console.log('View map:', eventId);
};

const handleViewDetail = (eventId) => {
  console.log('View details:', eventId);
};
</script>

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

# API

# Props

Prop Description Type Default
game-name Game name string ''
game-icon Game icon URL string ''
game-logo-text Game logo text watermark string ''
header-title Header title string '全英雄+'
header-bg-image Header background image URL string ''
event-title Event title string ''
address Address information string ''
labels Label list LabelItem[] []
custom-class Custom external CSS class string ''

# LabelItem Data Structure

Prop Description Type
id Label ID string | number
text Label text string

# Events

Event Description Parameters
view-map Triggered when view map is clicked -
view-detail Triggered when view details is clicked -

# CSS Variables

The component provides the following CSS variables for custom styling.

Name Default Value Description
--mei-head-pt .36rem Header content top padding
--mei-foot-padding-tb $spacing-md Footer content vertical padding
--mei-foot-padding-lr $spacing-lg Footer content horizontal padding
--mei-game-gap $spacing-sm Game info gap
--mei-game-mb $spacing-md Game info bottom margin
--mei-labels-gap $spacing-sm Labels gap
--mei-labels-spacing $spacing-md Labels vertical spacing
--mei-labels-pr $spacing-sm Labels horizontal padding
--mei-address-link-ml $spacing-xs Address link left margin
--mei-foot-row-mb $spacing-xs Footer row bottom margin
--mei-head-content-pl .4rem Header content left padding
--mei-card-height 5rem Card total height
--mei-header-height 3rem Header image area height
--mei-game-icon-size .48rem Game icon size
--mei-labels-height .36rem Labels line height
--mei-head-content-height 2.6rem Header content height
--mei-card-bg-color $color-surface-default Card background color
--mei-head-title-color $color-text-invert-light Header title color
--mei-game-name-color #eee9c4 Game name color
--mei-foot-title-color $color-text-primary Footer title color
--mei-foot-ctrls-color $color-text-brand Footer control button color
--mei-foot-ctrls-icon-color $color-text-primary Footer control icon color
--mei-address-icon-color $color-text-invert-default Address icon color
--mei-address-text-color $color-text-invert-default Address text color
--mei-address-link-color $color-text-brand Address link color
--mei-labels-bg-color $color-surface-brand-light2 Labels background color
--mei-labels-text-color $color-text-secondary Labels text color
--mei-map-icon-color $color-text-primary Map icon color
--mei-head-title-font-size $font-size-lg Header title font size
--mei-game-name-font-size $font-size-md Game name font size
--mei-foot-title-font-size $font-size-lg Footer title font size
--mei-foot-ctrls-font-size $font-size-sm Footer control button font size
--mei-foot-ctrls-icon-font-size $font-size-lg Footer control icon font size
--mei-address-icon-font-size $font-size-sm Address icon font size
--mei-address-text-font-size $font-size-xs Address text font size
--mei-address-link-font-size $font-size-xs Address link font size
--mei-labels-font-size $font-size-xs Labels font size
--mei-title-font-weight $font-weight-bold Title font weight
--mei-card-border-radius $border-radius-sm Card border radius
--mei-game-icon-border-radius $border-radius-circle Game icon border radius
--mei-card-shadow $shadow-md Card shadow

# Notes

  1. Icon Resources: The component uses pmg-iconfont icon font, ensure the related icon resources are imported in the project

    • pmg-icon-arrow: Arrow icon
    • pmg-icon-address: Address icon

  2. Background Image: header-bg-image supports any image URL, high-quality images are recommended for better visual effects

  3. Label Scrolling: The label list supports horizontal scrolling, which is automatically enabled when there are many labels

  4. Responsive: Component height is controlled by the --mei-card-height variable, which can be adjusted according to actual needs

← MatchFillApplicationPopup →