AskaEth
bc8b1ee6c0
- M3 认证/权限/审计/限流 + 全部 REST 接口 - M4 管理面板（MIUIx + 成绩录入/积分榜下钻/大屏控制） - M5a 大屏页面（六页 + 明细覆盖层 + 缩放适配） - M6 WebSocket 实时同步中心 - M7 xlsx 导出 + 赛事包 zip + 备份 - 规则包 YAML 导入导出（差异预览） - 字体 vendor 子集化（4 套 x2 字重） - 集成：realtime/export/rules 接入 main+httpapi；backup 子命令 - 修复：中间件包装 ResponseWriter 丢失 Hijacker，导致 WS 握手 501
132 lines
3.0 KiB
Vue
132 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { fitRowFont } from '../../fitFont'
|
|
import { useScoreboard } from '../../useScoreboard'
|
|
import AnimatedNumber from '../AnimatedNumber.vue'
|
|
import PageFrame from '../PageFrame.vue'
|
|
|
|
const { athletes, settings } = useScoreboard()
|
|
|
|
const rows = computed(() => athletes.value)
|
|
const showMedals = computed(() => settings.value?.standings.showIndividualBoard ?? true)
|
|
|
|
const rowFont = computed(() => fitRowFont(rows.value.length, 560))
|
|
</script>
|
|
|
|
<template>
|
|
<PageFrame title="个人积分奖牌榜">
|
|
<div class="board" :class="{ 'no-medals': !showMedals }" :style="{ '--row-font': rowFont }">
|
|
<div class="row head">
|
|
<span>名次</span>
|
|
<span class="name">姓名</span>
|
|
<span class="team">单位</span>
|
|
<span class="points">总分</span>
|
|
<template v-if="showMedals">
|
|
<span class="medal gold">金</span>
|
|
<span class="medal silver">银</span>
|
|
<span class="medal bronze">铜</span>
|
|
</template>
|
|
</div>
|
|
<div v-for="row in rows" :key="row.athleteId" class="row">
|
|
<span class="rank" :class="`top-${Math.min(row.rank, 4)}`">{{ row.rank }}</span>
|
|
<span class="name">{{ row.athleteName }}</span>
|
|
<span class="team">{{ row.shortName ?? row.teamName }}</span>
|
|
<span class="points"><AnimatedNumber :value="row.totalPoints" /></span>
|
|
<template v-if="showMedals">
|
|
<span class="medal gold">{{ row.gold }}</span>
|
|
<span class="medal silver">{{ row.silver }}</span>
|
|
<span class="medal bronze">{{ row.bronze }}</span>
|
|
</template>
|
|
</div>
|
|
<div v-if="rows.length === 0" class="empty">暂无个人积分数据</div>
|
|
</div>
|
|
</PageFrame>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.board {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.row {
|
|
display: grid;
|
|
grid-template-columns: 130px 1fr 1fr 200px 110px 110px 110px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex: 1 1 0;
|
|
min-height: 0;
|
|
padding: 0 18px;
|
|
font-size: var(--row-font, 42px);
|
|
line-height: 1.1;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
|
}
|
|
.row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.no-medals .row {
|
|
grid-template-columns: 130px 1fr 1fr 220px;
|
|
}
|
|
.head {
|
|
flex: none;
|
|
font-size: 22px;
|
|
letter-spacing: 4px;
|
|
color: var(--text-dim);
|
|
border-bottom: 2px solid var(--primary-line);
|
|
}
|
|
.rank,
|
|
.medal,
|
|
.points {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.rank {
|
|
font-weight: 800;
|
|
}
|
|
.top-1 {
|
|
color: var(--gold);
|
|
}
|
|
.top-2 {
|
|
color: #d8e2ee;
|
|
}
|
|
.top-3 {
|
|
color: #e0995e;
|
|
}
|
|
.name,
|
|
.team {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.team {
|
|
color: var(--text-dim);
|
|
font-size: 0.82em;
|
|
}
|
|
.points {
|
|
text-align: right;
|
|
font-weight: 800;
|
|
color: var(--gold);
|
|
}
|
|
.medal {
|
|
text-align: center;
|
|
}
|
|
.gold {
|
|
color: var(--gold);
|
|
}
|
|
.silver {
|
|
color: #d8e2ee;
|
|
}
|
|
.bronze {
|
|
color: #e0995e;
|
|
}
|
|
.empty {
|
|
flex: 1;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 34px;
|
|
color: var(--text-dim);
|
|
}
|
|
</style>
|