环保、光伏、公益,这三件事经常由同一家机构在做——做生态治理的顺带接光伏 EPC,做新能源的又挂着一个公益基金。绿诺这套模板不回避这种混合形态,它索性把三条线各自做成完整的内容集群:环境保护、太阳能与可再生能源、慈善公益,每条线都配了常规版、经典版、深色版、经典深色版四个版式,再加一个内容详情页。十二个版式页加三个详情页,三条业务线在同一个站里互不影响。
公益那条线还多给了捐赠列表与捐赠详情两页,带进度条和募款目标——这是纯环保模板通常不会做的部分。项目集、服务、团队、评价、博客四套列表排版这些常规模块也都齐全。
需要注意的是它基于 Bootstrap 5.0.2 构建,若要接入最新版 Bootstrap 的组件需自行升级。
这套结构同样适用于生态修复、环境检测、固废处理、碳资产管理、林业与湿地保护、乡村振兴项目……凡是「一家机构同时挂着商业业务与公益属性、需要分别面向甲方和公众说话」的组织都合用。
核心功能
环保、光伏、公益三条业务线各成集群,互不挤占首页位置
每条线配常规、经典、深色、经典深色四个版式,可按投放渠道选用
捐赠列表与捐赠详情带募款进度与目标金额,公益线可直接跑募款
项目集与项目详情配套,生态工程与光伏电站案例可分类陈列
服务与服务详情分层,绿色建筑、气候方案、废弃物回收各自成页
三步工作流程图,把从评估到落地的交付节奏讲清楚
团队与团队详情页,技术负责人的资历可单独建档
博客四套列表排版:双栏、网格、清单与常规,适配不同更新频率
页面与技术规格
30 个 HTML 页面,实测 387 个文件、22.7 MB
基于 Bootstrap 5.0.2,升级需自行处理
轮播由 Swiper 承担,GSAP 负责区块进场与视差
下拉选择走 Nice Select,捐赠与咨询表单在移动端样式统一
数字背书由 Counterup 配合 Waypoints 触发
文字跑马灯为 Marquee 实现,口号条不占额外纵向空间