[优化建议] wide 主题 rank 模板底部蓝色卡片高度与 default 主题不一致

[This-is-XiaoDeng]

描述

在 ranking.html.jinja 模板中，当用户已注册（me 存在）时，底部会渲染一个蓝色卡片（bg-primary bg-opacity-50）用于显示当前用户的排名信息。

问题： wide 主题和 default 主题下，该蓝色卡片的高度表现不一致，原因如下：

1. .card-body padding 差异

• default 主题：未自定义 .card-body padding，使用 MDB 默认值（约 1.5rem / 24px）
• wide 主题：.card-body { padding: 12px; }，padding 减半

wide 主题的 .card 全局样式（border-radius: 0px; width: 100%; opacity: 87%;）和 .card-body { padding: 12px; } 会同时作用于蓝色卡片，导致其内部空间更紧凑，整体高度更低。

2. 负 margin 与 padding 交互不同

模板中 .myrank 设置了 margin-top: -15px; margin-bottom: -20px;，在两种主题不同的 padding 值下，视觉高度差异被进一步放大。

3. body padding-bottom 差异

• default 主题：body { padding: 20px; padding-bottom: 0px; }
• wide 主题：body { padding-top: 100px; }（无 padding-bottom）

这也会影响底部蓝色卡片与页面底部的间距。

涉及文件

• src/templates/ranking.html.jinja — 蓝色卡片定义
• src/templates/base/default.html.jinja — default 主题基础样式
• src/templates/base/wide.html.jinja — wide 主题基础样式（.card 和 .card-body 全局样式影响了蓝色卡片）

建议修复方向

1. 在 ranking.html.jinja 中为蓝色卡片添加独立的 CSS class，显式设置 padding 和 margin，避免被 wide 主题的全局 .card-body 样式覆盖
2. 或者在 wide 主题的 .card 样式中使用更精确的选择器（如 .card > .card-body），排除嵌套的 .card.bg-primary 子卡片

原因

• 修复后两种主题下底部蓝色卡片高度一致，提升跨主题的视觉统一性
• 避免 wide 主题的全局 .card / .card-body 样式意外影响排名模板中的嵌套卡片组件
• 改善用户体验，无论使用哪种主题都能获得一致的排名展示效果