语言技术
CSS、JavaScript系统类型
Web行业分类
电商、教育校园
校园里的闲置流转长期是"消息一发就沉底"的状态：毕业季、换宿舍、课程结束后，大量还能用的教材、数码和生活用品被丢掉或堆着，低年级同学正好需要却不知道该找谁。问题不在没人愿意卖，而在信息没有沉淀——出闲置的消息在群里刷过去就翻不到，想买的人搜不到，想卖的人也不知道谁在找。
这个场景有三个很具体的特征：交易双方在同一所学校、步行可达；单笔金额低（几十到一两百），但对"能不能马上拿到"很敏感；成交靠同学之间的信任，而不是平台担保。这三点决定了它不适合照搬闲鱼、转转那类全国性平台——卖家要发货、买家要等，对"学期初买教材、学期末出教材"这种就近、低价、急用的需求太重。
本作品把校园闲置信息做成一个结构化的网页站点：分类、成色、交易地点、价格都是可筛选的字段，想找的人能直接筛到，想卖的人按固定格式发一条，别人就能搜到。站内商品、卖家与统计数据均为演示数据，不含真实交易。
共 6 个页面 + 1 套公共样式，覆盖"逛—看—发—管"的完整链路：
1. 首页：三张自动轮播横幅（可手动切换）、5 个分类入口（带在架数量）、热门与最新两组商品卡片流、数字滚动统计、三步交换说明。
2. 闲置列表：分类标签筛选、关键词搜索（带输入防抖）、四种排序（综合/最新/价格升降/人气）、"只看九成新以上"开关、结果计数与空状态提示；筛选条件写进网址参数，链接可以直接分享给同学。
3. 商品详情：动态面包屑、商品大图、原价与省下金额对比、成色/交易地点/发布时间/浏览量、卖家卡片（含本校认证标签）、收藏、联系卖家弹窗（一键复制微信号）、同类商品推荐。
4. 发布闲置：6 个字段的前端校验（必填、长度、价格区间），分类与成色单选，填了原价自动算出省多少，描述框带字数统计，提交后写入本地存储并跳转"我的"。
5. 我的：标签页切换"我的收藏 / 我发布的"，可取消收藏、可下架自己发布的商品。
6. 关于本站：建站目的、功能清单、技术说明、交易安全提示。
全站支持浅色/深色两套主题（初次打开跟随系统，手动切换后记住选择），顶部导航、面包屑、分类卡、商品卡、页脚链接、回到顶部构成完整的跳转闭环，桌面 / 平板 / 手机三档响应式。
我负责需求拆解、页面结构与交互流程设计、数据结构设计（5 个分类 + 14 件示例商品的字段模型），以及逐页验收：在 Chrome 和 Edge、桌面与 390px 手机宽度下逐页走查，复核时定位并修掉三处问题——详情页找不到商品时的空数据分支会报错、卡片上的收藏按钮被整卡链接盖住点不动、首页统计数字写死不会动。
技术上是原生 HTML5 语义化标签 + CSS3 自定义属性 + 原生 ES6，不引任何框架和第三方库：一套 CSS 变量同时驱动深浅两套主题；Flex/Grid 布局配媒体查询做三档响应式；用数组 filter/sort 实现筛选排序，用 URLSearchParams 读写筛选条件，用 localStorage 存收藏与"我发布的"内容（读写都有 try/catch 兜底），用事件委托统一处理全站收藏按钮。
整站零依赖零构建，双击 index.html 就能跑，也可以直接放到任意静态托管上给评审点开看。编码环节使用 AI 辅助生成，我负责复核、修正与验收。
评论