1. 配置概览

本模块通过一个 JSON 配置块完成全部内容与配色的维护。JSON 放在组件顶部的：

<script type="application/json" class="ocma-spot-data"> ... </script>

主要字段：

• accent：整组组件的强调色（同时影响圆点、焦点环等）
• theme.buttons：三种按钮变体（primary/secondary/outline）的颜色主题
• slides：每一张幻灯片（标题、说明、背景图、按钮组）

2. 原始示例配置

{
  "accent": "#4f1973",
  "theme": {
    "buttons": {
      "primary":   { "bg": "#FB2056", "hover": "#ff4d7a", "active": "#cc0e43", "text": "#ffffff" },
      "secondary": { "bg": "#4b046f", "hover": "#6b0aa0", "active": "#3a0456", "text": "#ffffff" },
      "outline":   { "border": "#ffffffcc", "text": "#ffffff", "hoverBg": "#ffffff29", "activeBg": "#ffffff3d" }
    }
  },
  "slides": [
    {
      "title": "渥太华华人音乐节 2025",
      "subtitle": "百人合奏与青年演出同台 🎶",
      "image": "https://images.unsplash.com/photo-1511379938547-c1f69419868d?q=80&w=1600&auto=format&fit=crop",
      "buttons": [
        { "label": "🎫 立即购票", "url": "https://example.com/ticket", "variant": "primary" },
        { "label": "📖 查看推文", "url": "https://twitter.com/omic_event", "variant": "outline" }
      ]
    },
    {
      "title": "认识 OCMA 社区",
      "subtitle": "第一次来？了解我们的团队与活动。",
      "image": "https://images.unsplash.com/photo-1518779578993-ec3579fee39f?q=80&w=1600&auto=format&fit=crop",
      "buttons": [
        { "label": "📅 报名参加", "url": "https://example.com/register", "variant": "secondary" }
      ]
    },
    {
      "title": "认社区",
      "subtitle": "第一次来的团队与活动。",
      "image": "https://images.unsplash.com/photo-1518779578993-ec3579fee39f?q=80&w=1600&auto=format&fit=crop",
      "buttons": [
        { "label": "📅 报名参加", "url": "https://example.com/register", "variant": "secondary" },
        { "label": "📅 参加", "url": "https://example.com/register", "variant": "primary" }
      ]
    }
  ]
}

3. 如何改色（写法示例）

3.1 一键换主色（accent）

把 accent 改成你的品牌色：

- "accent": "#4f1973",
+ "accent": "#0ea5e9"

3.2 修改三种按钮主题

在 theme.buttons 中改颜色即可。比如把 primary 改成蓝色体系：

"theme": {
  "buttons": {
-   "primary":   { "bg": "#FB2056", "hover": "#ff4d7a", "active": "#cc0e43", "text": "#ffffff" },
+   "primary":   { "bg": "#2563eb", "hover": "#3b82f6", "active": "#1d4ed8", "text": "#ffffff" },
    "secondary": { "bg": "#4b046f", "hover": "#6b0aa0", "active": "#3a0456", "text": "#ffffff" },
    "outline":   { "border": "#ffffffcc", "text": "#ffffff", "hoverBg": "#ffffff29", "activeBg": "#ffffff3d" }
  }
}

注：

• bg/hover/active 控制底色的默认、悬浮、按下态；
• text 控制文字颜色；
• outline 还可设 border（描边）、hoverBg/activeBg（悬浮/按下时的半透明底色）。

4. 按钮变体切换（写法示例）

在每张 slide 的 buttons 里用 variant 指定变体：

{ "label": "报名", "url": "https://example.com/register", "variant": "secondary" }

将 secondary 改成 primary 或 outline 即可切换风格：

- { "label": "报名", "url": "https://example.com/register", "variant": "secondary" }
+ { "label": "报名", "url": "https://example.com/register", "variant": "primary" }

5. 单个按钮“特例配色”（可选）

如果只想让某一个按钮用特殊颜色（不影响其它按钮），可以在该按钮对象里加临时字段（组件已支持）：

{
  "label": "限量早鸟",
  "url": "https://example.com/earlybird",
  "variant": "primary",
  "color": "#f97316",        // 单独底色
  "textColor": "#111111",    // 单独文字色
  "borderColor": "#f97316"   // 单独描边色（仅 outline 有效）
}

6. 新增一张幻灯（写法示例）

在 slides 数组末尾追加一个对象即可：

{
  "title": "工作坊报名开启",
  "subtitle": "舞台走位与灯光入门 · 20人小班",
  "image": "https://images.unsplash.com/photo-1515165562835-c6fb13d47a8b?q=80&w=1600&auto=format&fit=crop",
  "buttons": [
    { "label": "📅 预约席位", "url": "https://example.com/workshop", "variant": "primary" },
    { "label": "详细介绍", "url": "https://example.com/details", "variant": "outline" }
  ]
}

7. 常见问题（写法）

• Q：圆角在哪里改？
  在 CSS 里全局变量 --r 控制：

  .ocma-spotlight{ --r: 18px; } /* 改成 24px/12px 等即可 */

  按钮是“胶囊”样式，圆角固定 border-radius: 9999px。如需方一点，可在 CSS 把 .cta 的圆角调小。

• Q：不想自动播放？
  在组件标签上把 data-autoplay="false"，或把 JS 里的 autoplay 改为 false。
• Q：我只想本页换个主色，其他页面不变？
  直接在该组件的外层标签加 data-accent="#xxxxxx" 即可；不会影响站点其他部分。