点赞榜皮肤

点赞榜（ElementType.LikeRank）展示直播间的点赞排行榜，由标题、榜单列表（排名 + 头像 + 昵称 + 点赞数）组成，支持列表滚动。源码 src/components/DrawEl/el-like-rank.vue。

规范

直接写裸 CSS，不加任何外层选择器：写 .header { ... }、.rank-item { ... } 即可，系统会自动把它 scope 到本皮肤。
别动 font-size：头像尺寸跟随字号缩放，改了会错位。
背景按需透明：根容器默认有半透明底色（backgroundColor），皮肤可覆盖。
动画：@keyframes 写在顶层、名字带本皮肤前缀以免撞名；伪元素 ::before / ::after、渐变均可用。
滚动由 JS 控制：列表超出时自动滚动，不要用 CSS 动画干扰 transform: translateY()。

DOM 结构

html

<div class="like-rank">
  <div class="header">点赞榜</div>
  <div class="rank-container">
    <!-- 空状态 -->
    <div class="rank-empty-tip">收集点赞中~</div>
    <!-- 或：有数据 -->
    <div class="rank-wrapper">
      <div class="rank-list">
        <div class="rank-item">
          <span class="rank-index">1</span>
          <img class="rank-avatar" />
          <span class="rank-nickname">昵称</span>
          <span class="rank-like">999</span>
        </div>
        <!-- 更多 rank-item ... -->
      </div>
      <!-- 滚动时复制一份用于无缝循环 -->
      <div class="rank-duplicate"> ... </div>
    </div>
  </div>
</div>

类名	含义
`.like-rank`	根容器（背景 / 圆角 / padding 都在这层）
`.header`	标题文字
`.rank-container`	榜单区域外框
`.rank-wrapper`	滚动视窗（overflow hidden）
`.rank-list`	榜单列表（纵向排列）
`.rank-item`	单条榜单位（排名 + 头像 + 昵称 + 点赞数）
`.rank-index`	排名数字
`.rank-avatar`	头像（圆形）
`.rank-nickname`	昵称
`.rank-like`	点赞数
`.rank-empty-tip`	无数据时的提示文字
`.rank-duplicate`	滚动时复制的第二份数据（无缝循环用）

示例

金色高光榜单位：

css

.like-rank {
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(40, 30, 10, 0.92), rgba(20, 15, 5, 0.92));
  border: 1px solid rgba(255, 200, 80, 0.3);
}

.header {
  color: #ffd700;
  font-weight: bold;
  text-shadow: 0 0 12px rgba(255, 200, 80, 0.6);
}

.rank-item {
  background: rgba(255, 200, 80, 0.08);
  border-radius: 8px;
  padding: 4px 8px;
}

.rank-index {
  color: #ffd700;
}

.rank-nickname {
  color: #fff;
}

.rank-like {
  color: #ff6b6b;
  text-shadow: 0 0 8px rgba(255, 100, 100, 0.5);
}

想偷懒？用 AI 帮你写皮肤一键生成带规范的提示词。

点赞榜皮肤 ​

规范 ​

DOM 结构 ​

示例 ​

点赞榜皮肤

规范

DOM 结构

示例