Press Next

# MatchResultItem

A match result display component for showing match result information, including result title, match cover, trophy display, and action buttons.

# Import

import PressMatchResultItem from 'press-next/press-match-result-item/press-match-result-item';

# Usage

# Basic Usage

<template>
  <PressMatchResultItem
    :result-title="resultTitle"
    :match-cover="matchCover"
    :match-name="matchName"
    :tip-text="tipText"
    :primary-btn-text="primaryBtnText"
    :secondary-btn-text="secondaryBtnText"
    @primary-action="handlePrimaryAction"
    @secondary-action="handleSecondaryAction"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const resultTitle = ref('Sorry, not promoted');
const matchCover = ref('https://example.com/cover.jpg');
const matchName = ref('Honor of Kings City Tournament');
const tipText = ref('Keep trying, try other matches~');
const primaryBtnText = ref('Share');
const secondaryBtnText = ref('Join other matches');

const handlePrimaryAction = () => {
  console.log('Primary button clicked');
};

const handleSecondaryAction = () => {
  console.log('Secondary button clicked');
};
</script>

# Victory State (with Trophy)

<template>
  <PressMatchResultItem
    result-title="Congratulations!"
    :match-cups="cupImage"
    match-name="Honor of Kings City Tournament"
    tip-text="Congratulations on winning the championship!"
    primary-btn-text="Claim Reward"
    secondary-btn-text="Continue Challenge"
    @primary-action="handleClaimReward"
    @secondary-action="handleContinue"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const cupImage = ref('https://example.com/trophy.png');

const handleClaimReward = () => {
  console.log('Claim reward');
};

const handleContinue = () => {
  console.log('Continue challenge');
};
</script>

# Custom Buttons

<template>
  <PressMatchResultItem
    result-title="Match Ended"
    :match-cover="matchCover"
    match-name="Spring League"
    tip-text="Thank you for participating!"
  >
    <template #ctrls-btn>
      <button 
        class="custom-btn secondary"
        @click="handleViewDetails"
      >
        View Details
      </button>
      <button 
        class="custom-btn primary"
        @click="handleShare"
      >
        Share Result
      </button>
    </template>
  </PressMatchResultItem>
</template>

<script setup lang="ts">
const matchCover = ref('https://example.com/spring-league.jpg');

const handleViewDetails = () => {
  console.log('View match details');
};

const handleShare = () => {
  console.log('Share match result');
};
</script>

<style>
.custom-btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.custom-btn.primary {
  background: #fcdb8d;
  color: #000;
}

.custom-btn.secondary {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
}
</style>

# Complete Example

<template>
  <div class="match-result-demo">
    <PressMatchResultItem
      :result-title="currentResult.title"
      :match-cover="currentResult.cover"
      :match-cups="currentResult.cups"
      :match-name="currentResult.matchName"
      :tip-text="currentResult.tip"
      :primary-btn-text="currentResult.primaryBtn"
      :secondary-btn-text="currentResult.secondaryBtn"
      :custom-class="currentResult.customClass"
      @primary-action="handlePrimaryAction"
      @secondary-action="handleSecondaryAction"
    />
    
    <div class="demo-controls">
      <button @click="switchToWin">Switch to Win State</button>
      <button @click="switchToLose">Switch to Lose State</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const winResult = {
  title: 'Congratulations on Victory!',
  cover: '',
  cups: 'https://example.com/gold-trophy.png',
  matchName: 'Honor of Kings National Tournament',
  tip: 'You have successfully advanced to the next round!',
  primaryBtn: 'Claim Reward',
  secondaryBtn: 'Continue Match',
  customClass: 'win-style'
};

const loseResult = {
  title: 'Sorry, not promoted',
  cover: 'https://example.com/match-cover.jpg',
  cups: '',
  matchName: 'Honor of Kings National Tournament',
  tip: 'Keep trying, try other matches~',
  primaryBtn: 'Share',
  secondaryBtn: 'Join other matches',
  customClass: 'lose-style'
};

const currentResult = ref(loseResult);

const switchToWin = () => {
  currentResult.value = winResult;
};

const switchToLose = () => {
  currentResult.value = loseResult;
};

const handlePrimaryAction = () => {
  if (currentResult.value === winResult) {
    console.log('Claim reward');
    // Call reward claiming API
  } else {
    console.log('Share result');
    // Call share functionality
  }
};

const handleSecondaryAction = () => {
  if (currentResult.value === winResult) {
    console.log('Continue match');
    // Navigate to next match
  } else {
    console.log('Join other matches');
    // Navigate to match list
  }
};
</script>

<style>
.match-result-demo {
  padding: 20px;
  background: rgba(0, 0, 0, 0.7);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.demo-controls {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.demo-controls button {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.win-style {
  --pri-title-color: #ffd700;
  --pri-bg-pic: url('https://example.com/win-bg.png');
}

.lose-style {
  --pri-title-color: #fcdb8d;
  --pri-bg-pic: url('https://example.com/lose-bg.png');
}
</style>

# API

# Props

Attribute Description Type Default
result-title Result title string ''
match-cover Match cover image string ''
match-name Match name string ''
match-info Match information string ''
tip-text Tip text string ''
primary-btn-text Primary button text string Share
secondary-btn-text Secondary button text string Join other matches
custom-class Custom class name string ''
match-cups Trophy image string ''

# Events

Event Description Parameters
primary-action Triggered when primary button is clicked -
secondary-action Triggered when secondary button is clicked -

# Slots

Name Description
ctrls-btn Custom action button area

# Features

# Core Functions

  • ✅ Result Display: Supports different result states like victory/defeat
  • ✅ Trophy Display: Shows trophy image for victory state with enhanced visual effect
  • ✅ Match Information: Displays match cover, name and other basic information
  • ✅ Action Buttons: Provides primary and secondary action buttons

# Visual Design

  • 🎯 State Differentiation: Distinguishes win/lose states through trophy/cover
  • 🎯 Background Decoration: Supports custom background image decoration
  • 🎯 Responsive Layout: Adapts to different screen sizes

# Use Cases

  • Match result pages
  • Game battle result display
  • Competition activity result announcement
  • Leaderboard result display

# Theming

# CSS Variables

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

Name Default Value Description
--pri-item-pt .5rem Default content top padding
--pri-item-padding-lr $spacing-lg Default content left/right padding
--pri-cups-padding-lr $spacing-lg Trophy left/right padding
--pri-cups-pt 2rem Trophy to content spacing
--pri-cups-mt -.5rem Trophy to top distance
--pri-main-padding-lr $spacing-lg Main content left/right padding
--pri-title-mb $spacing-lg Title to content spacing
--pri-cover-mb $spacing-md Cover spacing
--pri-name-mb $spacing-xs Match name spacing
--pri-info-mb $spacing-lg Match info spacing
--pri-tip-mb $spacing-lg Tip to content spacing
--pri-ctrls-gap $spacing-sm Button spacing
--pri-item-width 6.02rem Item width
--pri-item-height 7.5rem Item height
--pri-cups-width 2.32rem Trophy width
--pri-cups-height 2.23rem Trophy height
--pri-cover-size 1.44rem Cover size
--pri-title-color #ff8d00 Title color
--pri-name-color $color-text-primary Match name color
--pri-info-color $color-text-secondary Match info text color
--pri-tip-color $color-text-invert-default Tip text color
--pri-title-font-size $font-size-xl Title font size
--pri-title-font-size-cups $font-size-xxl Trophy title font size
--pri-title-font-weight $font-weight-bold Title font weight
--pri-name-font-size $font-size-md Match name font size
--pri-name-font-weight 500 Match name font weight
--pri-info-font-size $font-size-md Match info font size
--pri-tip-font-size $font-size-md Tip font size
--pri-cover-border-radius 0 Match cover border radius
--pri-bg-pic url('...') Background image

# Custom Style Example

<template>
  <PressMatchResultItem
    class="custom-result-item"
    :result-title="resultTitle"
    :match-name="matchName"
  />
</template>

<style>
.custom-result-item {
  --pri-title-color: #ff6b6b;
  --pri-name-color: #4ecdc4;
  --pri-tip-color: rgba(255, 255, 255, 0.9);
  --pri-bg-pic: url('https://example.com/custom-bg.png');
  --pri-cover-border-radius: .16rem;
}
</style>

# Theme Color Schemes

<style>
/* Victory theme */
.victory-theme {
  --pri-title-color: #ffd700;
  --pri-name-color: #fff;
  --pri-tip-color: rgba(255, 215, 0, 0.8);
  --pri-bg-pic: url('https://example.com/victory-bg.png');
}

/* Defeat theme */
.defeat-theme {
  --pri-title-color: #ff6b6b;
  --pri-name-color: #fff;
  --pri-tip-color: rgba(255, 107, 107, 0.8);
  --pri-bg-pic: url('https://example.com/defeat-bg.png');
}

/* Dark theme */
.dark-theme {
  --pri-title-color: #bb86fc;
  --pri-name-color: #e0e0e0;
  --pri-tip-color: rgba(224, 224, 224, 0.7);
  --pri-cover-border-radius: .16rem;
}
</style>

← MatchRoundSetItem →