一套面向企业官网、B2B 网站和产品型网站的响应式内容展示组件示例。
项目目前包含 4 组可独立复用的 Section，分别覆盖产品分类、流程与媒体展示、应用场景切换、新闻资讯列表等常见企业官网场景。所有组件均使用原生 HTML、CSS 和 JavaScript 实现，不依赖 jQuery、Swiper、Bootstrap 或其他第三方框架，可直接打开 index.html 运行，也便于后续拆分到 WordPress、PHP 模板或其他 CMS 中使用。
- 零构建流程：无需 npm、打包器或开发服务器，直接打开
index.html即可预览。 - 原生实现：HTML5 + CSS Grid / Flexbox + Vanilla JavaScript。
- 响应式设计：桌面端、平板端和手机端分别针对内容结构进行优化，而不是简单缩放。
- 组件作用域清晰：使用
#section01 ~ #section04限定 CSS，减少不同模块之间的样式污染。 - 命名简单统一：切换项统一采用
item01 / item02 / ...，方便搜索、复制和替换。 - 内容保留在 HTML 中：JavaScript 主要负责状态切换，不将核心正文写入 JS，更利于维护、SEO 和 CMS 迁移。
- 本地资源优先：SVG 占位图、MP4 视频均保存在本地目录，适合离线演示和私有项目使用。
- 交互克制：仅保留必要的 hover、focus、淡入和轻量位移动效，整体风格偏现代企业官网，而非纯视觉 Demo。
| Section | 组件类型 | 桌面端结构 | 手机端结构 |
|---|---|---|---|
#section01 |
产品与解决方案 | 左侧纵向 Tabs + 右侧图文详情 | Dropdown + 单列图文 |
#section02 |
流程控制 | 左右辅助图片 + 中央大视频 | 视频优先 + 2 × 2 图片网格 |
#section03 |
应用场景 | 左侧大图详情 + 右侧 2 × 3 场景入口 | 2 × 3 场景入口 + 下方详情 |
#section04 |
新闻资讯 | 双分类 Tabs + 3 × 2 新闻卡片 | 双 Tabs + 单列新闻卡片 |
四组组件采用不同布局，但共用同一套颜色、文字、圆角和交互规范，因此组合在同一个页面中时仍能保持统一的视觉语言。
section01 用于展示产品体系、业务分类、解决方案分类等内容。
- 左侧为纵向分类导航。
- 当前项使用品牌强调色突出显示。
- 右侧展示当前分类对应的标题、描述、CTA 和图片。
- 图文内容采用横向布局，适合产品与解决方案入口。
- 左侧纵向导航自动收起为 Dropdown。
- Dropdown 选项由 JavaScript 根据桌面端导航自动生成，因此分类名称只需要维护一份。
- 图文详情改为单列排列，避免在窄屏上强行保持双栏结构。
- 产品分类
- 产品体系
- 服务类别
- 行业解决方案
- 企业业务板块
section02 用于展示生产流程、质量控制、研发能力、工厂实力等需要图片与视频共同表达的内容。
使用 CSS Grid 构建 Mosaic Media Grid：
图片 01 核心视频 图片 03
图片 02 核心视频 图片 04
中央视频承担主要视觉内容，两侧图片用于补充流程节点或检测项目。
手机端重新排序为：
核心视频
图片 01 图片 02
图片 03 图片 04
这样可以继续突出视频，同时避免原始五块媒体连续单列导致页面过长。
section02 对视频播放进行了统一控制：
- 切换 Tab 前，当前视频立即暂停。
- 被隐藏 Panel 中的视频会重置到开头。
- 任意一个视频开始播放时，会自动暂停 Section 内其他视频。
- 同一时刻只允许一个视频播放，桌面端和手机端规则一致。
- 浏览器页面切到后台时，正在播放的视频自动暂停。
- 视频使用
playsinline，减少移动端被强制全屏播放的情况。 - 使用
preload="metadata"，避免页面初始加载时下载完整视频。
- 质量控制
- 生产流程
- 工厂制造能力
- 实验室检测
- 研发流程
- 企业实力展示
section03 用于展示同一产品在不同空间、行业或使用环境中的应用方式。
- 左侧为当前场景的大图、标题和描述。
- 右侧为 2 × 3 场景入口矩阵。
- 点击任意场景入口，左侧详情同步切换。
- Active 项使用品牌色，普通项保留轻量 hover / focus 状态。
手机端将场景入口移动到详情区域之前：
标题与说明
↓
2 × 3 场景入口
↓
当前场景详情
用户可以先选择场景，再查看对应的完整内容。
- 应用领域
- 使用空间
- 行业分类
- 项目类型
- 区域解决方案
- 案例分类入口
section04 用于公司新闻、行业新闻、博客、知识文章等内容入口。
当前设置两个分类：
item01 → 公司新闻
item02 → 行业新闻
顶部使用双 Tabs 切换不同文章组，Active 项通过品牌色下划线强调。
桌面端每个分类显示 3 × 2 共 6 张卡片。
每张卡片包含：
- 新闻标题
- 简短描述
点击查看 →CTA
为了保持卡片高度整齐：
- 标题最多显示 1 行，超出自动省略。
- 描述最多显示 2 行，超出自动截断。
- CTA 固定在卡片底部。
- 整张卡片均可点击。
桌面端：3 列
平板端：2 列
手机端：1 列
- 公司新闻
- 行业资讯
- 博客文章
- 技术知识库入口
- 媒体中心
- 最新动态
四个 Section 共用一套基础设计变量，集中定义在 css/style.css 顶部：
:root {
--brand: #651e7c;
--dark: #484848;
--ink: #202124;
--body-text: #4f5357;
--sub-text: #74787c;
--surface: #f5f5f5;
--surface-soft: #eef1f4;
--radius-sm: 4px;
--radius-md: 6px;
}- 品牌色：使用紫色
#651e7c作为 Active、CTA 和强调色。 - 深色 Section：统一使用
#484848。 - 浅色 Section：保持白色背景，通过浅灰内容区建立层级。
- 正文颜色：避免大面积纯黑，使用深灰提高长文本阅读舒适度。
- 圆角：只使用 4px / 6px 小圆角，保持 B2B 企业网站的克制感。
- 阴影：仅在新闻卡片和必要 hover 状态中使用轻量阴影。
- 动效：以 1~2px 位移、轻微缩放和短时淡入为主，不增加复杂装饰动画。
页面整体采用：
浅色 Section
↓
深色 Section
↓
浅色 Section
↓
深色 Section
形成稳定的明暗交替节奏。
project/
├── index.html
├── README.md
├── css/
│ └── style.css
├── js/
│ └── main.js
├── images/
│ ├── item01.svg
│ ├── item02.svg
│ ├── ...
│ ├── section02-item01-01.svg
│ ├── section02-item01-video.svg
│ ├── ...
│ └── section03-item06.svg
└── videos/
├── section02-item01.mp4
└── section02-item02.mp4
项目没有第三方依赖，也没有构建输出目录。
下载项目后直接打开：
index.html
即可查看完整效果。
如果通过本地 Web Server 预览，也可以使用 VS Code Live Server、PHP 内置服务器或其他静态服务器，但不是必须的。
每个独立组件统一使用：
<section id="section01">...</section>
<section id="section02">...</section>
<section id="section03">...</section>
<section id="section04">...</section>后续扩展时继续使用：
section05
section06
...
Section 内尽量使用简短、容易复用的类名，例如：
.wrap
.head
.title
.desc
.layout
.nav
.item
.tabs
.tab
.panel
.grid
.card
.media
.copy
CSS 通过 Section ID 限定作用域：
#section03 .item {
...
}因此即使不同 Section 中都存在 .item、.panel、.card，也不容易互相污染。
切换项统一使用：
item01
item02
item03
...
通过：
data-item="item01"
data-panel="item01"建立导航与内容之间的对应关系。
这种方式比把业务名称直接写进类名更容易复制、替换和扩展。
以场景组件为例，新建一个入口时保持 data-item 与 data-panel 一致：
<button class="item" data-item="item07">
新场景
</button>
<article class="panel" data-panel="item07" hidden>
...
</article>并添加对应资源：
images/section03-item07.svg
JavaScript 不需要为每一个业务名称单独编写判断逻辑。
当前 SVG 主要作为布局演示占位图，正式项目中建议直接替换为真实图片。
- 尽量统一图片构图与比例。
- 图文主视觉建议优先使用 16:9。
- 使用真实图片时可采用 WebP / AVIF，并保留 JPEG 作为兼容方案。
- 正式上线时请填写准确的
alt文本，而不是保留“占位图”等描述。
建议保持：
<video controls playsinline preload="metadata" poster="...">网页短视频可优先考虑：
- MP4 / H.264
- 16:9
- 控制码率与文件体积
- 使用独立 poster 封面
- 非必要不自动播放
section02 的暂停、重置和单视频播放逻辑已经写在 js/main.js 中，替换视频文件通常不需要修改 JavaScript。
js/main.js 将四个组件分别初始化：
initTabs() → section01
initMediaTabs() → section02
initSceneTabs() → section03
initNewsTabs() → section04
每个功能相互独立，主要负责：
- Active 状态切换
- Panel 显示 / 隐藏
- 手机 Dropdown 控制
- 视频播放状态管理
- ARIA 状态同步
核心内容仍保留在 HTML 中，因此未来如果某个 Section 不再需要，可以直接删除对应 HTML、CSS 和初始化代码，而不会影响其他 Section 的内容结构。
项目主要围绕以下宽度调整：
900px → 中等屏幕布局调整
768px → 进入手机 / 单列核心布局
420px → section01 极窄屏调整
360px → section02 / section03 极窄屏保护
断点并不是为了适配某一台具体设备，而是根据组件在不同内容宽度下是否仍然具有良好可读性来决定。
项目已经包含一些基础可访问性处理：
- 使用真正的
<button>作为 Tabs 和切换操作。 - 维护
aria-selected、aria-expanded等状态。 - 手机 Dropdown 支持
Escape关闭。 - 交互元素提供
:focus-visible状态。 - 视频保留浏览器原生 controls。
- 支持
prefers-reduced-motion: reduce，用户关闭动画偏好时减少过渡与淡入效果。
如果用于正式生产环境，还可以根据项目要求继续增强完整的 ARIA Tabs 键盘方向键导航。
这个项目更适合作为一套 可复制的企业官网前端组件基础，而不是要求整页原样使用。
实际应用时建议：
- 根据页面需求选择单独的 Section，而不是为了使用全部组件而全部加入。
- 替换所有
href="#"为真实页面地址。 - 将 SVG 占位图替换为正式图片。
- 优化真实图片尺寸、格式和加载策略。
- 根据企业品牌色修改
--brand，优先通过 CSS 变量统一调整。 - 在 WordPress 中让 PHP / Gutenberg / ACF / Meta Box 输出完整 HTML 数据，JavaScript 继续只负责交互。
- 新闻、产品等动态数据应由 CMS 输出，不建议在 JavaScript 中维护大量正文数据。
本项目刻意保持较轻的技术结构，后续维护建议继续遵循：
- 优先使用原生 CSS 和 JavaScript。
- 能通过 HTML / CSS 解决的问题，不额外引入第三方库。
- 每个 Section 保持独立作用域。
- 新组件继续使用
section05 / section06 ...编号。 - 通用颜色与圆角优先写入
:root变量。 - 不为了动画效果增加复杂结构。
- 桌面端和手机端尽量共用同一份 HTML 内容。
- 交互逻辑与业务内容分离。
这样既方便当前作为静态页面实验保存，也方便后期拆分到实际企业网站中长期使用。
- HTML5
- CSS3
- CSS Grid
- Flexbox
- CSS Custom Properties
- Responsive Design
- Vanilla JavaScript
- HTML5 Video
- SVG
无第三方运行时依赖。