Skip to content
双端兼容 · 桌面 + 移动

Section 区块

EwSection 定义官网的区块头:「大写眉题 + 细字重大标题 + 描述」。它统一了页面的区块节奏—— 眉题小而安静(大写字距拉开),标题与 Hero 用同一套细字重展示体,长页面因此保持一致的节奏。

基础用法

眉题 + 标题 + 描述 + 主体
眉题会自动转为大写并拉开字距,中文眉题保持字距效果。
功能

让团队的知识流动起来

从个人笔记到团队空间,一段话讲清楚这个区块要传达的价值。

← 主体内容插槽
vue
<EwSection eyebrow="功能" title="让团队的知识流动起来" description="…">
  <FeatureGrid :items="features" />
</EwSection>

居中对齐

center 形态
定价、FAQ 等需要聚焦的区块用居中形态。
pricing

选择适合你的方案

居中形态适合定价、FAQ 等区块。

vue
<EwSection title="选择适合你的方案" align="center" />

区块节奏

组件自带 96px 的底部外边距形成呼吸感;需要压缩时用 gap 属性覆写。 所有区块内部建议再配合 EwContainer(或内置容器的组件)对齐。

API

Props

属性说明类型默认值
eyebrow眉题(自动大写字距拉开)string
title标题string
description描述string
align对齐'left' | 'center''left'
gap底部留白 px(覆写默认节奏)string / number

插槽

插槽说明
eyebrow眉题覆写
title标题覆写
description描述覆写
default区块主体

基于 MIT 许可证发布