Press Next

# MatchResultItem 比赛结果项

比赛结果展示组件，用于展示比赛结果信息，包含结果标题、赛事封面、奖杯展示、操作按钮等功能。

# 引入

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

# 代码演示

# 基础用法

<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('很遗憾，未晋级');
const matchCover = ref('https://example.com/cover.jpg');
const matchName = ref('王者荣耀城市赛');
const tipText = ref('再接再厉，试试其他比赛吧~');
const primaryBtnText = ref('分享一下');
const secondaryBtnText = ref('报名其他比赛');

const handlePrimaryAction = () => {
  console.log('点击主要按钮');
};

const handleSecondaryAction = () => {
  console.log('点击次要按钮');
};
</script>

# 获胜状态（带奖杯）

<template>
  <PressMatchResultItem
    result-title="恭喜晋级！"
    :match-cups="cupImage"
    match-name="王者荣耀城市赛"
    tip-text="恭喜您获得冠军！"
    primary-btn-text="领取奖励"
    secondary-btn-text="继续挑战"
    @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('领取奖励');
};

const handleContinue = () => {
  console.log('继续挑战');
};
</script>

# 自定义按钮

<template>
  <PressMatchResultItem
    result-title="比赛结束"
    :match-cover="matchCover"
    match-name="春季联赛"
    tip-text="感谢您的参与！"
  >
    <template #ctrls-btn>
      <button 
        class="custom-btn secondary"
        @click="handleViewDetails"
      >
        查看详情
      </button>
      <button 
        class="custom-btn primary"
        @click="handleShare"
      >
        分享成绩
      </button>
    </template>
  </PressMatchResultItem>
</template>

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

const handleViewDetails = () => {
  console.log('查看比赛详情');
};

const handleShare = () => {
  console.log('分享比赛成绩');
};
</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>

# 完整示例

<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">切换到获胜状态</button>
      <button @click="switchToLose">切换到失败状态</button>
    </div>
  </div>
</template>

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

const winResult = {
  title: '恭喜获胜！',
  cover: '',
  cups: 'https://example.com/gold-trophy.png',
  matchName: '王者荣耀全国赛',
  tip: '您已成功晋级下一轮！',
  primaryBtn: '领取奖励',
  secondaryBtn: '继续比赛',
  customClass: 'win-style'
};

const loseResult = {
  title: '很遗憾，未晋级',
  cover: 'https://example.com/match-cover.jpg',
  cups: '',
  matchName: '王者荣耀全国赛',
  tip: '再接再厉，试试其他比赛吧~',
  primaryBtn: '分享一下',
  secondaryBtn: '报名其他比赛',
  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('领取奖励');
    // 调用奖励领取接口
  } else {
    console.log('分享结果');
    // 调用分享功能
  }
};

const handleSecondaryAction = () => {
  if (currentResult.value === winResult) {
    console.log('继续比赛');
    // 跳转到下一场比赛
  } else {
    console.log('报名其他比赛');
    // 跳转到比赛列表
  }
};
</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

参数 说明 类型 默认值
result-title 结果标题 string ''
match-cover 赛事封面图片 string ''
match-name 赛事名称 string ''
match-info 赛事信息 string ''
tip-text 提示文字 string ''
primary-btn-text 主要按钮文字 string 分享一下
secondary-btn-text 次要按钮文字 string 报名其他比赛
custom-class 自定义类名 string ''
match-cups 奖杯图片 string ''

# Events

事件名 说明 回调参数
primary-action 主要按钮点击时触发 -
secondary-action 次要按钮点击时触发 -

# Slots

名称 说明
ctrls-btn 自定义操作按钮区域

# 功能特性

# 核心功能

  • ✅ 结果展示：支持胜利/失败等不同结果状态展示
  • ✅ 奖杯显示：获胜时可显示奖杯图片，增强视觉效果
  • ✅ 赛事信息：展示赛事封面、名称等基本信息
  • ✅ 操作按钮：提供主要和次要操作按钮

# 视觉设计

  • 🎯 状态区分：通过奖杯/封面区分胜负状态
  • 🎯 背景装饰：支持自定义背景图片装饰
  • 🎯 响应式布局：适配不同屏幕尺寸

# 使用场景

  • 比赛结果页面
  • 游戏对战结果展示
  • 竞赛活动结果公布
  • 排行榜结果显示

# 主题定制

# CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式。

名称 默认值 描述
--pri-item-pt .5rem 默认内容与顶部间距
--pri-item-padding-lr $spacing-lg 默认内容与左右间距
--pri-cups-padding-lr $spacing-lg 奖杯左右间距
--pri-cups-pt 2rem 奖杯与内容间距
--pri-cups-mt -.5rem 奖杯于顶部距离
--pri-main-padding-lr $spacing-lg 主内容与左右间距
--pri-title-mb $spacing-lg 标题与内容间距
--pri-cover-mb $spacing-md 封面间距
--pri-name-mb $spacing-xs 比赛名称间距
--pri-info-mb $spacing-lg 赛事信息间距
--pri-tip-mb $spacing-lg 提示与内容间距
--pri-ctrls-gap $spacing-sm 按钮间距
--pri-item-width 6.02rem item宽度
--pri-item-height 7.5rem item高度
--pri-cups-width 2.32rem 奖杯宽度
--pri-cups-height 2.23rem 奖杯高度
--pri-cover-size 1.44rem 封面尺寸
--pri-title-color #ff8d00 标题颜色
--pri-name-color $color-text-primary 比赛名称颜色
--pri-info-color $color-text-secondary 赛事信息字体颜色
--pri-tip-color $color-text-invert-default 提示字体颜色
--pri-title-font-size $font-size-xl 标题字体大小
--pri-title-font-size-cups $font-size-xxl 奖杯标题字体大小
--pri-title-font-weight $font-weight-bold 标题字体粗细
--pri-name-font-size $font-size-md 比赛名称字体大小
--pri-name-font-weight 500 比赛名称字体粗细
--pri-info-font-size $font-size-md 赛事信息字体大小
--pri-tip-font-size $font-size-md 提示字体大小
--pri-cover-border-radius 0 赛事封面圆角
--pri-bg-pic url('...') 背景图片

# 自定义样式示例

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

# 主题色彩方案

<style>
/* 胜利主题 */
.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 {
  --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 {
  --pri-title-color: #bb86fc;
  --pri-name-color: #e0e0e0;
  --pri-tip-color: rgba(224, 224, 224, 0.7);
  --pri-cover-border-radius: .16rem;
}
</style>

← MatchRoundSetItem →