教育活动网站模板 | Edu Meeting – 视频首屏与会议分类

Edu Meeting 是一套面向校园讲座、教学研讨和培训活动的三页网站模板。它采用 Bootstrap 5，用视频首屏吸引注意，再通过会议列表和详情页说明时间、地点与活动内容。需要展示一批活动并引导访客咨询时，这种结构比较合适；报名、购票和参会账户仍需另行开发。

视频首屏与活动展示

首屏采用静音循环视频，叠加深色遮罩和白色文字；酒红色按钮与红色轮播卡片突出活动入口，后续以深色背景照片和白色会议卡片交替展开。这种布局适合有校园、课堂或团队活动影像的机构。如果主要展示静态课程目录，视频占据的首屏空间未必必要，可以对照 Mentor 的课程与讲师页面 后再选。

视频下方是五项特点轮播，课程区另有十二项示例，重复使用四张课程图片。桌面分别展示三项特点和四张课程卡，窄屏会减少到一项。课程区只展示图片、名称、星级与价格，没有独立课程介绍或购买页面；改作讲座站时，也可以把这一区域换成系列活动。

招生说明区提供四组折叠内容，一次展开一组，适合整理参与条件、活动安排或常见问题。页面靠后的数字会在滚动时从零增长到预设值，并非实时统计。旁边的播放图标连接到外部示例视频，与首屏本地 MP4 是两个入口，替换时需要分别处理。

活动分类与详情

首页先展示四张推荐会议卡片，通过“All Upcoming Meetings”进入有九张活动卡片的列表页。每张卡片展示日期、费用和摘要，点击图片或标题后进入详情。这三层内容分别位于 index.html、meetings.html 和 meeting-details.html。

列表分类由手工标签控制，不会自动判断活动日期。 Soon、Important、Attractive 分别对应卡片上的 soon、imp、att 类名，同一活动可以属于多个分类，现有三类各匹配四张卡片。新增活动时需同时维护内容和分类；下方页码为占位链接，没有加载更多活动的实现。

九张卡片目前都指向同一张详情页，页面不会根据点击对象切换内容。详情模板已经留出大图、标题、地址、说明、开放时间、地点和电话等位置，但多场活动要有不同详情，需要复制页面并逐一改链接，或自行接入内容系统。

详情中的“Book Now”只有示例电话，没有预约按钮或报名表。首页“Join Us Now”会滚动到联系区；联系表单虽有姓名、邮箱、主题和留言字段，却使用空 action，包内也没有邮件或报名接收端。页面中的日期、价格、电话和活动资料需要替换，报名与购票还需接入实际服务。

内容替换与运行检查

先对应活动资料

1. 在 meetings.html 中更新活动名称、日期、费用、缩略图和分类。
2. 为每场活动准备详情，逐一对应标题、地址、说明、开放时间、地点和电话，再修改列表链接。
3. 回到首页选择需要推荐的四场活动，同步卡片内容和跳转目标，避免仍然打开旧会议说明。

主样式在 assets/css/templatemo-edu-meeting.css，主要颜色为酒红色 #a12c2f、金黄色 #f5a425 和深灰色 #1f272b，字体通过在线服务加载 Poppins。照片、视频和图标位于 assets/images/，首屏本地视频为 course-video.mp4。换视频时应保留文字对比，并检查手机裁切与播放；页面靠后的外部示例视频也要单独替换。

再检查脚本与联系入口

这是直接使用 HTML、CSS 和 jQuery 的静态模板，没有 npm 构建步骤。保留 assets/、vendor/ 与三个 HTML 文件的相对位置，可通过本地静态服务预览；使用原始源码前，需要处理以下问题：

• HTML 引用了不存在的 bootstrap.bundle.min.js，包内实际是 Bootstrap 5.1.3 的 bootstrap.min.js，需要按所用组件修正引用。
• 插件存在混载：isotope.min.js 内含另一份 jQuery 和 Isotope 2，列表页又加载 Isotope 3.0.4。应保留一套 jQuery 与筛选插件，避免后加载的代码覆盖前面的实例。
• 滚动脚本会把普通页面链接当作区块选择器，并在没有统计区块的内页读取空目标；页面末尾还存在另一套重复滚动处理。调整导航时，应限定为有效的本页锚点，并处理目标不存在的情况。

本站演示副本已修正上述引用、插件混载和滚动问题，并加入手机内联视频支持；联系表单只在操作后提示未发送信息。原始源码保持原样。自行建站时，先确认三页跳转、分类和视频正常，再接入自己的联系投递服务，并逐一对应活动详情与报名渠道。