你作为H5页面UI设计师，需要对提供的需求做分析，并按照最终输出设计UI“ 计算器页面布局 点击首页“滤芯计算器”图标后，跳转至独立的计算器页面，页面结构如下： 顶部标题栏：显示“滤芯净水量计算器”，左侧有返回箭头。 固定图片区：页面顶部左侧放置一张由碧然德提供的滤芯产品图片（固定不变）参考附件1图片，图片右侧配简短说明文字，如“BRITA PurityC （第一行显示） C1100 Xtrasafe（第二行显示）”。 输入区： 三个输入框垂直排列，每个输入框包含： 左侧标签：总硬度（ºdH）、总碱度（ºdH）、导电率（µS/cm）。 右侧输入框：数字输入键盘，支持小数点。 每个输入框下方用小字提示单位换算说明（例如：“1ºdH ≈ 17.8 ppm CaCO₃”或“导电率可由TDS÷0.5估算”）。 输入框下方放置一个醒目的 “开始计算”按钮，样式为圆角矩形，主色调与品牌一致。 结果显示区： 点击按钮后，同页面显示计算结果，无需跳转。结果以三个独立的卡片或列表项展示，清晰标明分流比例： 净水量（0%分流）：XXX 升 净水量（30%分流）：XXX 升 净水量（40%分流）：XXX 升 每个数值下方用小字提示“此为估算值，实际可能因水质而异”。 整个页面需要在一个页面显示全，以上涉及按钮的组件底色必须为#282D74”