feat(首页工具卡): 图标改扁平化,卡底色跟随各工具页色系 (v26093019)

- 五个图标(小脚丫 / 体重秤 / 台历 / 秤盘小豆宝宝 / 秒表)重画为扁平 SVG:白色 + 同色系实色块,
  去掉渐变、阴影、高光和 3D 大眼睛;去掉插画的 drop-shadow。
- 卡底色改成点进去的工具页同色系、稍深一档:数胎动陶土橙、孕期体重珊瑚粉、孕检日历草绿、
  胎儿估重雾蓝、数宫缩薰衣草紫(取自各页 theme-color / 主色,见 CSS 注释)。
- 「记录」按钮字色跟数胎动卡改成陶土橙。版式、跳转、数据回填不变。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-09-30 16:33:42 +00:00
parent 4a7eb92864
commit 37bdfa6f24
13 changed files with 23 additions and 38 deletions

View File

@@ -779,8 +779,9 @@ a.skip:focus{left:16px;top:16px}
投影值照抄 .mc-art 的原值不动:打光要跟邻居一致。 */
.mini-card.fweight .mc-art{width:38px;right:11px;bottom:10px;
filter:drop-shadow(0 5px 10px rgba(160,90,70,.18))}
/* 2026-09-30 参考图改版(用户给的一张「糖果色卡 + 3D 大眼萌物」参考图):
五张工具卡换成饱和渐变底 + 白字,插画换成自画 SVG(立体光泽、黑色大眼珠带高光)。
/* 2026-09-30 工具卡改版:白字 + 扁平图标(自画 SVG,白色 + 同色系实色块,无渐变无阴影无高光)。
卡底色取点进去那个工具页的主色系、饱和度再深一档(各工具页 theme-color / 主色见每行注释),
这样从卡片点进去颜色是连着的。
只换皮:上面那笔高度账(158+10+64 / 88+10+80+10+44)和版式一个数没动,
所以这里只覆盖颜色、字色和插画尺寸。渐变收尾色压得够深,白字在最浅的那一端也读得清。
「更多工具」仍是灰米出口,不参与。 */
@@ -788,13 +789,12 @@ a.skip:focus{left:16px;top:16px}
.bento .mini-card:not(.more) .mc-title{text-shadow:0 1px 2px rgba(0,0,0,.12)}
.bento .mini-card:not(.more) .mc-sub{color:rgba(255,255,255,.9)}
.bento .mini-card:not(.more) .mc-extra{color:rgba(255,255,255,.78)}
.bento .mini-card:not(.more) .mc-art{filter:drop-shadow(0 4px 8px rgba(30,20,60,.22))}
.mini-card.kick{background:linear-gradient(160deg,#58BEDF,#2F8FC0)}
.mini-card.weight{background:linear-gradient(160deg,#F28AA2,#D9587A)}
.mini-card.cal{background:linear-gradient(160deg,#7FCB63,#45A13A)}
.mini-card.fweight{background:linear-gradient(160deg,#A895F2,#7E66DE)}
.mini-card.curve{background:linear-gradient(160deg,#8C9CF2,#5E71DD)}
.bento .mc-btn{background:#fff;color:#2F8FC0;box-shadow:0 4px 10px rgba(20,60,100,.22)}
.mini-card.kick{background:linear-gradient(160deg,#EE9B70,#D8683F)} /* 数胎动页:暖杏底 #F7E8DE、橙红 #E2694A */
.mini-card.weight{background:linear-gradient(160deg,#F49A88,#E4656A)} /* 孕期体重页:桃粉底 #FFE9E1、珊瑚 #F2856D */
.mini-card.cal{background:linear-gradient(160deg,#94B568,#62893C)} /* 孕检日历页:浅绿底 #EFF4EB、草绿 #86A362 */
.mini-card.fweight{background:linear-gradient(160deg,#86A5DA,#5472B4)} /* 胎儿估重页:浅蓝底 #E2ECF9、藏青 #3E5488 */
.mini-card.curve{background:linear-gradient(160deg,#A08DD8,#7560B6)} /* 数宫缩页:淡紫底 #E7E1F3、紫 #7E68BC */
.bento .mc-btn{background:#fff;color:#C95A36;box-shadow:0 3px 8px rgba(120,50,20,.2)}
/* 数胎动卡只有 ≈128px 宽,左下是「记录」按钮:脚丫 74 宽贴右下,按钮再压在插画上面,谁也不挡谁的字 */
.mini-card.kick .mc-art{width:74px;right:-4px;bottom:-4px}
.bento .mc-btn{position:relative;z-index:1}