fix(成就): 题单奖章名字不再被截成「物联网专业…」；没有班级时「快拿到了」横排占满整宽
- 奖章名最长 9 个字，竖排格子只放得下 4 个，改成图标 + 全名横排、放不下就换行 - 老师、自己注册的号没有班级就没有「本班」，原来「快拿到了」只占左半边、右边空着 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
xuyueandClaude Opus 5.5 committed
1 parent
cbeb0737ef
commit
36f2a45c5e
3 files changed
+74
-51
No files matched your search
@@ -35,7 +35,7 @@ const showBadges = computed(() => props.group.name === "题单和比赛" && !!pr
|
||||
:to="{ name: 'problemset', params: { problemSetId: b.problemSet.id } }"
|
||||
class="badge"
|
||||
>
|
||||
<AchievementIcon :icon="b.badge.icon" :size="32" />
|
||||
<AchievementIcon :icon="b.badge.icon" :size="24" />
|
||||
<span>{{ b.badge.name }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
@@ -89,24 +89,19 @@ h3 small {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 奖章名最长 9 个字（「有趣和无趣的观察者」），竖排在格子里放不下，横排写全 */
|
||||
.badge {
|
||||
width: 72px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
text-align: center;
|
||||
color: v-bind("theme.textColor1");
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.badge span {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
gap: 6px;
|
||||
height: 34px;
|
||||
padding: 0 10px 0 6px;
|
||||
border-radius: 6px;
|
||||
font-size: var(--oj-fs-sec);
|
||||
white-space: nowrap;
|
||||
color: v-bind("theme.textColor1");
|
||||
background: v-bind("theme.actionColor");
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.compact {
|
||||
|
||||
@@ -5,8 +5,11 @@ import { useRarityColor } from "shared/composables/rarity"
|
||||
import type { Near } from "../series"
|
||||
import Medal from "./Medal.vue"
|
||||
|
||||
/** 「快拿到了」：每个只说还差什么，进度条底下是现在几 / 要几、本班几人有 */
|
||||
defineProps<{ items: Near[]; compact?: boolean }>()
|
||||
/**
|
||||
* 「快拿到了」：每个只说还差什么，进度条底下是现在几 / 要几、本班几人有。
|
||||
* `wide`：旁边没有「本班」（没有班级的号）时三个横着排，占满整宽
|
||||
*/
|
||||
defineProps<{ items: Near[]; compact?: boolean; wide?: boolean }>()
|
||||
|
||||
const theme = useThemeVars()
|
||||
const rarityText = useRarityColor()
|
||||
@@ -22,38 +25,40 @@ const percent = (item: Near) => Math.round((item.series.value / item.achievement
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="card" :class="{ compact }">
|
||||
<section class="card" :class="{ compact, wide }">
|
||||
<h3>快拿到了</h3>
|
||||
<div v-for="item in items" :key="item.achievement.id" class="item">
|
||||
<Medal
|
||||
:icon="item.achievement.icon"
|
||||
:rarity="item.achievement.rarity"
|
||||
:size="compact ? 44 : 48"
|
||||
state="off"
|
||||
:ring="item.series.value / item.achievement.threshold!"
|
||||
/>
|
||||
<div class="body">
|
||||
<div class="head">
|
||||
<b>{{ item.achievement.name }}</b>
|
||||
<span class="tag" :style="{ color: rarityText[item.achievement.rarity] }">
|
||||
{{ RARITY_LABEL[item.achievement.rarity] }}
|
||||
</span>
|
||||
<span class="remain">{{ item.remain }}</span>
|
||||
</div>
|
||||
<n-progress
|
||||
type="line"
|
||||
:percentage="percent(item)"
|
||||
:height="6"
|
||||
:show-indicator="false"
|
||||
:color="theme.primaryColor"
|
||||
:border-radius="3"
|
||||
:fill-border-radius="3"
|
||||
<div class="list">
|
||||
<div v-for="item in items" :key="item.achievement.id" class="item">
|
||||
<Medal
|
||||
:icon="item.achievement.icon"
|
||||
:rarity="item.achievement.rarity"
|
||||
:size="compact ? 44 : 48"
|
||||
state="off"
|
||||
:ring="item.series.value / item.achievement.threshold!"
|
||||
/>
|
||||
<div class="foot">
|
||||
<span>{{ now(item) }}</span>
|
||||
<span v-if="item.achievement.classHolders !== null">
|
||||
本班 {{ item.achievement.classHolders }} 人有
|
||||
</span>
|
||||
<div class="body">
|
||||
<div class="head">
|
||||
<b>{{ item.achievement.name }}</b>
|
||||
<span class="tag" :style="{ color: rarityText[item.achievement.rarity] }">
|
||||
{{ RARITY_LABEL[item.achievement.rarity] }}
|
||||
</span>
|
||||
<span class="remain">{{ item.remain }}</span>
|
||||
</div>
|
||||
<n-progress
|
||||
type="line"
|
||||
:percentage="percent(item)"
|
||||
:height="6"
|
||||
:show-indicator="false"
|
||||
:color="theme.primaryColor"
|
||||
:border-radius="3"
|
||||
:fill-border-radius="3"
|
||||
/>
|
||||
<div class="foot">
|
||||
<span>{{ now(item) }}</span>
|
||||
<span v-if="item.achievement.classHolders !== null">
|
||||
本班 {{ item.achievement.classHolders }} 人有
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -116,6 +121,20 @@ h3 {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.wide {
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.wide .list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.wide .item {
|
||||
border-top: 1px solid v-bind("theme.dividerColor");
|
||||
}
|
||||
|
||||
/* 手机：「还差什么」换到名字下面一行 */
|
||||
.compact {
|
||||
padding: 12px 14px 4px;
|
||||
|
||||
@@ -85,9 +85,14 @@ watch(name, load)
|
||||
<router-link v-if="other" to="/achievement" class="mine">看我的 ›</router-link>
|
||||
</div>
|
||||
|
||||
<!-- 只有一张（老师没有班级、或看别人）时也只占半边，别把进度条拉得一屏宽 -->
|
||||
<div v-if="near.length || data.classBoard" class="top">
|
||||
<NearCard v-if="near.length" :items="near" :compact="!isDesktop" />
|
||||
<!-- 没有班级（老师、自己注册的号）就没有「本班」，「快拿到了」三个横排占满整宽 -->
|
||||
<div v-if="near.length || data.classBoard" class="top" :class="{ alone: !data.classBoard }">
|
||||
<NearCard
|
||||
v-if="near.length"
|
||||
:items="near"
|
||||
:compact="!isDesktop"
|
||||
:wide="isDesktop && !data.classBoard"
|
||||
/>
|
||||
<ClassCard
|
||||
v-if="data.classBoard"
|
||||
:board="data.classBoard"
|
||||
@@ -177,6 +182,10 @@ h2 {
|
||||
margin-bottom: var(--oj-gap);
|
||||
}
|
||||
|
||||
.top.alone {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.columns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
|
||||
Reference in new issue
Block a user