| 名称 | 响应式英文外贸化工能源机械设备通用网站模板 |
| 版本号 | V1.0 |
| 模板编号 | MB2058 |
| 发布时间 | 2026-09-22 12:11:46 |
| 更新时间 | 2026-09-22 16:02:59 |
| 安装平台 | Xunruicms |
| 依赖场景 | CMS建站系统大众版 表单系统 说明 |
| 版权说明 | 原创源码 |
| 模板终端 | 自适应 |
| 模板行业 | 环保-能源-化工-涂料 机械设备-工业制品 电子-电气-仪器-仪表 商业-贸易-进出口 |
| 源码加密 | 未加密 |
| 技术保障 | 第三方开发商源码由商家提供售后服务；官方自营和第三方供应商源码有官方提供售后服务。 |
| 支持浏览器 | Chromium内核浏览器、Chrome、Edge、Firefox、Safari、Opera等 |
功能介绍
一、站点结构总览
页面 | 文件 | 类型 | 核心内容 |
首页 |
| 门户页 | Banner 轮播、产品矩阵（8 个全展示）、公司简介、新闻（4 条） |
产品分类 |
| 列表页 | 分类 Pill 导航、产品网格（4 列）、分页 |
产品详情 |
| 详情页 | 图片画廊（主图+缩略图切换）、参数表、上下页导航、相关推荐（4 个） |
新闻列表 |
| 列表页 | 分类 Pill 导航、图文列表、分页 |
新闻详情 |
| 详情页 | 正文排版、浏览量/时间元信息、上一篇/下一篇、侧栏相关新闻 |
关于我们 |
| 单页 | 图文介绍 + 留言表单 |
常见问题 |
| 单页 | 分组手风琴 FAQ + 侧栏分类导航 + CTA |
联系我们 |
| 单页 | 4 张联系信息卡 + 留言表单 |
演示链接采用 /k532/?... 路径格式，可直接对接迅睿 CMS 模板标签输出。
二、全局功能模块
1. 顶部导航（PC 端）
- 吸顶毛玻璃 Header（滚动自动加阴影）
- 一级导航下划线居中生长动画
- 下拉菜单：渐显 + 上滑入场，子菜单项错峰浮现（stagger 动画）
- 三级菜单向右飞出
- 悬停下拉箭头自动旋转 180°
- 当前栏目高亮（蓝字 + 下划线）
2. 移动端导航
- Header 单行布局：Logo 居左、汉堡按钮居右
- 汉堡按钮三横线 ⇄ X 形变换动画
- 右侧滑出深色抽屉菜单（整页遮罩 + 毛玻璃背景）
- 菜单项错峰滑入；带子菜单的条目点击展开手风琴
- ESC / 点遮罩 / 点 X 均可关闭，关闭自动恢复滚动
3. 全屏搜索
- 顶部搜索按钮触发全屏深色遮罩搜索层
- 大字号输入框 + 下滑入场动画，ESC 关闭
4. 询盘系统（全站统一）
- 页脚 INQUIRY NOW、悬浮信封按钮、侧栏卡片按钮均可触发统一询盘弹窗
- 弹窗内容：姓名 / 邮箱 / 电话 / 留言 + 微信二维码
- 表单统一校验（main.js
.js-validate）：姓名必填、邮箱必填 + 格式正则
- 遮罩点击 / ESC / 旋转关闭按钮均可关闭
5. 悬浮工具
- 右下角圆形悬浮按钮组：返回顶部（滚动 400px 后出现）+ 快速询盘
6. 页脚
- 三栏：联系方式（字体图标）、订阅询盘入口、SOCIAL 社交图标
- SOCIAL 采用 FontAwesome 字体图标（本地 @font-face，6 个圆形图标，hover 渐变上浮）
- 深蓝底 + 原背景图叠加；底栏含备案号与 XML 地图链接
三、页面级功能
首页 index.html
区块 | 功能 |
Hero 轮播 | Swiper 自动播放（4.5s）、左右箭头（字体图标 ‹ ›）、进度条式分页器 |
PRODUCTS | 静态 4×2 网格全列 8 个产品，卡片 hover 上浮 + 图片放大 |
ABOUT | 背景固定视差 + 双图淡入轮播 + 右滑文案 |
NEWS | 4 张图文卡片（2×2），悬停上浮 |
产品详情 proshow.html
- 画廊：主图 + 4 缩略图，点击缩略图切换主图（带激活描边）
- 产品参数表（型号 / 功率 / 颜色 / 尺寸 / 重量）
- CONTACT NOW（唤起询盘弹窗）+ PDF 下载按钮
- 产品详情富文本区
- 上一页 / 下一页产品导航（对齐新闻详情约定）
- 相关推荐：静态一行 4 个
常见问题 faqs.html（布局重做）
- Hero 标题区 + 徽章
- 左侧 sticky 栏：分组导航（点击平滑滚动定位）+ 帮助卡片
- 右侧分组手风琴：单开模式，Q 图标变色、箭头旋转、高度平滑展开
- 底部渐变 CTA 横幅（引导联系页）
联系 / 关于
- 联系页：4 张信息卡（地址 / 邮箱 / 电话 / WhatsApp），图标悬停摆动
- 两页均内嵌完整留言表单（圆角输入框，聚焦发光）
四、交互动效体系
效果 | 实现方式 |
滚动渐入 |
|
按钮 | 全站 pill 圆角（999px），hover 上浮 + 阴影加深 |
卡片 | 悬停 translateY(-4~-8px) + 投影，图片 scale(1.08) |
分页器 / 分类 Pill | 圆角胶囊，当前项渐变高亮 |
五、SEO 与结构化数据
每页均内嵌 JSON-LD（@graph 双节点：Organization + 页面类型）：
页面 | Schema 类型 |
首页 | Organization + WebSite |
关于 | Organization + AboutPage |
产品分类 / 新闻列表 | Organization + CollectionPage（含 ItemList） |
产品详情 | Organization + Product（含 offers/brand/sku） |
新闻详情 | Organization + Article（headline/datePublished/author） |
FAQ | Organization + FAQPage（5 组 Q&A） |
联系 | Organization + ContactPage |
另含：TDK 三标签、favicon、语义化标签（header/nav/main/article/aside/footer）。
