金昌数字图书馆 — 响应式品牌官网首页

技术信息

语言技术
HTML5、CSS、JavaScript、React、ES6系统类型
Web行业分类
生活旅游、政务参考价格
1500

作品详情

行业场景

金昌市作为丝绸之路河西走廊重要节点城市，拥有丰富的馆藏文献和文旅资源，需要一个数字化展示平台。本项目为猪八戒网真实比稿需求，客户要求为金昌数字图书馆设计品牌首页，以薰衣草紫为主色调，适配 PC 与移动端浏览，突出馆藏电子化、数字化文献、图书、文艺作品及本地文旅资源展示。

功能介绍

首页包含 6 大功能板块：
① Hero 品牌展示区，非对称分屏布局呈现品牌定位与 CTA 入口；
② 馆藏分类导航，四卡片网格展示电子文献、数字图书、文艺作品、文旅资源四大门类及馆藏数量；
③ 精选推荐区，图文卡片重点推荐馆藏珍品；
④ 金昌文旅叙事区，双栏布局展示地方文化旅游资源介绍与景点标签；
⑤ 数据亮点条，展示馆藏总量、数字化覆盖率等关键指标；
⑥ 资讯快报与 Footer 页脚区。另含资讯页 Header（导航 + 面包屑 + 页面头图）。

项目实现

独立完成从设计哲学制定、视觉方向确定到代码实现的全流程。
技术栈采用 React + Tailwind CSS + Vite 脚手架开发，最终交付为纯静态 HTML 单文件，CSS/JS/Favicon 全部内联，零依赖双击即开。
实现要点：CSS 自定义属性管理薰衣草紫全局配色体系；CSS Grid + Flexbox 实现 PC 四栏 / 平板两栏 / 手机单栏三级响应式；原生 JS 实现移动端汉堡菜单与多页面切换路由。
设计层面通过 canvas-design 制定"Digital Codex"设计哲学，确保视觉不落俗套。