Blizzard
7abcc0dd2d
## 之前报告页的问题
它是个顶级 tab，却只有四张薄卡，而真正的分析全被埋起来：
- 养宠账单里「记一笔」开 cost 弹层 —— 那分支上一轮随记录表单搬走了，
点了开空弹层，是个断按钮
- 养宠账单是我新建花销页的一个残缺子集，重复
- 后端有 6 条洞察 + 体重曲线，全在「历史页」，报告页只用一行链过去
- 健康摘要四行手拼字符串，很薄
## 报告 = 数据看板
把埋在历史页的分析提上来，报告页成为真正「看数据」的地方：
本周概览 周报小结 + 完成/体重变化/高风险三个数 + 生成分享卡片
健康洞察 6 条洞察直接铺在报告页（按 alert>warn>info 上色），
点一条跳去记那一类。这是看板的主角
体重趋势 把那张 SVG 曲线图提上来（点圆点看每次记录）
健康摘要 疫苗/驱虫/体重/异常四行 + 导出就医摘要
养宠花销 只给「本月 ¥X + top 类别 + 分类条」概要，点整卡进花销页，
不再内嵌半套花销 UI，断掉的「记一笔」删了
全部记录 一行入口进历史页
## 历史页降级成「全部记录」
洞察和体重曲线搬走了，历史页只留「时间轴流水 + 类型筛选」——
分工清晰：报告=看分析，全部记录=翻流水。nav 标题改成「全部记录」，
去掉不再用的 bottom-sheet / fab / seg-tabs 之外的东西。
体重曲线的「记一笔」原来开 weight 弹层（已删），改成跳
addrecord?type=weight；洞察点击也从开弹层改成跳 addrecord。
## 顺手
报告页去掉了 Pro 会员占位卡（支付未接入，就是个营销占位），
接入支付时再加回来。
## 验证（预生产库实跑）
周报 需要关注 / 完成0 / 高风险1，小结文案对
洞察 1 条（食便相关），带 level=warn + action=food + 依据
体重趋势 字段验证只有 1 个点 → 曲线走空态「先记录几次」
健康摘要 疫苗 0/3 即将到期、驱虫下次日期、体重稳定增长、异常 1 次
账单 本月 ¥188、top 医疗、2 个类别
5 个接口全部返回真数据
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
61 lines
3.5 KiB
Plaintext
61 lines
3.5 KiB
Plaintext
.report-card{background:linear-gradient(135deg,#FFFFFF,#F2FAF6)}
|
|
.rc-text{color:var(--text-2);font-size:var(--fs-md);line-height:1.6}
|
|
.rc-share{margin-top:var(--sp-4)}
|
|
|
|
/* ===== 健康洞察（从历史页搬来，报告页的主角）===== */
|
|
.ins{border-radius:var(--r-md);padding:var(--sp-4);margin-bottom:var(--sp-2)}
|
|
.ins:last-child{margin-bottom:0}
|
|
.ins-info{background:var(--surface-2)}
|
|
.ins-warn{background:var(--primary-soft)}
|
|
.ins-alert{background:var(--red-soft)}
|
|
.ins-head{display:flex;align-items:flex-start;gap:var(--sp-2)}
|
|
.ins-ic{flex:none;margin-top:2rpx}
|
|
.ins-info .ins-ic{color:var(--green-ink)}
|
|
.ins-warn .ins-ic{color:var(--primary-ink)}
|
|
.ins-alert .ins-ic{color:var(--red-ink)}
|
|
.ins-title{flex:1;font-size:var(--fs-md);font-weight:var(--fw-b);line-height:1.4}
|
|
.ins-go{flex:none;color:var(--muted2);margin-top:2rpx}
|
|
.ins-detail{color:var(--text-2);font-size:var(--fs-sm);line-height:1.6;margin-top:var(--sp-2)}
|
|
.ins-ev{color:var(--muted);font-size:var(--fs-cap);margin-top:var(--sp-2)}
|
|
|
|
/* ===== 体重趋势曲线（从历史页搬来）===== */
|
|
.trend-stats{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted)}
|
|
.mini-chart{
|
|
height:256rpx;border-radius:var(--r-md);margin-top:var(--sp-4);position:relative;overflow:hidden;
|
|
background:
|
|
linear-gradient(180deg,rgba(115,190,157,.16),rgba(115,190,157,0)),
|
|
repeating-linear-gradient(0deg,#fff,#fff 60rpx,#EFE8DE 62rpx);
|
|
}
|
|
.chart-line{position:absolute;left:36rpx;right:36rpx;top:44rpx;bottom:44rpx;width:auto;height:auto}
|
|
.dot-layer{position:absolute;left:36rpx;right:36rpx;top:44rpx;bottom:44rpx}
|
|
.dot{position:absolute;width:40rpx;height:40rpx;margin:-20rpx 0 0 -20rpx;border-radius:50%}
|
|
.dot::after{content:'';position:absolute;left:50%;top:50%;width:18rpx;height:18rpx;margin:-9rpx 0 0 -9rpx;border-radius:50%;background:#fff;border:4rpx solid var(--green);box-sizing:border-box}
|
|
.dot.on::after{width:26rpx;height:26rpx;margin:-13rpx 0 0 -13rpx;background:var(--green);box-shadow:0 0 0 6rpx rgba(115,190,157,.25)}
|
|
.point-detail{
|
|
margin-top:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-md);
|
|
background:var(--green-soft);border:1rpx solid #DCEFE4;
|
|
}
|
|
.pd-main{display:flex;align-items:baseline;gap:var(--sp-3)}
|
|
.pd-date{font-size:var(--fs-sm);color:var(--muted)}
|
|
.pd-weight{font-size:var(--fs-xl);font-weight:var(--fw-b);color:var(--green-ink)}
|
|
.pd-delta{font-size:var(--fs-sm);font-weight:var(--fw-b)}
|
|
.pd-delta.up{color:var(--red-ink)}
|
|
.pd-delta.down{color:var(--green-ink)}
|
|
.pd-note{margin-top:var(--sp-2);font-size:var(--fs-md);color:var(--text-2);line-height:1.5}
|
|
.pd-note.muted{color:var(--muted)}
|
|
.chart-hint{margin-top:var(--sp-2);font-size:var(--fs-cap);color:var(--muted);text-align:center}
|
|
|
|
/* ===== 养宠花销概要（详细在花销页）===== */
|
|
.bill-card:active{opacity:.85}
|
|
.bill-sum{margin:var(--sp-2) 0 var(--sp-4)}
|
|
.bill-total{font-size:56rpx;font-weight:var(--fw-b);color:var(--text);line-height:1.1}
|
|
.bill-cur{font-size:var(--fs-lg);color:var(--muted);margin-right:4rpx}
|
|
.bill-sub{font-size:var(--fs-sm);color:var(--muted);margin-top:4rpx}
|
|
.bill-bars{display:flex;flex-direction:column;gap:var(--sp-3)}
|
|
.bill-row{display:grid;grid-template-columns:88rpx 1fr 108rpx;gap:var(--sp-3);align-items:center;font-size:var(--fs-sm)}
|
|
.bill-cat{color:var(--text)}
|
|
.bill-amt{font-weight:var(--fw-b);text-align:right}
|
|
/* 账单条比全局 .bar 细一档，蓝色是「花费」的语义色 */
|
|
.mini-bar{height:var(--sp-2);border-radius:var(--r-full);background:#F0E7DD;overflow:hidden}
|
|
.mini-bar-fill{display:block;height:100%;border-radius:var(--r-full);background:var(--blue)}
|