现代便当盒网格布局产品展示设计

现代 Bento 网格布局产品展示设计，采用磨砂亚克力透明玻璃材质。适用于任何产品类型（食物/药品/科技产品/元素等）。

【布局结构】8 个模块，非对称 Bento 网格排列，横向 landscape 格式：

**模块 1：【3D 玻璃产品主体展示】**（中等尺寸 1x1，占 20-25% 空间）
- 3D 透明玻璃/亚克力材质的 [产品名称] 雕塑
- [产品特色]:
  * 食物 → 展示切面/内部结构（如番茄种子腔室、胡萝卜横切面）
  * 药品 → 药片/胶囊的透明玻璃形态
  * 科技产品 → 产品外观的玻璃艺术化呈现
- 材质效果：透明红橙/蓝色/绿色等 [产品主色] 玻璃，光泽表面，光线折射，真实反射
- 正下方文字标注："[中文产品名] / [English Name]"
- 不占用过多空间，为信息模块留足展示区域

**模块 2：【核心功效/特点】**（标准卡片 1x1）
标题："核心功效" 或 "核心特点" 或 "主要功能"
内容：4 个核心卖点，用 "/" 分隔
- 食物 → "抗氧化延缓衰老 / 保护心血管健康 / 美白护肤养颜 / 促进消化吸收"
- 药品 → "解热镇痛 / 抗炎消肿 / 抗血小板聚集 / 预防心血管疾病"
- 科技 → "主动降噪 / 空间音频 / 自适应均衡 / 20 小时续航"
配合简洁图标

**模块 3：【使用方法/应用场景】**（标准卡片 1x1）
标题："食用方法" 或 "使用方法" 或 "应用场景"
内容：4 种使用方式/场景
- 食物 → "生食：沙拉凉拌 / 熟食：炒蛋炖汤 / 加工：酱料榨汁 / 搭配：鸡蛋牛肉"
- 药品 → "口服：餐后温水送服 / 剂量：成人 100mg / 频次：每日 1-2 次 / 疗程：遵医嘱"
- 科技 → "音乐欣赏 / 通勤降噪 / 居家办公 / 观影娱乐"
配合场景图标

**模块 4：【关键数据/参数】**（标准卡片 1x1）
标题："营养价值" 或 "技术参数" 或 "产品规格"
内容：5 个关键数据点
- 食物 → "热量 [X]千卡/100 克 / 维生素 C [X]毫克 / [特色成分] 丰富 / 膳食纤维 [X]克 / 钾 [X]毫克"
- 药品 → "成分：[化学式] / 规格：[X]mg / 起效时间：[X]分钟 / 半衰期：[X]小时 / 代谢途径：[途径]"
- 科技 → "芯片：[型号] / 续航：[X]小时 / 重量：[X]克 / 驱动单元：[规格] / 充电：[X]小时"
配合简洁数据可视化图表

**模块 5：【适用人群/目标用户】**（标准卡片 1x1）
标题："适合人群" 或 "目标用户" 或 "适用场景"
内容：分为推荐 (✓) 和警示 (⚠️) 两部分
- 食物 → "✓ 心血管疾病患者 / ✓ 美容养颜需求者 / ✓ 减肥瘦身人群 / ✓ 便秘消化不良 / ⚠️ 慎用：肾功能不全 / 胃酸过多 / 空腹食用"
- 药品 → "✓ 发热患者 / ✓ 轻中度疼痛 / ✓ 炎症性疾病 / ⚠️ 禁忌：孕妇 / 哮喘患者 / 胃溃疡"
- 科技 → "✓ 音乐发烧友 / ✓ 商务人士 / ✓ 通勤人群 / ✓ 内容创作者"
用绿色✓和琥珀色⚠️区分

**模块 6：【注意事项/使用指南】**（标准卡片 1x1）
标题："食用注意" 或 "使用注意" 或 "重要提示"
内容：4 条重要提醒事项
- 食物 → "不宜空腹食用以免刺激胃黏膜 / 未成熟 [产品] 含 [有毒物质] 禁食 / 不宜长时间高温烹煮保留营养 / [特殊人群] 需控制摄入量"
- 药品 → "需餐后服用避免胃部不适 / 不可与 [禁忌药物] 同服 / 服药期间避免饮酒 / 出现过敏反应立即停药就医"
- 科技 → "首次使用需配对设备 / 避免极端温度环境 / 定期清洁保养 / 长期不用请充电保存"
配合警示图标

**模块 7：【特殊指标】**（标准卡片 1x1）
标题：根据产品类型调整
- 食物 → "嘌呤含量" 显示 "[X]毫克/100克" + "低嘌呤食物 ✓" + "痛风患者友好"
- 药品 → "不良反应" 列举常见副作用
- 科技 → "兼容性" 显示支持的系统/设备
配合指示器或图标

**模块 8：【趣味知识/产品洞察】**（标准卡片 1x1）
标题："冷知识" 或 "产品故事" 或 "有趣事实"
内容：2-3 条有趣的知识点
- 食物 → "[产品] 加热后 [成分] 吸收率提升 X 倍 / [产品] 原产 [地区] 已有 [X] 年历史 / 未成熟 [产品] 含 [有害物质]"
- 药品 → "[产品] 是世界上使用最广泛的 [类别] 之一 / 每年全球生产超过 [X] 吨 / [发明年份] 年由 [人名] 发明"
- 科技 → "[产品] 采用 [技术] 专利技术 / [品牌] 首次将 [功能] 应用于消费级产品 / 全球销量突破 [X] 万台"

【磨砂亚克力材质规格】(CRITICAL 核心灵魂):
卡片材质效果:
- 透明度：80-85% 半透明 (TRANSLUCENT), 可以看穿卡片看到背景
- 磨砂效果：柔和的 frosted glass blur 模糊,backdrop-filter 风格
- 底色调：轻微白色/奶油色霜化效果 (15-20% 不透明度),提升可读性但保持透明
- 边框：细致的发光边框，捕捉光线反射
- 阴影：柔和的分层阴影，营造浮空深度感
- 玻璃物理：真实的玻璃边缘高光、光线折射、表面反射效果
- 视觉特征：背景渐变可以透过卡片清晰看见，像真实的磨砂亚克力板
**重要**: 卡片必须保持 TRANSLUCENT 透明质感，不能变成不透明白卡片!

【色彩方案】:
基础色彩配比：90% 中性色 + 10% 产品主题色点缀
- 基础层：透明玻璃、浅灰色、米白色
- 文字色：中等深灰 #3A3A3A (柔和但清晰，适合透明背景)
- 主题色点缀(10% 使用):
  * 食物 → 产品天然色（番茄红橙、胡萝卜橙、菠菜绿等）
  * 药品 → 医疗蓝、药品白、红十字标志色
  * 科技 → 品牌主色 (Apple 银灰蓝、小米橙、华为红等)
- 点缀位置：仅用于关键图标、重要数字、警示符号、3D 主体
- 警示色：琥珀橙 #FF9800 用于⚠️警告内容
- 肯定色：绿色 #4CAF50 用于✓推荐内容

【背景设置】:
- 类型：柔和渐变，2-3 个相近色过渡
- 产品色调适配:
  * 食物 → 暖橙黄到深红褐渐变 (模拟厨房/餐厅环境)
  * 药品 → 蓝白灰医疗洁净渐变
  * 科技 → 银灰到深蓝灰现代科技渐变
  * 元素 → 对应元素色系的优雅渐变 (如氧气的淡蓝色)
- 复杂度：低，避免干扰主体展示
- 作用：提供对比度，确保透明卡片内容清晰可读

【字体规范】:
中文字体：PingFang SC / Microsoft YaHei / Helvetica Neue (无衬线)
字号层次:
- 模块标题：14pt Bold，主题色强调
- 核心卖点/功能要点：12pt Regular，深灰色
- 描述文字：10.5pt Regular，中灰色 #666666
- 小字说明/补充信息：9pt Medium，浅灰色 #888888
字号调整原则：根据卡片尺寸适配，保持清晰易读 (3x4cm 手机屏幕或 27" 显示器)

【图标规范】:
风格：极简线条图标 (line icons), 小巧精致，不喧宾夺主
颜色：浅灰线条 #888888，关键/重点图标用主题色点缀 (#FF6B35 食物, #007AFF 科技, #E11D48 药品)
用途：辅助说明信息，增强视觉识别度
密度：稀疏排列，避免过度拥挤
位置：与文字左对齐，上下间距合理 (4px)

【布局排布】:
网格系统：Bento Grid，非对称分布，横向 landscape 比例 (16:9 或类似)
卡片间距：统一 20-25pt 间隙，营造呼吸感
对齐原则：模块内容左对齐，确保视觉一致性
信息层次：通过标题加粗、主题色、图标优先级区分重要性

【响应式设计】:
自适应布局：根据屏幕尺寸自动调整网格 (移动端改为单列/双列)
保持核心元素：无论何时何地，3D 玻璃产品主体和关键功效模块必须保留
透明度一致性：所有卡片始终保持相同的磨砂亚克力效果
材质一致性：确保任何设备上的显示都呈现真实的玻璃质感

【多语言支持】:
中文为主，可选英文副标题
关键医学术语/技术术语保持准确
文化适配：考虑地区差异（如"食用方法" vs "使用指南")

【输出要求】:
- 生成完整的 HTML/CSS 代码或设计描述
- 确保所有卡片都呈现真实的透明磨砂质感
- 提供可直接使用的配色方案
- 包含响应式布局说明