横幅皮肤

横幅（ElementType.Banner）是一条带边框图片框架的文字横幅，支持滚动。与其他组件不同，横幅的皮肤不仅有 CSS 作用域注入，还携带 skinLayout 结构化数据——框架图片、九宫格切片、内边距等都由它定义。源码 src/components/DrawEl/el-banner.vue，内置皮肤 src/assets/data/skins/banner.ts。

规范

• 直接写裸 CSS，不加任何外层选择器：写 .banner-text { ... } 即可，系统会自动把它 scope 到本皮肤。
• skinLayout 是结构化数据：框架图片 URL、九宫格切片、边框宽度、内容区内边距等都通过 skinData.skinLayout 传递，CSS 无法改变它们。
• 别动框架图片：.skin-layer 的 border-image 由 skinLayout 控制，不要用 CSS 覆盖。
• 文字样式可自由改：.banner-text 的颜色、描边、阴影、字重等都可以在皮肤 CSS 里覆盖。
• 动画：@keyframes 写在顶层、名字带本皮肤前缀以免撞名。

skinLayout 结构

横幅皮肤的 skinData 必须包含 skinLayout 字段：

interface BannerSkinLayout {
  image: string;        // 框架图片 URL（border-image 源图）
  skinHeight: number;   // 皮肤固定高度（不缩放时）
  minWidth: number;     // 皮肤内部最小宽度
  slice: [number, number, number, number];        // 九宫格切片 [上, 右, 下, 左]（原图像素）
  borderWidth: [number, number, number, number];  // 切片绘制宽度 [上, 右, 下, 左]（画布像素）
  contentPadding: [number, number, number, number]; // 文字区域内边距 [上, 右, 下, 左]
}

四元组顺序统一为 [上, 右, 下, 左]。

DOM 结构

<div class="banner">
  <div class="skin-layer">          <!-- 框架图片层（border-image） -->
    <div class="content">           <!-- 内容区域（内边距由 contentPadding 控制） -->
      <span class="banner-text">感谢大家的支持</span>
      <!-- 滚动模式：文字外包一层 OverflowMarquee -->
    </div>
  </div>
</div>

类名	含义
.banner	根容器（尺寸 / 缩放 / 裁剪）
.skin-layer	框架图片层（border-image 由 skinLayout 控制，pointer-events: none）
.content	内容区域（position: absolute，内边距由 contentPadding 控制）
.banner-text	横幅文字（内联）

示例

文字加发光描边：

.banner-text {
  color: #ffffff;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(255, 255, 255, 0.3);
}

skinLayout 的框架图片无法用 CSS 改变。要换框架图片，需要在上传皮肤时在 skinData.skinLayout 里声明新的图片 URL 和切片参数。

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