介绍

重做为清单看板和购物列表联动页面，首屏展示任务区、购物项和进度摘要。

技术栈

原生 HTML5 负责语义结构，CSS3 负责布局、皮肤和动画，JavaScript 负责滑块、按钮、切换与状态反馈。

软件架构

• `index.html` 组织标签切换、清单列表和进度摘要卡。
• `styles.css` 提供轻量清单视觉、状态标签和进度条布局。
• `script.js` 维护不同清单的数据源和勾选完成状态。

安装教程

1. 下载并解压 zip 压缩包。
2. 直接双击 `index.html` 即可本地预览。
3. 如需接入站点，可替换文案、颜色和数据后直接部署到静态空间。

使用说明

1. 点击上方标签切换采购、活动待办和居家整理三组清单。
2. 点击每一项左侧圆点切换完成状态。
3. 右侧摘要卡会同步刷新预算、优先级和完成进度。

功能讲解

• 首屏展示的是可操作的清单模板主体。
• 同一套壳支持多类列表数据切换。
• 完成进度和摘要信息会实时联动。