39 lines
1.9 KiB
Markdown
39 lines
1.9 KiB
Markdown
|
# 工作日志：搜索结果页颜色标识方案 (v1.0)
|
|||
|
|
|
|||
|
|
**日期:** 2025-07-25
|
|||
|
|
**制作者:** Roo (AI Assistant)
|
|||
|
|
**范围:** `shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页.vue`
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 1. 概述
|
|||
|
|
|
|||
|
|
为统一“食话食说”应用内不同分类的安全评级视觉语言，并记录迭代过程中的设计决策，特此归档最终确定的颜色标识方案。
|
|||
|
|
|
|||
|
|
该方案包含两套独立的颜色系统：一套专用于**食品添加剂**的六级安全评级，另一套用于**预包装食品**的高风险等级警示。
|
|||
|
|
|
|||
|
|
## 2. 食品添加剂安全评级颜色方案
|
|||
|
|
|
|||
|
|
此方案基于六级分类体系，旨在为用户提供清晰、直观的安全等级指引。
|
|||
|
|
|
|||
|
|
| **分类** | **安全等级定位** | **推荐颜色** | **颜色代码 (十六进制)** | **CSS 类名** |
|
|||
|
|
| :--- | :--- | :--- | :--- | :--- |
|
|||
|
|
| A1 类 | 最高安全等级 | 微信绿 | `#07C160` | `.safety-level-1` |
|
|||
|
|
| A2 类 | 较安全 | 浅绿色 | `#90ee90` | `.safety-level-2` |
|
|||
|
|
| B1 类 | 需警惕 | 蓝色 | `#1E90FF` | `.safety-level-3` |
|
|||
|
|
| B2 类 | 风险未知 | 黄色 (优化后) | `#ffe600` | `.safety-level-4` |
|
|||
|
|
| C2 类 | 严格限制 | 橙色 | `#FF7F50` | `.safety-level-5` |
|
|||
|
|
| C1 类 | 禁止使用 | 红色 | `#ff0000` | `.safety-level-6` |
|
|||
|
|
|
|||
|
|
## 3. 预包装食品安全评级颜色方案
|
|||
|
|
|
|||
|
|
此方案用于预包装食品的五级安全评级。其中 1-3 级与添加剂评级共用基础颜色，4-5 级为专属高风险警示色。
|
|||
|
|
|
|||
|
|
| **等级** | **安全等级定位** | **推荐颜色** | **颜色代码 (十六进制)** | **CSS 类名** |
|
|||
|
|
| :--- | :--- | :--- | :--- | :--- |
|
|||
|
|
| 1 级 | 最安全 | 微信绿 | `#07C160` | `.safety-level-1` |
|
|||
|
|
| 2 级 | 较安全 | 浅绿色 | `#90ee90` | `.safety-level-2` |
|
|||
|
|
| 3 级 | 一般安全 | 蓝色 | `#1E90FF` | `.safety-level-3` |
|
|||
|
|
| 4 级 | 需警惕 | 橙色 | `#FF7F50` | `.prepackaged-safety-4` |
|
|||
|
|
| 5 级 | 风险较高 | 红色 | `#ff0000` | `.prepackaged-safety-5` |
|