目录
- [1 页面布局与样式（联系方式）](#1 页面布局与样式（联系方式）)
-
- [1.1 搭建布局框架](#1.1 搭建布局框架)
- [1.2 搭建单个联系方式的布局](#1.2 搭建单个联系方式的布局)
- [1.3 为组件添加样式](#1.3 为组件添加样式)
- [1.4 复制并绑定数据](#1.4 复制并绑定数据)
- 大功告成！
尊敬的校长，您好！
恭喜您，通过前几篇教程的辛勤付出，您的小程序首页已经拥有了专业的轮播图和功能齐全的"金刚区"导航。它就像您机构的"门面"，美观而实用。
但是，一个真正优秀的小程序不应止步于此。它需要注入"灵魂"，成为一个能够动态呼吸、随需而变的"活"系统。它不仅能展示静态信息，更能根据您的运营策略，灵活地向家长展示您最引以为傲的内容。
今天，我们将一起为这个小程序注入第一道"灵魂"------机构介绍模块。这不仅仅是一个简单的页面，它更像是您机构的"电子宣传册"。它将让家长在首页快速抓住您的品牌精髓，并通过一个简单的点击，无缝跳转到完整的"关于我们"页面，全面了解您机构的实力、优势和魅力所在。
1 页面布局与样式（联系方式）
现在，我们来搭建"关于我们"页面的最后一个关键模块------联系方式 。这个模块将为您的潜在客户提供所有必要的联系信息，如电话、地址和营业时间，确保他们能轻松找到您。
1.1 搭建布局框架
外层容器：首先，在您已经搭建好的"我们的优势"模块下方，拖入一个普通容器组件。它将作为整个"联系方式"模块的容器。
添加卡片样式 ：选中这个容器，在右侧的组件样式面板中，编写样式。这将为它添加白色的背景、圆角和阴影，使其成为一个独立的卡片。
css
:root {
background: white; /* 设置背景色为白色 */
border-radius: var(--border-radius-lg); /* 添加大的圆角，使卡片边缘更柔和 */
padding: var(--spacing-lg); /* 增加内边距，让卡片内部内容不紧贴边缘 */
margin-bottom: var(--spacing-lg); /* 增加底部外边距，与其他模块保持距离 */
box-shadow: var(--shadow-sm); /* 添加轻微的阴影，使卡片有浮动感 */
}添加标题：在这个容器内部，拖入一个普通容器来承载标题。再在容器内拖入一个文本组件，将内容设置为"📞 联系方式"。
设置标题样式 ：选中包含标题和图标的这个普通容器，在组件样式中粘贴以下代码。
css
: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 布局，使图标和文本左右对齐。
css
: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 为组件添加样式
为了让每个组件都符合原型设计，请按照以下步骤分别进行样式设置。
图标样式：选中代表图标的文本组件，在组件样式中粘贴代码。
css
: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; /* 设置字体大小 */
}文本样式：选中承载标题和值的普通容器，在组件样式中粘贴代码。
css
:root {
flex: 1; /* 占据剩余所有空间，让其右侧对齐 */
}标签样式：选中表示"客服电话"的文本组件，在组件样式中粘贴代码。
css
:root {
font-weight: bold; /* 设置字体加粗 */
color: var(--text-primary); /* 设置字体颜色为主色 */
margin-bottom: var(--spacing-xs); /* 增加底部外边距，与下方的值隔开 */
}值样式：选中表示电话号码的文本组件，在组件样式中粘贴代码。
css
:root {
color: var(--text-secondary); /* 设置字体颜色为次要色 */
font-size: var(--font-size-sm); /* 设置字体大小为小号 */
}1.4 复制并绑定数据
现在，您可以直接复制这个完整的容器，并粘贴三次。
- 修改图标：分别将复制出来的条目中的图标文本修改为"📧"、"📍"和"🕒"。
- 修改文本 ：将标签和值修改为对应的邮箱、地址和营业时间。
数据绑定：
- 选中每一个"值"文本组件，在**"数据源"**中找到并绑定到您的API查询（例如
query1.data.data.institution）中对应的字段。例如，电话绑定到contact_phone，地址绑定到address等。
大功告成！
点击右上角的"预览 "按钮，您会看到一个令人兴奋的改变：您的"联系方式"模块不再是静态的图片，而是能够动态地展示您在后台维护的每一项联系信息。
通过今天的学习，您已经掌握了：
- 灵活布局：使用 Flex 布局实现图标和文本的对齐。
- 组件复用：通过复制粘贴，高效地搭建相似的模块，并修改内容。
- 精确数据绑定：将后台API返回的数据精确地绑定到前端的每一个组件上。
在下一篇教程中，我们将继续完善"关于我们"页面，为它添加"机构数据"和"师资团队"模块。我们下期见！