条后面加一道淡色的满宽底槽,读得出「离满格还差多少」;桌面图例补上「做出的题数」, 老师也看得到。手机上条本来就是整行底色,不动。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
eaab224ba8
commit
aba3767fc1
3 files changed
+23
-2
No files matched your search
@@ -239,7 +239,7 @@ function onMenu(key: string, row: RankRow) {
|
|||||||
</template>
|
</template>
|
||||||
{{ item.row.mood }}
|
{{ item.row.mood }}
|
||||||
</n-tooltip>
|
</n-tooltip>
|
||||||
<span class="bar-box">
|
<span class="bar-box" :style="{ background: palette.track }">
|
||||||
<span class="bar" :style="{ width: width(item.row), background: barColor(item.row) }" />
|
<span class="bar" :style="{ width: width(item.row), background: barColor(item.row) }" />
|
||||||
</span>
|
</span>
|
||||||
<span class="solved">{{ item.row.solved }}</span>
|
<span class="solved">{{ item.row.solved }}</span>
|
||||||
@@ -414,6 +414,7 @@ function onMenu(key: string, row: RankRow) {
|
|||||||
height: 16px;
|
height: 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 40px;
|
min-width: 40px;
|
||||||
|
border-radius: 2px 6px 6px 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar {
|
.bar {
|
||||||
|
|||||||
@@ -432,7 +432,12 @@ async function restore(userId: number) {
|
|||||||
<b>{{ title }}</b>
|
<b>{{ title }}</b>
|
||||||
<span class="muted">{{ subtitle }}</span>
|
<span class="muted">{{ subtitle }}</span>
|
||||||
<div class="spacer" />
|
<div class="spacer" />
|
||||||
<span v-if="(!teacher && me) || hot" class="legend">
|
<span v-if="isDesktop || (!teacher && me) || hot" class="legend">
|
||||||
|
<span v-if="isDesktop"
|
||||||
|
><i class="bar-key" :style="{ background: palette.track }"
|
||||||
|
><i :style="{ background: palette.bar }" /></i
|
||||||
|
>做出的题数</span
|
||||||
|
>
|
||||||
<template v-if="!teacher && me">
|
<template v-if="!teacher && me">
|
||||||
<span v-if="meListed"><i :style="{ background: palette.me }" />你</span>
|
<span v-if="meListed"><i :style="{ background: palette.me }" />你</span>
|
||||||
<span v-if="board.ahead"><i :style="{ background: palette.chase }" />前一名</span>
|
<span v-if="board.ahead"><i :style="{ background: palette.chase }" />前一名</span>
|
||||||
@@ -778,6 +783,16 @@ async function restore(userId: number) {
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 条的图例:底槽里一截条,和赛道上的条同一个样子 */
|
||||||
|
.legend .bar-key {
|
||||||
|
width: 24px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend .bar-key i {
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.empty {
|
.empty {
|
||||||
padding: 60px 0;
|
padding: 60px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@@ -13,6 +13,11 @@ export function useRankPalette() {
|
|||||||
threat: "#c76a12",
|
threat: "#c76a12",
|
||||||
mate: isDark.value ? "#2f6b47" : "#a8dcbd",
|
mate: isDark.value ? "#2f6b47" : "#a8dcbd",
|
||||||
bar: isDark.value ? "#4a525c" : "#c9d3dc",
|
bar: isDark.value ? "#4a525c" : "#c9d3dc",
|
||||||
|
/**
|
||||||
|
* 桌面上条后面那道满宽的底槽。没有它的话,大家题数一样时一列等长的灰色短条
|
||||||
|
* 像页面没加载完的占位块(2026-10 用户截图问「这是什么」)
|
||||||
|
*/
|
||||||
|
track: isDark.value ? "rgba(255,255,255,0.05)" : "#f1f4f7",
|
||||||
/** 手机上条是整行底色,要淡到字压在上面看得清 */
|
/** 手机上条是整行底色,要淡到字压在上面看得清 */
|
||||||
soft: {
|
soft: {
|
||||||
me: isDark.value ? "rgba(24,160,88,0.32)" : "#cdebd9",
|
me: isDark.value ? "rgba(24,160,88,0.32)" : "#cdebd9",
|
||||||
|
|||||||
Reference in new issue
Block a user