外卖商品卡片参考

# 外卖商品卡片参考 — design.md

内容版本：sha256:d4b7ba293edea21d4a0a133cb78d36ed54429aacbf9b39b8c4b6ea2381d5ef3c

本文件由当前元数据、实现摘要和实际文件列表确定性生成。元数据记录是资料声明；未提供的数值不作推断。实现建议须在后续开发中选择和验收。

## 元数据记录

- 资产：components/food-card-layout；语义类型：component-reference。
- 分类：卡片。
- 标签：卡片布局、外卖APP。
- 场景：餐品列表、店铺菜单、推荐餐品展示。
- 平台：未提供。
- 风格：未提供。

### 亮点声明

- 图片主导：原图左侧以大幅商品照片为视觉中心，底部半透明信息条展示名称、容量与价格。
- 轻量操作：收藏按钮位于图片右上角，分类标签与底部导航使用圆角容器。

### 实际文件与参考资源

- `demo.html`（sha256:f041ee1132241afe3e36882e4602368483e6f76b0739491c807f94dde6ea40ee）
- `meta.yml`
- `refs/01.png`（sha256:454c634e1558977c7df7306efb7e8722dfcf2164d539c3dfc7a284bfc4d459b0）
- 参考图：`refs/01.png`；外卖 APP 原图：左侧商品图卡与分类标签，右侧配送地图。
- 实现摘要：sha256:f041ee1132241afe3e36882e4602368483e6f76b0739491c807f94dde6ea40ee。

## 未提供

- 未结构化记录的组件状态、数据模型和核心操作不作推断；原图或静态 HTML 不能证明收藏、选择、提交等行为可用。

## 实现建议

- 先核对原图中的图片、文字、信息层级和操作入口，区分来源事实与实现建议。
- 重新制作时明确使用的示例素材，实现与来源核心任务对应的真实状态变化，不能用循环标题代替。
- 验证键盘聚焦、触控、窄屏与错误状态后，再将新实现作为独立交互资产验收。