Press Next

# MatchDetailEndGame 比赛结束

比赛结束状态展示组件，用于显示比赛结束后的冠军信息，支持战队视角和个人视角两种展示模式。

# 特性

  • 🏆 冠军展示 - 清晰展示比赛冠军信息和荣誉标识
  • 👥 双视角支持 - 支持战队视角和个人视角两种展示模式
  • 🎨 精美设计 - 渐变装饰、水印背景等精美视觉效果
  • 🔧 高度定制 - 丰富的CSS变量支持主题定制
  • 📱 响应式适配 - 完美适配各种屏幕尺寸
  • ⚡ 轻量高效 - 优化的代码结构，性能出色

# 适用场景

  • 电竞比赛冠军展示
  • 团队比赛结果公示
  • 在线游戏对战结果
  • 体育赛事冠军展示
  • 个人竞技成就展示

# 引入

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

# 代码演示

# 基础用法 - 战队视角

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

// 使用模拟数据
const { teamViewProps } = getMockData();

const title = ref('比赛结束');
const teamName = ref('深圳大学');
const teamLogo = ref('https://placehold.co/72x72');
const championText = ref('冠军');
const members = ref(teamViewProps.members);
</script>

# 个人视角

<template>
  <PressMatchDetailEndGame
    view-type="personal"
    :title="'比赛结束'"
    :name="'玩家昵称'"
    :logo="playerAvatar"
    :champion-text="'冠军'"
  />
</template>

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

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

# 自定义成员显示数量

<template>
  <PressMatchDetailEndGame
    view-type="team"
    :title="'比赛结束'"
    :name="'王者战队'"
    :logo="teamLogo"
    :champion-text="'冠军'"
    :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: '成员1', avatar: 'https://placehold.co/40x40' },
  { id: 2, name: '成员2', avatar: 'https://placehold.co/40x40' },
  { id: 3, name: '成员3', avatar: 'https://placehold.co/40x40' },
  { id: 4, name: '成员4', avatar: 'https://placehold.co/40x40' },
  { id: 5, name: '成员5', avatar: 'https://placehold.co/40x40' }
]);
</script>

# 自定义样式

<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('比赛结束');
const teamName = ref('深圳大学');
const teamLogo = ref('https://placehold.co/72x72');
const championText = ref('冠军');
const members = ref([
  { id: 1, name: '成员1', avatar: 'https://placehold.co/40x40' },
  { id: 2, name: '成员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

参数 说明 类型 默认值
custom-class 自定义样式类 string ''
view-type 视角类型 'team' | 'personal' 'team'
title 标题文字 string '比赛结束'
name 队伍名称或个人名称 string '深圳大学深圳大学深圳大学'
logo 队伍logo或个人头像 string 'https://placehold.co/72x72'
champion-text 冠军文字 string '冠军'
members 成员列表（仅战队视角） Member[] []
max-display-members 最大显示成员数 number 5

# Member 数据结构

interface Member {
  id: string | number; // 成员ID
  name: string; // 成员名称
  avatar: string; // 成员头像URL
}

# 注意事项

# 使用建议

  1. 视角选择：根据业务场景选择合适的视角类型，战队比赛使用 team，个人竞技使用 personal
  2. 成员头像：建议为成员头像设置默认占位图，避免加载失败时显示空白
  3. 成员数量：max-display-members 控制显示的成员数量，超出部分会显示 "+N" 的形式
  4. Logo图片：建议使用正方形图片，组件会自动处理为圆形显示
  5. 名称长度：队伍或个人名称过长时会自动换行，建议控制在合理长度
  6. 响应式适配：在小屏幕设备上，建议适当调整 --deg-member-avatar-size 等尺寸变量

# 性能优化

  • 使用 v-memo 指令优化成员列表渲染
  • 大量成员时建议限制 max-display-members 的值
  • 头像图片建议使用 CDN 加速
  • Logo图片建议进行压缩优化

# 兼容性

  • 支持 Vue 3.0+
  • 兼容现代浏览器（Chrome 60+, Firefox 60+, Safari 12+）
  • 支持微信小程序、支付宝小程序等平台

# 主题定制

# 样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。

# 定位系统 (Positioning)

名称 默认值 描述
--deg-card-position relative 卡片定位
--deg-bar-position relative 顶部装饰条定位
--deg-watermark-position absolute 水印定位
--deg-watermark-top .78rem 水印顶部距离
--deg-watermark-left 0 水印左侧距离
--deg-content-position relative 内容区域定位
--deg-logo-wrapper-position relative Logo容器定位
--deg-champion-tag-position absolute 冠军标签定位
--deg-champion-tag-bottom 0 冠军标签底部距离
--deg-champion-tag-left 0 冠军标签左侧距离
--deg-champion-tag-right 0 冠军标签右侧距离
--deg-champion-tag-bg-position absolute 冠军标签背景定位
--deg-champion-tag-bg-top 0 冠军标签背景顶部距离
--deg-champion-tag-bg-left 0 冠军标签背景左侧距离
--deg-champion-tag-text-position relative 冠军标签文字定位
--deg-member-avatar-position relative 成员头像定位
--deg-more-members-position relative 更多成员定位

# 盒模型系统 (Box Model)

名称 默认值 描述
--deg-card-width 100% 卡片宽度
--deg-bar-width 100% 顶部装饰条宽度
--deg-bar-height .08rem 顶部装饰条高度
--deg-watermark-width 100% 水印宽度
--deg-watermark-height 2.4rem 水印高度
--deg-header-padding .56rem .68rem .24rem .68rem 头部内边距
--deg-content-margin 0 $spacing-md .56rem $spacing-md 内容外边距
--deg-title-wrapper-width 100% 标题容器宽度
--deg-title-wrapper-height .48rem 标题容器高度
--deg-title-wrapper-padding 0 .66rem 标题容器内边距
--deg-title-wrapper-gap .16rem 标题容器间距
--deg-title-decoration-flex 1 标题装饰flex
--deg-title-decoration-height .02rem 标题装饰高度
--deg-logo-wrapper-size 1.44rem Logo容器尺寸
--deg-logo-wrapper-margin 0 auto Logo容器外边距
--deg-logo-wrapper-overflow hidden Logo容器溢出
--deg-logo-bg-size 100% Logo背景尺寸
--deg-logo-size 100% Logo尺寸
--deg-champion-badge-width 100% 冠军徽章宽度
--deg-champion-badge-height 5.68rem 冠军徽章高度
--deg-champion-tag-width 100% 冠军标签宽度
--deg-champion-tag-height .34rem 冠军标签高度
--deg-champion-tag-bg-width 100% 冠军标签背景宽度
--deg-champion-tag-bg-height 100% 冠军标签背景高度
--deg-name-margin-top $spacing-sm 名称上边距
--deg-members-margin-top $spacing-md 成员列表上边距
--deg-members-gap .12rem 成员间距
--deg-member-avatar-size .5rem 成员头像尺寸
--deg-member-img-size 100% 成员图片尺寸
--deg-more-members-size .5rem 更多成员尺寸

# 边框系统 (Border)

名称 默认值 描述
--deg-card-radius $border-radius-sm 卡片圆角
--deg-logo-wrapper-border-width 1px Logo容器边框宽度
--deg-logo-wrapper-border-style solid Logo容器边框样式
--deg-logo-wrapper-border-color $color-divider-light Logo容器边框颜色
--deg-logo-wrapper-border-radius $border-radius-circle Logo容器圆角
--deg-logo-border-radius $border-radius-circle Logo圆角
--deg-member-avatar-radius $border-radius-circle 成员头像圆角
--deg-member-avatar-border-color $color-divider-default 成员头像边框颜色
--deg-more-members-border-color $color-divider-default 更多成员边框颜色

# 背景系统 (Background)

名称 默认值 描述
--deg-card-bg-color $color-surface-default 卡片背景色
--deg-card-bg-img url('...') 卡片背景图片
--deg-card-bg-position top center 卡片背景位置
--deg-card-bg-repeat no-repeat 卡片背景重复
--deg-card-bg-size 100% 卡片背景尺寸
--deg-bar-bg $color-surface-brand-light2 顶部装饰条背景色
--deg-title-decoration-left-bg linear-gradient(to right, transparent, #d9e3ff) 左侧标题装饰背景
--deg-title-decoration-right-bg linear-gradient(to left, transparent, #d9e3ff) 右侧标题装饰背景
--deg-champion-tag-bg $color-text-primary 冠军标签背景色
--deg-more-members-bg $color-surface-secondary 更多成员背景色

# 文本系统 (Typography)

名称 默认值 描述
--deg-watermark-color $color-surface-brand-light2 水印颜色
--deg-watermark-font-size 1.92rem 水印字体大小
--deg-watermark-font-family AgencyFB 水印字体
--deg-watermark-font-weight $font-weight-bold 水印字体粗细
--deg-watermark-text-align center 水印文字对齐
--deg-header-text-align center 头部文字对齐
--deg-title-color #212124 标题颜色
--deg-title-font-size $font-size-lg 标题字体大小
--deg-title-font-weight $font-weight-bold 标题字体粗细
--deg-title-line-height 1.5 标题行高
--deg-name-color $color-text-secondary 名称颜色
--deg-name-font-size $font-size-sm 名称字体大小
--deg-name-font-weight $font-weight-bold 名称字体粗细
--deg-name-line-height 1.5 名称行高
--deg-name-align center 名称对齐方式
--deg-champion-tag-color $color-surface-default 冠军标签颜色
--deg-champion-tag-font-size $font-size-xs 冠军标签字体大小
--deg-champion-tag-font-weight $font-weight-regular 冠军标签字体粗细
--deg-champion-tag-line-height 1.5 冠军标签行高
--deg-more-text-color $color-text-invert-default 更多成员文字颜色
--deg-more-text-font-size $font-size-xs 更多成员字体大小
--deg-more-text-font-weight $font-weight-regular 更多成员字体粗细

# 其他 (Others)

名称 默认值 描述
--deg-watermark-opacity .3 水印透明度
--deg-champion-tag-opacity .6 冠军标签透明度
--deg-champion-badge-opacity 1 冠军徽章透明度
--deg-logo-object-fit cover Logo图片填充方式
--deg-member-img-object-fit cover 成员图片填充方式

# 常见问题

# 如何切换视角类型？

通过 view-type 属性控制，设置为 team 显示战队视角（包含成员列表），设置为 personal 显示个人视角（不显示成员列表）。

# 成员头像显示不全怎么办？

可以通过调整 max-display-members 属性控制显示的成员数量，超出部分会显示 "+N" 的形式。

# 如何自定义水印文字？

水印文字目前固定为 "champion"，如需自定义可以通过 CSS 变量调整水印样式，或通过 custom-class 添加自定义样式。

# 如何修改冠军标签文字？

通过 champion-text 属性设置冠军标签的文字内容，默认为 "冠军"。

← MatchDocs →