投票助手皮肤

投票助手（ElementType.VoteAssistant）展示投票标题、状态（倒计时/进行中/已结束）、分割线和选项列表。选项支持滚动和非滚动（位次动画）两种模式。源码 src/components/DrawEl/el-vote-assistant.vue。

规范

直接写裸 CSS，不加任何外层选择器：写 .title { ... }、.option-item { ... } 即可，系统会自动把它 scope 到本皮肤。
别动 font-size：字号由面板控制，改了会错位。
背景按需透明：根容器默认有半透明底色，皮肤可覆盖。
动画：@keyframes 写在顶层、名字带本皮肤前缀以免撞名。
滚动由 JS 控制：开启滚动时用 Vue3Marquee 垂直循环，不要用 CSS 动画干扰。

DOM 结构

html

<div class="vote-assistant">
  <div class="title">今天玩啥游戏?</div>
  <div class="status-area">
    <span class="status-text status-running">02:30</span>
    <!-- 或 status-finished / status-paused -->
  </div>
  <div class="divider" />
  <div class="options-wrapper">
    <div class="options-list">
      <div class="option-item">
        <span class="option-index">1.</span>
        <img class="option-gift-icon" />  <!-- 仅礼物投票模式存在 -->
        <span class="option-name">王者荣耀</span>
        <span class="option-votes">5票</span>
      </div>
      <!-- 更多 option-item ... -->
    </div>
  </div>
</div>

类名	含义
`.vote-assistant`	根容器（背景 / 圆角 / padding）
`.title`	投票标题
`.status-area`	状态区域（倒计时 / 进行中 / 已结束 / 已暂停）
`.status-text`	状态文字
`.status-finished`	已结束状态（默认红色）
`.status-paused`	已暂停状态（默认橙色）
`.status-running`	进行中状态
`.divider`	分割线
`.options-wrapper`	选项列表外框（overflow hidden）
`.options-list`	选项列表容器
`.option-item`	单条选项
`.option-index`	序号
`.option-gift-icon`	礼物图标（仅礼物投票模式存在）
`.option-name`	选项名称
`.option-votes`	票数

示例

青色科技风：

css

.vote-assistant {
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(10, 30, 40, 0.92), rgba(5, 15, 25, 0.92));
  border: 1px solid rgba(30, 189, 188, 0.3);
}

.title {
  color: #1ebdbc;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(30, 189, 188, 0.5);
}

.status-text {
  color: #7fe5e0;
}

.divider {
  background: linear-gradient(90deg, transparent, rgba(30, 189, 188, 0.5), transparent);
}

.option-item {
  background: rgba(30, 189, 188, 0.06);
  border-radius: 8px;
  padding: 4px 10px;
}

.option-votes {
  color: #1ebdbc;
  font-weight: bold;
}

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

投票助手皮肤 ​

规范 ​

DOM 结构 ​

示例 ​

投票助手皮肤

规范

DOM 结构

示例