feat(首页工具卡): 五张卡按参考图改版——糖果色底 + 白字 + 3D 大眼萌物插画 (v26093018)
- 数胎动 / 孕期体重 / 孕检日历 / 胎儿估重 / 数宫缩:饱和渐变底(蓝 / 粉 / 绿 / 紫 / 蓝紫)+ 白色粗标题, 插画换成自画 SVG 萌物(小脚丫 / 体重秤 / 台历 / 秤盘小豆宝宝 / 秒表),立体光泽、黑色大眼珠带高光。 - 只换皮:高度账、排布、data-mini 跳转、各 id 数据回填不变;「更多工具」出口保持灰米。 - 「记录」按钮改白底蓝字并压在插画上;告警态在彩色底上改亮黄字(原 --alert 红看不清)。 - 数宫缩卡原曲线插画 72f41378ef8e.png 已无引用,删除;其余旧 PNG 仍被「每日小打卡」使用,保留。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
18
index.html
18
index.html
@@ -7,7 +7,7 @@
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>兜爸心选 · 孕育陪伴</title>
|
||||
<!-- V:26093017 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<!-- V:26093018 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<link rel="stylesheet" href="mama-box.css">
|
||||
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
||||
<!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) -->
|
||||
@@ -220,6 +220,9 @@
|
||||
<button class="dock-all" data-sheet="open">所有工具 ›</button>
|
||||
</div>
|
||||
<p class="dock-note"><svg viewBox="0 0 24 24" width="11" height="11" aria-hidden="true"><path d="M11 2.6l1.9 5.2 5.2 1.9-5.2 1.9L11 16.8l-1.9-5.2L3.9 9.7l5.2-1.9L11 2.6z" fill="currentColor"/><path d="M18.4 14.6l.8 2.1 2.2.8-2.2.8-.8 2.1-.8-2.1-2.2-.8 2.2-.8.8-2.1z" fill="currentColor" opacity=".6"/></svg>妈妈每记录一次,宝宝就多一段成长记忆</p>
|
||||
<!-- 2026-09-30 五张卡按用户给的参考图改版:饱和糖果色底 + 白色粗标题 + 立体光泽、大眼睛的萌物插画
|
||||
(小脚丫 / 体重秤 / 台历 / 秤盘小豆宝宝 / 秒表,assets/img/*.svg 自画)。
|
||||
只换皮:排布、高度账、data-mini 跳转和各 id 的数据回填一律没动。样式见 mama-box.css「参考图改版」。 -->
|
||||
<!-- 五张工具卡 + 一个出口。宫格本身这一版没动:
|
||||
不等宽三列 + 竖向堆叠本来就是这一屏最不传统的部分,
|
||||
而且两列高度是硬凑齐的(见 style.css 里 .mini-card.curve 上面那段),
|
||||
@@ -239,7 +242,7 @@
|
||||
<div class="mc-extra" id="kickExtra"></div>
|
||||
</div>
|
||||
<span class="mc-btn">记录</span>
|
||||
<img class="mc-art" src="assets/img/7980160b80b0.png" alt="" aria-hidden="true">
|
||||
<img class="mc-art" src="assets/img/a3abcbea7e5e.svg" alt="" aria-hidden="true">
|
||||
</button>
|
||||
<!-- 第五个工具。原来是「胎心记录」,本批换成「胎儿估重」——
|
||||
后者是真正部署好的站点(beian1.douba.top),点了能用;
|
||||
@@ -255,11 +258,11 @@
|
||||
<button class="mini-card fweight ripple" data-mini="fweight">
|
||||
<div class="mc-title sm">胎儿估重</div>
|
||||
<div class="mc-sub">去测算</div>
|
||||
<img class="mc-art" src="data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2048%2048'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'fwg'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23AEC3EA'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%238AA3D6'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'18'%20fill%3D'url(%23fwg)'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'13.2'%20fill%3D'%23F8FBFF'%2F%3E%3Cpath%20d%3D'M24%2024L31.6%2016.6'%20stroke%3D'%23F2876E'%20stroke-width%3D'3.2'%20stroke-linecap%3D'round'%20fill%3D'none'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'2.6'%20fill%3D'%235E78B4'%2F%3E%3C%2Fsvg%3E" alt="" aria-hidden="true">
|
||||
<img class="mc-art" src="assets/img/e037c09d6f58.svg" alt="" aria-hidden="true">
|
||||
</button>
|
||||
</div>
|
||||
<button class="mini-card weight ripple" data-mini="weight">
|
||||
<img class="mc-art big" src="assets/img/b2066fd752bf.png" alt="" aria-hidden="true">
|
||||
<img class="mc-art big" src="assets/img/9f50b6756cb6.svg" alt="" aria-hidden="true">
|
||||
<div class="mc-title">孕期体重</div>
|
||||
<!-- ⚠️ 这里原来是写死的演示值「58.2 kg」,任何用户都会看到(2026-09-22 演示数据泄漏)。
|
||||
现在由 `applyRemoteCards()` 按 box_app 封装的卡片接口写入:
|
||||
@@ -272,7 +275,7 @@
|
||||
<button class="mini-card cal ripple" data-mini="cal">
|
||||
<div class="mc-title sm">孕检日历</div>
|
||||
<div class="mc-sub" id="calNext">—</div>
|
||||
<img class="mc-art" src="assets/img/2d23b079caca.png" alt="" aria-hidden="true">
|
||||
<img class="mc-art" src="assets/img/82108357dbcf.svg" alt="" aria-hidden="true">
|
||||
</button>
|
||||
<!-- 生长曲线原来是 flex:1,把这一列剩下的高度全吃了(约 134px),
|
||||
而它的内容和上面的孕检日历一模一样多。压到 80px,
|
||||
@@ -283,13 +286,12 @@
|
||||
⚠️「生长曲线」工具本身**没被删**:App 表里 taiershengzhang /
|
||||
taierquxian 都还在,仍会出现在「记一下」的全部工具列表里;
|
||||
这里换掉的只是首页这一个坑位。
|
||||
⚠️ 图标仍是原来那张 72f41378ef8e(曲线插画),本批未要求换;
|
||||
若要换成宫缩/宫缩计时的插画,属另一次改动。
|
||||
图标(2026-09-30)已换成秒表萌物,见下面五张卡的改版注释。
|
||||
⚠️ 副标题仍是 data-wk="cn" 自动显示孕周,本批未要求改文案。 -->
|
||||
<button class="mini-card curve ripple" data-mini="curve">
|
||||
<div class="mc-title sm">数宫缩</div>
|
||||
<div class="mc-sub" data-wk="cn">—</div>
|
||||
<img class="mc-art" src="assets/img/72f41378ef8e.png" alt="" aria-hidden="true">
|
||||
<img class="mc-art" src="assets/img/177395faf53c.svg" alt="" aria-hidden="true">
|
||||
</button>
|
||||
<!-- 通往「记一下」弹层里那十几个工具。底部那颗 FAB 开的也是它。
|
||||
故意不做成糖果色卡:它不是第六个工具,是个出口,
|
||||
|
||||
Reference in New Issue
Block a user