礼物菜单皮肤

给礼物菜单换装只需写几条 CSS。源码 src/components/DrawEl/el-gift-menu.vue，内置皮肤 src/assets/data/skins/gift-menu.ts。

规范

直接写裸 CSS，不加任何外层选择器：写 .gift-item { ... }、.desc { ... } 即可，系统会自动把它 scope 到本皮肤，不影响其它皮肤。
根节点写 pointer-events: none;：礼物菜单纯展示，不接收任何鼠标交互。
别动 font-size：它和排版、图标尺寸绑定，改了会错位。字号交给用户在面板里调。
别给 .desc / .desc-wrap 设 width / max-width / overflow / text-overflow / white-space：长描述由内置跑马灯自动滚动，写死宽度或溢出会让跑马灯停止滚动、文字被截断。
别给文字设 line-height：描述外层是横向跑马灯（纵向 overflow 为 visible），自定义行高会让文字纵向溢出、冒出右侧滚动条。保持默认行高。
背景保持透明：整体不要加不透明底色；要底板就只加在 .gift-item 上。
图标大小用 .gift-icon 的 width / height 调：不写则跟随字号。
动画：@keyframes 写在顶层、名字带本皮肤前缀以免撞名；伪元素 ::before / ::after、渐变均可用。

DOM 结构

html

<div class="gift-menu">
  <!-- 水平布局 -->
  <div class="gift-list horizontal">
    <div class="gift-item">
      <img class="gift-icon" />
      <span class="size">x3</span>
      <span class="desc">礼物描述</span>
    </div>
  </div>

  <!-- 垂直布局：描述外多一层 .desc-wrap，其内部是横向跑马灯 -->
  <div class="gift-list vertical">
    <div class="gift-item">
      <img class="gift-icon" />
      <span class="size">x3</span>
      <div class="desc-wrap"><span class="desc">礼物描述</span></div>
    </div>
  </div>
</div>

类名	含义
`.gift-list.horizontal` / `.gift-list.vertical`	整个列表，水平横排 / 垂直竖排
`.gift-item`	一条礼物（一行），做卡片就加 `background` / `border` / `border-radius` / `box-shadow`
`.gift-icon`	礼物图标（原生 `<img>`，可写 `width` / `height` / `border-radius` / `filter`）
`.size`	数量文字，如 `x3`
`.desc`	礼物描述文字
`.desc-wrap`	垂直布局下描述的外层（仅垂直布局存在）

示例

粉色发光卡片：

css

.gift-menu {
  pointer-events: none;
}

.gift-item {
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(255, 120, 190, 0.18);
  border: 1px solid rgba(255, 160, 210, 0.5);
  box-shadow: 0 0 14px rgba(255, 120, 190, 0.35);
}

.gift-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  filter: drop-shadow(0 0 4px rgba(255, 160, 210, 0.8));
}

.desc,
.size {
  color: #ffd7eb;
  text-shadow: 0 0 8px rgba(255, 92, 184, 0.9);
}

源码 src/assets/data/skins/gift-menu.ts 里还有默认白字、霓虹粉、金色奢华、冰蓝、黑白描边几张内置皮肤，可照着改。

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

礼物菜单皮肤 ​

规范 ​

DOM 结构 ​

示例 ​

礼物菜单皮肤

规范

DOM 结构

示例