本项目基于猪八戒网真实比稿需求,为甘肃金昌市设计数字化公共图书馆的品牌首页。立项目标是打造一个集馆藏展示、文旅推广、资讯发布于一体的文化机构官网首页,同时支持 PC 与移动端浏览。
首页包含 6 个核心功能模块:Hero 品牌展示区(非对称分屏布局 + 双 CTA 入口)、馆藏分类导航(电子文献/数字图书/文艺作品/文旅资源四卡片 + 馆藏量标注)、精选推荐区(图文卡片展示重点馆藏)、金昌文旅叙事区(双栏展示本地旅游资源 + 景点标签 + 数据徽章)、数据亮点条(馆藏总量/数字化覆盖率等指标展示)、资讯快报与页脚区。
浏览动线从品牌认知 → 馆藏分类 → 精选内容 → 文旅叙事 → 数据背书 → 资讯收尾,形成完整的用户浏览路径。页面顶部导航栏包含首页/馆藏/文旅/资讯/关于五个入口,点击后以原生 JS 切换内容区域,无需刷新。
整体采用 React + Vite + Tailwind CSS 开发,TypeScript 类型检查 + ESLint 保证代码质量,最终交付物为纯静态 HTML 单文件,CSS/JS/Favicon 全部内联,双击即开无外部依赖。
我独立完成全流程:设计方向制定("书香入紫韵"理念,薰衣草紫 #8b67fb 配色体系)→ 视觉实现(CSS 自定义属性管理全局主题,Grid + Flexbox 三级响应式断点)→ 交付优化(Vite 构建产物因 file:// 协议 CORS 限制无法双击打开,排查后重写为内联静态单文件方案解决)。
响应式方面,PC 端多栏布局、平板两栏、移动端单栏堆叠 + 汉堡菜单,导航和页面切换用约 30 行原生 JS 实现,无需路由库。字体通过 Google Fonts CDN 加载,离线环境自动降级为系统字体,不影响布局。