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

尊敬的校长，您好！

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

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

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

---

1 页面布局与样式（联系方式）

现在，我们来搭建“关于我们”页面的最后一个关键模块——联系方式。这个模块将为您的潜在客户提供所有必要的联系信息，如电话、地址和营业时间，确保他们能轻松找到您。

1.1 搭建布局框架

外层容器：首先，在您已经搭建好的“我们的优势”模块下方，拖入一个普通容器组件。它将作为整个“联系方式”模块的容器。

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

:root {background: white; /* 设置背景色为白色 */border-radius: var(--border-radius-lg); /* 添加大的圆角，使卡片边缘更柔和 */padding: var(--spacing-lg); /* 增加内边距，让卡片内部内容不紧贴边缘 */margin-bottom: var(--spacing-lg); /* 增加底部外边距，与其他模块保持距离 */box-shadow: var(--shadow-sm); /* 添加轻微的阴影，使卡片有浮动感 */
}

添加标题：在这个容器内部，拖入一个普通容器来承载标题。再在容器内拖入一个文本组件，将内容设置为“📞 联系方式”。

设置标题样式：选中包含标题和图标的这个普通容器，在组件样式中粘贴以下代码。

:root {font-weight: bold; /* 设置字体加粗 */color: var(--text-primary); /* 设置字体颜色为主色，让它更醒目 */margin-bottom: var(--spacing-lg); /* 增加底部外边距，与下方联系信息列表隔开 */font-size: var(--font-size-lg); /* 增大字体尺寸 */display: flex; /* 启用Flex布局，让子组件（文本和图标）在一行内排列 */align-items: center; /* 垂直居中对齐子组件 */gap: var(--spacing-sm); /* 设置子组件之间的间距 */
}

1.2 搭建单个联系方式的布局

现在，我们将设计一个单独的联系方式条目，这个条目可以被重复使用。

外层容器：在标题下方，拖入一个普通容器。这个容器将作为单个联系方式的模板，如“客服电话”。

设置容器样式：选中这个容器，在组件样式中粘贴以下代码。这个样式将使用 Flex 布局，使图标和文本左右对齐。

:root {display: flex; /* 启用Flex布局，让子组件（图标和文本容器）在一行内排列 */align-items: center; /* 垂直居中对齐子组件 */gap: var(--spacing-base); /* 设置子组件之间的间距 */padding: var(--spacing-base) 0; /* 设置上下内边距，增加垂直空间 */border-bottom: 1px solid var(--border-color); /* 添加底部边框线，分隔每一条联系方式 */
}

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

• 一个文本”组件作为图标，内容设置为“📞”。
• 一个普通容器，用于承载右侧的标签和值。
• 在第二个普通容器内部，再拖入两个文本组件，分别用于显示客服电话和具体的号码。
  

1.3 为组件添加样式

为了让每个组件都符合原型设计，请按照以下步骤分别进行样式设置。

图标样式：选中代表图标的文本组件，在组件样式中粘贴代码。

:root {width: 40px; /* 设置宽度 */height: 40px; /* 设置高度，与宽度一致，形成正方形 */border-radius: 50%; /* 设置圆角为50%，将正方形变为圆形 */background: var(--primary-light); /* 设置背景色为浅色 */color: var(--primary-color); /* 设置图标颜色为主色 */display: flex; /* 启用Flex布局 */align-items: center; /* 垂直居中对齐图标 */justify-content: center; /* 水平居中对齐图标 */font-size: 18px; /* 设置字体大小 */
}

文本样式：选中承载标题和值的普通容器，在组件样式中粘贴代码。

:root {flex: 1; /* 占据剩余所有空间，让其右侧对齐 */
}

标签样式：选中表示“客服电话”的文本组件，在组件样式中粘贴代码。

:root {font-weight: bold; /* 设置字体加粗 */color: var(--text-primary); /* 设置字体颜色为主色 */margin-bottom: var(--spacing-xs); /* 增加底部外边距，与下方的值隔开 */
}

值样式：选中表示电话号码的文本组件，在组件样式中粘贴代码。

:root {color: var(--text-secondary); /* 设置字体颜色为次要色 */font-size: var(--font-size-sm); /* 设置字体大小为小号 */
}

1.4 复制并绑定数据

现在，您可以直接复制这个完整的容器，并粘贴三次。

• 修改图标：分别将复制出来的条目中的图标文本修改为“📧”、“📍”和“🕒”。
• 修改文本：将标签和值修改为对应的邮箱、地址和营业时间。
  

数据绑定：

• 选中每一个“值”文本组件，在**“数据源”**中找到并绑定到您的API查询（例如 query1.data.data.institution）中对应的字段。例如，电话绑定到 contact_phone，地址绑定到 address 等。

---

大功告成！

点击右上角的“预览”按钮，您会看到一个令人兴奋的改变：您的“联系方式”模块不再是静态的图片，而是能够动态地展示您在后台维护的每一项联系信息。

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

1. 灵活布局：使用 Flex 布局实现图标和文本的对齐。
2. 组件复用：通过复制粘贴，高效地搭建相似的模块，并修改内容。
3. 精确数据绑定：将后台API返回的数据精确地绑定到前端的每一个组件上。

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