用户登录智能问答无障碍

1. 视觉令牌

低饱和墨绿负责权威与农业属性,蓝青只作辅助,不使用高饱和亮绿或廉价科技光效。

品牌主色#1A593E
浅薄荷绿#D8EBE1
辅助蓝青#3F7D95
主色浅底#EEF6F1
页面卡片#FFFFFF
柔和提醒#B7791F
H1 / 48 / Bold
耕测云联
H2 / 24 / Medium
农业实时查询
H3 / 18 / Medium
土壤墒情监测
Body / 16 / Regular
正文统一行高 1.6;关怀版放大至 18px,行高 1.75。
Caption / 14
热搜词、辅助说明、版权信息使用 14px。

2. 基础组件

按钮、输入框、卡片统一 8px 圆角,hover 只做颜色、阴影与轻微层级变化。

按钮

主要按钮 描边按钮 弱按钮

表单

服务卡片

农户服务

主受众入口,使用主色 2px 边框。

企业服务

保持浅薄荷绿边框,不抢主入口权重。

4. 滚动叙事与时间线

背景层只做小幅视差,内容层独立白底;时间线进入视口后点亮,专家卡使用原生 details 原地展开。

02 农业实时查询

章节卡承载查询任务,实景图只负责建立场景,不让纹理干扰表单和数据。

2022 物联网监测试点

接入土壤、气象、虫情和灌溉设备。

2023 区块链溯源上线

关联农事记录、检测报告和采收批次。

2026 天空地一体化

整合遥感巡田、专家决策与评级服务。

专家卡片原地展开
负责模型解释、数据复核和专家决策建议。使用原生 details,无 JS 时仍可展开阅读。
土壤墒情

5. 实时查询面板

农田点位用柔和脉冲,运输线路用低速流动;异常用琥珀色,不使用闪烁红光。

农田监测点位

商业运输节点

区域仓:13:05 完成入库复核,温度 4.2℃。

6. 食品安全评级拆解

默认只显示商品与星级;点击后按底层、中层、上层展开,凭证查看继续使用嵌套 details。

晋源绿叶菜礼盒 ★★★★★A · 96

区块链溯源记录

采收、检测、入库、运输和收货关键动作关联批次码。

农残检测与农事记录

农残快检合格,用药记录处于安全间隔期之外。

冷链记录与抽检评级

全程温度处于阈值内,包装封签合格。

标签页无 JS 兜底

无 JS 时所有面板默认完整展示;JS 加载后才切换为标签视图。
检测报告面板:农残快检、抽检记录与原始凭证。
运输面板:冷链温控、节点时间、封签核验。

7. 政务无障碍与交付红线

关怀版是唯一动效开关,同时放大字体;系统开启减少动态效果时自动禁用视差和循环动画。

静态兜底:时间线、专家卡、评级凭证、标签内容在 JS 失效时均可阅读;导航使用原生 details。
键盘访问:所有查询按钮、地图点位、路线节点、标签、下拉和折叠卡均可 Tab 聚焦,标签支持方向键、Home/End。
弱动效:仅使用 200–400ms 淡入、平滑展开、颜色和阴影变化;禁止闪烁、弹跳、旋转、大幅位移。
信息可读:查询表单和数据不得被装饰遮挡;实景图上的核心内容必须放在独立白底卡片中。
概念边界:不使用国徽、真实政府名称、真实备案号、真实网站标识码或官方徽章。