石砌时代官网

工具地图案例ID：241566

Zelion

1 年经验· 高正发展科技有限公司

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

项目简介

这是一个基于 React 18 + TypeScript + Vite + Tailwind CSS 构建的专业企业官网。网站展示了砌砖建材公司的产品、案例和联系方式。

技术栈

- 前端框架：React 18
- 开发工具：Vite 5
- 编程语言：TypeScript
- 样式框架：Tailwind CSS 3
- 路由管理：React Router DOM 6
1. 首页（Home）

首页包含以下几个主要部分：

- Banner 轮播：自动轮播展示公司形象图片，共有 3 张轮播图
- 核心优势：展示品质保证、产能充足、专业团队、配送服务四大优势
- 产品速览：快速预览主要产品分类
- 标杆案例：展示精选工程案例

2. 关于我们（About）

"关于我们"页面包含三个标签页：

- 公司简介：公司介绍、发展历程、企业文化
- 企业荣誉：资质证书、AAA 信用、体系认证、荣誉牌匾
- 生产基地：厂区实景、生产线、研发中心实拍

3. 产品中心（Products）

产品中心页面功能：

- 产品分类：展示 10 大产品类别
- 承重砌块
- 装饰砌块
- 仿古砌块
- 复合保温砌块
- 水工砌块
- 土工砌块
- 隔声砌块
- 防火砌块
- 园林景观砌块
- 彩色混凝土路面砖
- 分类筛选：按类别快速筛选产品
- 产品详情弹窗：点击产品卡片可查看详细参数、性能、应用场景、图片

4. 经典案例（Cases）

案例展示页面功能：

- 案例分类：展示 5 大案例类别
- 建筑工程案例
- 高校项目案例
- 国企工业案例
- 市政园林案例
- 乡村文旅案例
- 分类筛选：按类别快速筛选案例
- 案例详情弹窗：查看案例详细信息和应用场景

5. 联系我们（Contact）

联系我们页面功能：

- 联系方式展示：地址、电话、邮箱、工作时间
- 地图导航：点击地图可选择导航软件打开导航
- 支持高德地图
- 支持百度地图
- 支持腾讯地图
- 支持 Google 地图
- 在线表单：可填写姓名、公司、电话、邮箱、留言
- 表单提交：支持验证、加载状态、成功提示