Press Next

# MatchDetailEndGame

A component for displaying match end status and champion information, supporting both team and personal view modes.

# Features

  • 🏆 Champion Display - Clearly display champion information and honor badges
  • 👥 Dual View Support - Support both team and personal view modes
  • 🎨 Beautiful Design - Gradient decorations, watermark backgrounds and other visual effects
  • 🔧 Highly Customizable - Rich CSS variables for theme customization
  • 📱 Responsive - Perfect adaptation to various screen sizes
  • ⚡ Lightweight & Efficient - Optimized code structure with excellent performance

# Use Cases

  • E-sports match champion display
  • Team competition result announcement
  • Online game battle results
  • Sports event champion display
  • Personal competitive achievement display

# Import

import PressMatchDetailEndGame from 'press-next/press-match-detail-end-game/press-match-detail-end-game';

# Code Demo

# Basic Usage - Team View

<template>
  <PressMatchDetailEndGame
    view-type="team"
    :title="title"
    :name="teamName"
    :logo="teamLogo"
    :champion-text="championText"
    :members="members"
    :max-display-members="5"
  />
</template>

<script setup>
import { ref } from 'vue';
import PressMatchDetailEndGame from 'press-next/press-match-detail-end-game/press-match-detail-end-game';
import { getMockData } from './demo-data';

// Use mock data
const { teamViewProps } = getMockData();

const title = ref('Match End');
const teamName = ref('Shenzhen University');
const teamLogo = ref('https://placehold.co/72x72');
const championText = ref('Champion');
const members = ref(teamViewProps.members);
</script>

# Personal View

<template>
  <PressMatchDetailEndGame
    view-type="personal"
    :title="'Match End'"
    :name="'Player Nickname'"
    :logo="playerAvatar"
    :champion-text="'Champion'"
  />
</template>

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

const playerAvatar = ref('https://placehold.co/72x72');
</script>

# Custom Member Display Count

<template>
  <PressMatchDetailEndGame
    view-type="team"
    :title="'Match End'"
    :name="'King Team'"
    :logo="teamLogo"
    :champion-text="'Champion'"
    :members="members"
    :max-display-members="3"
  />
</template>

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

const teamLogo = ref('https://placehold.co/72x72');
const members = ref([
  { id: 1, name: 'Member 1', avatar: 'https://placehold.co/40x40' },
  { id: 2, name: 'Member 2', avatar: 'https://placehold.co/40x40' },
  { id: 3, name: 'Member 3', avatar: 'https://placehold.co/40x40' },
  { id: 4, name: 'Member 4', avatar: 'https://placehold.co/40x40' },
  { id: 5, name: 'Member 5', avatar: 'https://placehold.co/40x40' }
]);
</script>

# Custom Styles

<template>
  <PressMatchDetailEndGame
    view-type="team"
    custom-class="custom-end-game"
    :title="title"
    :name="teamName"
    :logo="teamLogo"
    :champion-text="championText"
    :members="members"
  />
</template>

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

const title = ref('Match End');
const teamName = ref('Shenzhen University');
const teamLogo = ref('https://placehold.co/72x72');
const championText = ref('Champion');
const members = ref([
  { id: 1, name: 'Member 1', avatar: 'https://placehold.co/40x40' },
  { id: 2, name: 'Member 2', avatar: 'https://placehold.co/40x40' }
]);
</script>

<style>
.custom-end-game {
  --deg-bar-bg: linear-gradient(90deg, #ff6b00 0%, #ff8c00 100%);
  --deg-title-color: #ff6b00;
  --deg-champion-tag-bg: #ff6b00;
}
</style>

# API

# Props

Attribute Description Type Default
custom-class Custom CSS class string ''
view-type View type 'team' | 'personal' 'team'
title Title text string '比赛结束'
name Team name or player name string '深圳大学深圳大学深圳大学'
logo Team logo or player avatar string 'https://placehold.co/72x72'
champion-text Champion text string '冠军'
members Members list (team view only) Member[] []
max-display-members Maximum display members number 5

# Member Data Structure

interface Member {
  id: string | number; // Member ID
  name: string; // Member name
  avatar: string; // Member avatar URL
}

# Notes

# Usage Recommendations

  1. View Selection: Choose the appropriate view type based on business scenario, use team for team matches, personal for individual competitions
  2. Member Avatars: It is recommended to set default placeholder images for member avatars to avoid blank display when loading fails
  3. Member Count: max-display-members controls the number of members displayed, excess will be shown as "+N"
  4. Logo Images: It is recommended to use square images, the component will automatically handle circular display
  5. Name Length: Team or player names that are too long will automatically wrap, it's recommended to keep them at a reasonable length
  6. Responsive Adaptation: On small screen devices, it's recommended to appropriately adjust size variables like --deg-member-avatar-size

# Performance Optimization

  • Use v-memo directive to optimize member list rendering
  • It is recommended to limit the value of max-display-members for large numbers of members
  • Avatar images are recommended to use CDN acceleration
  • Logo images are recommended to be compressed and optimized

# Compatibility

  • Support Vue 3.0+
  • Compatible with modern browsers (Chrome 60+, Firefox 60+, Safari 12+)
  • Support WeChat Mini Program, Alipay Mini Program and other platforms

# Theme Customization

# CSS Variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

# Positioning System

Name Default Value Description
--deg-card-position relative Card position
--deg-bar-position relative Top decoration bar position
--deg-watermark-position absolute Watermark position
--deg-watermark-top .78rem Watermark top distance
--deg-watermark-left 0 Watermark left distance
--deg-content-position relative Content area position
--deg-logo-wrapper-position relative Logo wrapper position
--deg-champion-tag-position absolute Champion tag position
--deg-champion-tag-bottom 0 Champion tag bottom distance
--deg-champion-tag-left 0 Champion tag left distance
--deg-champion-tag-right 0 Champion tag right distance
--deg-champion-tag-bg-position absolute Champion tag bg position
--deg-champion-tag-bg-top 0 Champion tag bg top distance
--deg-champion-tag-bg-left 0 Champion tag bg left distance
--deg-champion-tag-text-position relative Champion tag text position
--deg-member-avatar-position relative Member avatar position
--deg-more-members-position relative More members position

# Box Model System

Name Default Value Description
--deg-card-width 100% Card width
--deg-bar-width 100% Top decoration bar width
--deg-bar-height .08rem Top decoration bar height
--deg-watermark-width 100% Watermark width
--deg-watermark-height 2.4rem Watermark height
--deg-header-padding .56rem .68rem .24rem .68rem Header padding
--deg-content-margin 0 $spacing-md .56rem $spacing-md Content margin
--deg-title-wrapper-width 100% Title wrapper width
--deg-title-wrapper-height .48rem Title wrapper height
--deg-title-wrapper-padding 0 .66rem Title wrapper padding
--deg-title-wrapper-gap .16rem Title wrapper gap
--deg-title-decoration-flex 1 Title decoration flex
--deg-title-decoration-height .02rem Title decoration height
--deg-logo-wrapper-size 1.44rem Logo wrapper size
--deg-logo-wrapper-margin 0 auto Logo wrapper margin
--deg-logo-wrapper-overflow hidden Logo wrapper overflow
--deg-logo-bg-size 100% Logo background size
--deg-logo-size 100% Logo size
--deg-champion-badge-width 100% Champion badge width
--deg-champion-badge-height 5.68rem Champion badge height
--deg-champion-tag-width 100% Champion tag width
--deg-champion-tag-height .34rem Champion tag height
--deg-champion-tag-bg-width 100% Champion tag bg width
--deg-champion-tag-bg-height 100% Champion tag bg height
--deg-name-margin-top $spacing-sm Name margin top
--deg-members-margin-top $spacing-md Members list margin top
--deg-members-gap .12rem Members gap
--deg-member-avatar-size .5rem Member avatar size
--deg-member-img-size 100% Member image size
--deg-more-members-size .5rem More members size

# Border System

Name Default Value Description
--deg-card-radius $border-radius-sm Card border radius
--deg-logo-wrapper-border-width 1px Logo wrapper border width
--deg-logo-wrapper-border-style solid Logo wrapper border style
--deg-logo-wrapper-border-color $color-divider-light Logo wrapper border color
--deg-logo-wrapper-border-radius $border-radius-circle Logo wrapper border radius
--deg-logo-border-radius $border-radius-circle Logo border radius
--deg-member-avatar-radius $border-radius-circle Member avatar border radius
--deg-member-avatar-border-color $color-divider-default Member avatar border color
--deg-more-members-border-color $color-divider-default More members border color

# Background System

Name Default Value Description
--deg-card-bg-color $color-surface-default Card background color
--deg-card-bg-img url('...') Card background image
--deg-card-bg-position top center Card background position
--deg-card-bg-repeat no-repeat Card background repeat
--deg-card-bg-size 100% Card background size
--deg-bar-bg $color-surface-brand-light2 Top decoration bar bg
--deg-title-decoration-left-bg linear-gradient(to right, transparent, #d9e3ff) Left title decoration bg
--deg-title-decoration-right-bg linear-gradient(to left, transparent, #d9e3ff) Right title decoration bg
--deg-champion-tag-bg $color-text-primary Champion tag background
--deg-more-members-bg $color-surface-secondary More members background

# Typography System

Name Default Value Description
--deg-watermark-color $color-surface-brand-light2 Watermark color
--deg-watermark-font-size 1.92rem Watermark font size
--deg-watermark-font-family AgencyFB Watermark font family
--deg-watermark-font-weight $font-weight-bold Watermark font weight
--deg-watermark-text-align center Watermark text align
--deg-header-text-align center Header text align
--deg-title-color #212124 Title color
--deg-title-font-size $font-size-lg Title font size
--deg-title-font-weight $font-weight-bold Title font weight
--deg-title-line-height 1.5 Title line height
--deg-name-color $color-text-secondary Name color
--deg-name-font-size $font-size-sm Name font size
--deg-name-font-weight $font-weight-bold Name font weight
--deg-name-line-height 1.5 Name line height
--deg-name-align center Name text align
--deg-champion-tag-color $color-surface-default Champion tag color
--deg-champion-tag-font-size $font-size-xs Champion tag font size
--deg-champion-tag-font-weight $font-weight-regular Champion tag font weight
--deg-champion-tag-line-height 1.5 Champion tag line height
--deg-more-text-color $color-text-invert-default More members text color
--deg-more-text-font-size $font-size-xs More members font size
--deg-more-text-font-weight $font-weight-regular More members font weight

# Others

Name Default Value Description
--deg-watermark-opacity .3 Watermark opacity
--deg-champion-tag-opacity .6 Champion tag opacity
--deg-champion-badge-opacity 1 Champion badge opacity
--deg-logo-object-fit cover Logo image object fit
--deg-member-img-object-fit cover Member image object fit

# FAQ

# How to switch view type?

Control through the view-type attribute, set to team to display team view (including member list), set to personal to display personal view (without member list).

# What if member avatars are not fully displayed?

You can control the number of members displayed by adjusting the max-display-members attribute, excess will be shown as "+N".

# How to customize watermark text?

The watermark text is currently fixed as "champion". If you need to customize it, you can adjust the watermark style through CSS variables, or add custom styles through custom-class.

# How to modify champion tag text?

Set the champion tag text content through the champion-text attribute, the default is "冠军" (Champion).

← MatchDocs →