fix(排名): 手机上的排名不再是四屏长的一栏，条变成每行底色、只列你附近几行，下面四块收成页签

- 条形改成整行的底色：窄屏上原来只剩 30px 宽的条看不出谁多谁少
- 默认只列领奖台下的前 5 行和你上下各 2 行，「看全班 39 人」点开；本年级 / 全服折起来的段点开再取全量
- 「你」那张卡：对手的说明换到名字下面一行，不再被截断
- 范围、时间两组开关各占满一行；班级对抗、名次走势、这周本班、每周冠军收成一张页签卡
- 有「追你」标签的那行数字不再错位

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/oj/rank/components/ClassBattle.vue

@@ -8,7 +8,13 @@ import { useRankPalette } from "../palette"
  * 班级对抗：全服各班这学期人均做对，绿字是这周人均涨了多少。按人均比，因为班级人数从
  * 十来个到五十几个都有。列前 7 个班，自己的班不在里面就补在最后。
  */
-const props = defineProps<{ items: ClassBattleItem[]; mine: string | null; teacher?: boolean }>()
+const props = defineProps<{
+  items: ClassBattleItem[]
+  mine: string | null
+  teacher?: boolean
+  /** 放在手机页签卡里：不要自己的边框和标题 */
+  bare?: boolean
+}>()
 
 const theme = useThemeVars()
 const palette = useRankPalette()
@@ -44,9 +50,9 @@ function shortLabel(className: string) {
 </script>
 
 <template>
-  <div class="battle">
+  <div class="battle" :class="{ bare }">
     <div class="title">
-      <b>班级对抗</b><span class="muted">人均做对 · 全服 · 绿字是这周涨的</span>
+      <b v-if="!bare">班级对抗</b><span class="muted">人均做对 · 全服 · 绿字是这周涨的</span>
     </div>
     <div
       v-for="item in shown"
@@ -84,6 +90,12 @@ function shortLabel(className: string) {
   background: v-bind("theme.cardColor");
 }
 
+.battle.bare {
+  padding: 0;
+  border: 0;
+  background: none;
+}
+
 .title {
   display: flex;
   align-items: baseline;