Press Next

# PressMatchMessagesRecommend

A component for displaying recommended game teams with application functionality.

# Import

import PressMatchMessagesRecommend from 'press-ui/press-match-messages-recommend/press-match-messages-recommend.vue'

# Usage

# Basic Usage

<PressMatchMessagesRecommend
  :content="content"
  @item-click="handleItemClick"
/>

import { ref } from 'vue'
import type { RecommendItem } from 'press-ui/press-match-messages-recommend/demo-data'

const content = ref({
  items: [
    {
      id: 1,
      title: 'Honor of Kings Team',
      level: 'King 30 Stars',
      kd: 'KD 2.8',
      area: 'South China',
      description: 'Professional esports team, good at team battles, looking for like-minded teammates!',
      bg: 'https://example.com/team1.jpg',
      buttonColor: '#6A36EE',
    }
  ]
})

const handleItemClick = (item: RecommendItem, index: number) => {
  console.log('Clicked recommend item:', item, 'Index:', index)
}

# API

# Props

Attribute Description Type Default
content Recommend content data RecommendContent -
custom-class Custom class name string ''
custom-style Custom style string ''

# Events

Event Description Parameters
item-click Triggered when clicking recommend item (item: RecommendItem, index: number)

# Data Structure

# RecommendItem

Attribute Description Type Required
id Unique identifier string \| number Yes
title Team title string Yes
level Level information string Yes
kd KD value string Yes
area Area information string Yes
description Description string No
bg Background image string Yes
buttonColor Button color string Yes

# RecommendContent

Attribute Description Type Required
items Recommend items list RecommendItem[] Yes

# Theming

# CSS Variables

The component provides the following CSS variables, which can be used to customize styles.

Name Default Value Description
--pmm-recommend-info-bg rgba(211, 212, 252, .48) Description background color
--pmm-recommend-main-color #212124 Main text color
--pmm-recommend-sub-color rgba(33, 33, 36, .6) Sub text color
--pmm-recommend-main-weight 600 Main text weight
--pmm-recommend-text-sm .2rem Small text size
--pmm-recommend-text-md .24rem Medium text size
--pmm-recommend-items-radius .08rem Card border radius
--pmm-recommend-right-width 1.6rem Card right area width
--pmm-recommend-content-padding .24rem .16rem .36rem .24rem Card content padding
--pmm-recommend-level-width 1.12rem Level width
--pmm-recommend-kd-width 1.12rem KD width
--pmm-recommend-area-width 1.12rem Area width
--pmm-recommend-header-height 1.74rem Header height

← MatchMessagesRounds →