style(fe): 记录页按 preview-v3 收拾干净
## 分组那片色块是个 bug,不是设计
我把 tone-{{item.tone}} 加在分组外层是为了给组标题上色,但 .tone-N 在
app.wxss 里本身就带 background(`.tone-1{background:var(--primary-soft)}`),
于是整组被涂成一片色块——和视觉稿完全不是一回事。
分组着色单独走 g-1..g-4,只管 .tg-head 的文字色。格子的浅色底仍然是
.quick + .tone-N,那是它本来的用途。
## 另外三处
三列 → 四列(视觉稿是四列,三列一行只放三个,洗护/清洁要多滚一屏)
去掉组右侧的数量(6/7/6/5 —— 用户不关心一个组里有几项)
组名去掉「记录」后缀(「日常记录」在标题位置念着啰嗦,「日常」就够)
## 去掉顶部的宠物切换和添加
这页只是个事项目录,点进去才是表单。记哪只宠物在添加页里选(那页第一行
就是「记录宠物」,多宠家庭最容易记错到别的宠物身上,放在表单里才对)。
record.json 跟着去掉 pet-switch 注册。
## .tg 挪回页面级
历史页那份宫格上一批已经删了,现在只有记录页在用,全局层只放真正共用的。
哪天别的页面要用,检查器会报「跨页借用」提醒再挪上去。
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -428,6 +428,38 @@ page{scrollbar-width:none;-ms-overflow-style:none}
|
||||
}
|
||||
.follow-btn.on{color:var(--muted);background:#F4F1EC;border-color:var(--line)}
|
||||
|
||||
/* ===== 关注按钮 =====
|
||||
社区列表和关注/粉丝列表都在用。同上:两页共用的就不能留在任一页的 wxss 里 */
|
||||
.follow-btn{
|
||||
flex:none;font-size:var(--fs-cap);font-weight:var(--fw-b);padding:6rpx var(--sp-3);border-radius:var(--r-full);
|
||||
color:var(--primary-dark);background:var(--primary-soft);border:1rpx solid var(--primary-line);
|
||||
}
|
||||
.follow-btn.on{color:var(--muted);background:#F4F1EC;border-color:var(--line)}
|
||||
|
||||
/* ===== 记录类型分组宫格 =====
|
||||
记录页和历史页都在用。页面级 wxss 跨不了页,所以放全局。
|
||||
组的着色走 g-1..g-4,不要复用 tone-N —— tone-N 自带背景色,
|
||||
套在分组外层会把整块涂成色块。 */
|
||||
.tg{margin-bottom:var(--sp-5)}
|
||||
.tg:last-of-type{margin-bottom:0}
|
||||
.tg-head{
|
||||
display:flex;align-items:center;gap:var(--sp-2);
|
||||
font-size:var(--fs-md);font-weight:var(--fw-b);margin-bottom:var(--sp-3);
|
||||
}
|
||||
.tg-bar{width:6rpx;height:26rpx;border-radius:3rpx;background:currentColor}
|
||||
.g-1 .tg-head{color:var(--primary-ink)}
|
||||
.g-2 .tg-head{color:var(--green-ink)}
|
||||
.g-3 .tg-head{color:var(--blue-ink)}
|
||||
.g-4 .tg-head{color:var(--purple-ink)}
|
||||
|
||||
/* ===== 关注按钮 =====
|
||||
社区列表和关注/粉丝列表都在用。同上:两页共用的就不能留在任一页的 wxss 里 */
|
||||
.follow-btn{
|
||||
flex:none;font-size:var(--fs-cap);font-weight:var(--fw-b);padding:6rpx var(--sp-3);border-radius:var(--r-full);
|
||||
color:var(--primary-dark);background:var(--primary-soft);border:1rpx solid var(--primary-line);
|
||||
}
|
||||
.follow-btn.on{color:var(--muted);background:#F4F1EC;border-color:var(--line)}
|
||||
|
||||
/* ===== 记录类型分组宫格 =====
|
||||
记录页和「快速记录」弹层都在用,页面级 wxss 跨不了页
|
||||
四组各一个色系,色值全走 token 的 soft/ink 二件套,没有新色。
|
||||
|
||||
Reference in New Issue
Block a user