Section

锚点导航区块

2 个模板实例,20 个 section 配置,1 类 block。

真实模板变体

Schema

{
  "name": "锚点导航区块",
  "settings": [
    {
      "type": "text",
      "id": "section_id",
      "label": "Section ID",
      "default": "anchor-blocks"
    },
    {
      "type": "header",
      "content": "布局设置"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "背景颜色",
      "default": "#FFFFFF"
    },
    {
      "type": "text",
      "id": "max_width",
      "label": "最大宽度",
      "default": "1400px"
    },
    {
      "type": "text",
      "id": "section_height",
      "label": "区块最小高度",
      "default": "100vh"
    },
    {
      "type": "checkbox",
      "id": "full_height",
      "label": "全屏高度",
      "default": true
    },
    {
      "type": "text",
      "id": "padding_top",
      "label": "顶部内边距",
      "default": "6.875rem"
    },
    {
      "type": "text",
      "id": "padding_bottom",
      "label": "底部内边距",
      "default": "6.875rem"
    },
    {
      "type": "text",
      "id": "grid_gap",
      "label": "网格间距",
      "default": "1.25rem"
    },
    {
      "type": "header",
      "content": "卡片样式"
    },
    {
      "type": "color",
      "id": "block_background_color",
      "label": "卡片背景色",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "block_text_color",
      "label": "卡片文字颜色",
      "default": "#FFFFFF"
    },
    {
      "type": "text",
      "id": "block_padding",
      "label": "卡片内边距",
      "default": "2rem"
    },
    {
      "type": "text",
      "id": "border_radius",
      "label": "圆角半径",
      "default": "1.25rem"
    },
    {
      "type": "header",
      "content": "字体设置"
    },
    {
      "type": "text",
      "id": "font_family",
      "label": "字体族",
      "default": "HarmonyOS Sans, sans-serif"
    },
    {
      "type": "text",
      "id": "title_font_size",
      "label": "标题字体大小",
      "default": "2rem"
    },
    {
      "type": "text",
      "id": "description_font_size",
      "label": "描述字体大小",
      "default": "1rem"
    },
    {
      "type": "color",
      "id": "title_color",
      "label": "标题颜色",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "description_color",
      "label": "描述颜色",
      "default": "#FFFFFF"
    }
  ],
  "blocks": [
    {
      "type": "anchor_block",
      "name": "锚点卡片",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "标题",
          "default": "功能标题"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "描述文字",
          "default": "功能描述文字"
        },
        {
          "type": "url",
          "id": "anchor_link",
          "label": "锚点链接",
          "info": "例如: #section-id"
        },
        {
          "type": "text",
          "id": "anchor_id",
          "label": "本页锚点ID(可选)",
          "info": "仅填写 ID,如 section-1;会生成 #section-1 跳转"
        },
        {
          "type": "image_picker",
          "id": "desktop_image",
          "label": "桌面端背景图片"
        },
        {
          "type": "image_picker",
          "id": "mobile_image",
          "label": "移动端背景图片"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "锚点导航区块",
      "blocks": [
        {
          "type": "anchor_block",
          "settings": {
            "title": "精准避障清洁",
            "description": "空间保持洁净,障碍物安然无恙。",
            "anchor_link": "#precision"
          }
        },
        {
          "type": "anchor_block",
          "settings": {
            "title": "全视野快速反应",
            "description": "双136°摄像头与双AI芯片。",
            "anchor_link": "#vision"
          }
        },
        {
          "type": "anchor_block",
          "settings": {
            "title": "实时清洁决策",
            "description": "目标识别,智能适应各种污渍。",
            "anchor_link": "#decision"
          }
        },
        {
          "type": "anchor_block",
          "settings": {
            "title": "12000Pa强劲吸力",
            "description": "硬质地面99%颗粒清除率。",
            "anchor_link": "#suction"
          }
        }
      ]
    }
  ]
}