少儿舞蹈小程序（6）打造您的“活”名片：动态展示机构实力

[1 页面布局与样式（我们的优势）](#1 页面布局与样式（我们的优势）)
- [1.1 搭建布局框架](#1.1 搭建布局框架)
- [1.2 配置网格布局组件](#1.2 配置网格布局组件)
- [1.3 搭建卡片布局](#1.3 搭建卡片布局)
- [1.4 数据绑定](#1.4 数据绑定)
大功告成！

尊敬的校长，您好！

恭喜您，通过前几篇教程的辛勤付出，您的小程序首页已经拥有了专业的轮播图和功能齐全的"金刚区"导航。它就像您机构的"门面"，美观而实用。

但是，一个真正优秀的小程序不应止步于此。它需要注入"灵魂"，成为一个能够动态呼吸、随需而变的"活"系统。它不仅能展示静态信息，更能根据您的运营策略，灵活地向家长展示您最引以为傲的内容。

今天，我们将一起为这个小程序注入第一道"灵魂"------机构介绍模块。这不仅仅是一个简单的页面，它更像是您机构的"电子宣传册"。它将让家长在首页快速抓住您的品牌精髓，并通过一个简单的点击，无缝跳转到完整的"关于我们"页面，全面了解您机构的实力、优势和魅力所在。

1 页面布局与样式（我们的优势）

这个模块旨在用简洁的图文卡片，向家长清晰地展示您机构的核心亮点。其核心在于使用微搭的 Grid (网格布局) 组件，将所有优势卡片整齐地排列成两列。

1.1 搭建布局框架

外层容器 ：首先，在您已经搭建好的"机构简介"模块下方，拖入一个普通容器组件。它将作为"我们的优势"模块的整体框架，包含标题和所有优势卡片。

添加卡片样式 ：选中这个容器，在右侧的组件样式面板中，编写样式。这将为它添加一个白色的背景、圆角和阴影，使其看起来像一个独立的卡片。

bash 复制代码

:root {
  background: white;
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

添加标题 ：在这个容器内部，拖入一个普通容器 来承载标题。在容器内再拖入一个文本组件，将内容设置为"我们的优势"。同时，为了让标题更醒目，可以在标题旁边添加一个图标组件，例如一个星星图标。为了方便我们现在用emoj来替代图标

设置普通容器样式

bash 复制代码

:root {
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

网格布局组件 ：现在，从左侧的组件库中，搜索并拖入 "网格布局" 组件。这个组件就是专门用来实现您原型中两列布局的。

1.2 配置网格布局组件

设置列数 ：选中您拖入的 行组件 ，在右侧的属性面板中，找到 **列数量**属性，将其值设置为 2 。

然后点击向下添加行，再增加一行

1.3 搭建卡片布局

现在，我们来设计一个单独的优势卡片模板。卡片布局搭建好之后就可以复制粘贴到其余列里。

优势卡片容器 ：在您刚刚配置好的 列组件 内部，拖入一个普通容器。这就是单个优势卡片的模板。

添加样式：选中这个容器，在组件样式中粘贴样式。

css 复制代码

:root {
  text-align: center;
  padding: var(--spacing-lg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-base);
  transition: all 0.3s ease;
}

添加内容组件：在优势卡片容器内部，从组件库中依次拖入以下组件：

一个图标组件，用于展示优势图标（这里我们先用文本组件用emoj替代）。
一个文本组件，用于展示优势标题。
一个文本组件，用于展示优势描述。

给组件添加样式：选中每个组件，在组件样式中分别粘贴样式代码，以确保字体大小、颜色和间距与原型图完全一致。

图标样式

css 复制代码

:root {
  font-size: 18px;
  margin-bottom: var(--spacing-sm);
}

标题样式

css 复制代码

:root {
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

描述样式

css 复制代码

:root {
  font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

到这里，您的"我们的优势"模块的布局和样式就全部搭建好了。接下来，我们将进行最关键的数据绑定步骤，让页面真正"活"起来。

1.4 数据绑定

给标题文本组件，绑定文本内容，从API中绑定标题字段

给描述文本组件，绑定文本内容，从API中绑定描述字段

然后将卡片布局复制到其余的三列里

其余列，只需要修改数组的索引即可

大功告成！

点击右上角的"预览"按钮，您会看到一个令人兴奋的改变：您的"我们的优势"模块不再是静态的图片，而是能够动态地展示您在后台维护的每一项机构优势。

通过今天的学习，您已经掌握了：

网格布局（Grid）：如何使用微搭的网格组件，实现精确、美观的两列布局。
模块化搭建：将一个复杂模块拆分为外层容器、标题和内容网格，并逐一进行样式和布局的配置。
列表数据绑定：通过数组索引，将后台API返回的列表数据精确地绑定到前端的每一个组件上。

在下一篇教程中，我们将继续完善"关于我们"页面，为它添加"机构数据"和"师资团队"模块。我们下期见！

少儿舞蹈小程序（6）打造您的“活”名片：动态展示机构实力

目录

1 页面布局与样式（我们的优势）

1.1 搭建布局框架

1.2 配置网格布局组件

1.3 搭建卡片布局

1.4 数据绑定

大功告成！