jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(首页工具卡): 图标换成各工具页左上角的 LOGO (v26093020)

Browse Source 
- 五张卡的扁平图标换成点进去那个工具页左上角的 LOGO 原图（透明 PNG）：
  数胎动 .brand-logo、孕期体重 img.brand-logo、孕检日历 .hero-brand i、胎儿估重 .lg、数宫缩 svg.brand-logo。
- 孕检日历原图四角有锯齿缺口，补成连续圆角。
- LOGO 不再出血到卡边外，统一离右下角约 10px、挂同一档投影；尺寸按卡片空间重新摆放，
  避开「记录」按钮和标题。卡片底色、版式、跳转、数据回填不变。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-09-30 16:50:21 +00:00
parent 37bdfa6f24
commit d164688743
13 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/img/0552a97dc8a1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

1
assets/img/08c0d4c6445b.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><g transform="rotate(-12 60 66)"><circle cx="38" cy="30" r="10" fill="#FFFFFF"/><circle cx="53" cy="21" r="7.6" fill="#FFFFFF"/><circle cx="66" cy="19" r="6.8" fill="#FFFFFF"/><circle cx="78" cy="23" r="6" fill="#FFFFFF"/><circle cx="88" cy="31" r="5.4" fill="#FFFFFF"/><path d="M30 52C28 38 60 34 80 38C95 41 97 55 91 67C85 79 79 93 73 103C67 114 50 116 43 105C37 95 39 83 35 73C31 65 29 60 28 52Z" fill="#FFFFFF"/></g><path d="M101 14l2.4 5.6 5.6 2.4-5.6 2.4-2.4 5.6-2.4-5.6-5.6-2.4 5.6-2.4Z" fill="#FFFFFF" opacity=".85"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 593 B

1
assets/img/0abc42a1a6e1.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><rect x="18" y="26" width="84" height="82" rx="18" fill="#FFFFFF"/><path d="M18 50V44a18 18 0 0 1 18-18h48a18 18 0 0 1 18 18v6Z" fill="#4F7A2E"/><rect x="37.5" y="16" width="9" height="20" rx="4.5" fill="#DCEBC9"/><rect x="73.5" y="16" width="9" height="20" rx="4.5" fill="#DCEBC9"/><rect x="30" y="60" width="8" height="8" rx="2.5" fill="#DCEBC9"/><rect x="47" y="60" width="8" height="8" rx="2.5" fill="#DCEBC9"/><rect x="64" y="60" width="8" height="8" rx="2.5" fill="#DCEBC9"/><rect x="81" y="60" width="8" height="8" rx="2.5" fill="#DCEBC9"/><rect x="30" y="74" width="8" height="8" rx="2.5" fill="#DCEBC9"/><rect x="47" y="74" width="8" height="8" rx="2.5" fill="#DCEBC9"/><circle cx="68" cy="78" r="8.5" fill="#4F7A2E"/><path d="M64 78l3 3 5-6" stroke="#FFFFFF" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/><rect x="81" y="74" width="8" height="8" rx="2.5" fill="#DCEBC9"/><rect x="30" y="88" width="8" height="8" rx="2.5" fill="#DCEBC9"/><rect x="47" y="88" width="8" height="8" rx="2.5" fill="#DCEBC9"/><rect x="64" y="88" width="8" height="8" rx="2.5" fill="#DCEBC9"/><rect x="81" y="88" width="8" height="8" rx="2.5" fill="#DCEBC9"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
assets/img/1619eff2a7e6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

1
assets/img/55ee74af0138.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><rect x="16" y="36" width="88" height="72" rx="22" fill="#FFFFFF"/><path d="M34 64a26 26 0 0 1 52 0Z" fill="#FFD3CE"/><path d="M60 64L70 48" stroke="#D9575C" stroke-width="4.5" stroke-linecap="round"/><circle cx="60" cy="64" r="5" fill="#D9575C"/><rect x="40" y="78" width="40" height="16" rx="8" fill="#D9575C"/><rect x="47" y="84" width="10" height="4" rx="2" fill="#FFFFFF"/><rect x="63" y="84" width="10" height="4" rx="2" fill="#FFFFFF"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 511 B

BIN
assets/img/57e2da52315e.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

1
assets/img/637bd1a7ef6a.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><rect x="50" y="8" width="20" height="9" rx="4.5" fill="#FFFFFF"/><rect x="55" y="15" width="10" height="10" fill="#FFFFFF"/><rect x="85" y="24" width="12" height="9" rx="3" transform="rotate(40 91 28)" fill="#FFFFFF"/><circle cx="60" cy="68" r="43" fill="#FFFFFF"/><circle cx="60" cy="68" r="33" fill="#E3DAF7"/><path d="M60 68V46" stroke="#5B46A0" stroke-width="5" stroke-linecap="round"/><path d="M60 68A22 22 0 0 1 82 68" stroke="#5B46A0" stroke-width="0" fill="none"/><path d="M60 35A33 33 0 0 1 91.4 58.2L60 68Z" fill="#5B46A0" opacity=".25"/><circle cx="60" cy="68" r="5.5" fill="#5B46A0"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 665 B

BIN
assets/img/9857cf22bbab.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
assets/img/d63a9ebd41e6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

1
assets/img/edd9c3b72928.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><circle cx="60" cy="54" r="28" fill="#FFD7C8"/><path d="M57 27c-4-7 3-12 8-7" stroke="#FFD7C8" stroke-width="4" fill="none" stroke-linecap="round"/><path d="M50 58q3-3 6 0M64 58q3-3 6 0" stroke="#3E5A99" stroke-width="2.6" fill="none" stroke-linecap="round"/><path d="M12 80h96c0 18-20 30-48 30S12 98 12 80Z" fill="#FFFFFF"/><rect x="12" y="76" width="96" height="8" rx="4" fill="#D6E2F6"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 458 B

16
index.html
View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title>
<!-- V:26093019 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26093020 缓存版本标记：改 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,8 +220,8 @@
<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 自画，白色 + 同色系实色块，无渐变无阴影）。卡底色跟点进去的工具页同色系、稍深一档。
<!-- 2026-09-30 五张卡改版：白色粗标题 + 各工具自己的 LOGO（从点进去那个工具页左上角的 LOGO 原样取出，
assets/img/*.png 透明底）。卡底色跟点进去的工具页同色系、稍深一档。
只换皮：排布、高度账、data-mini 跳转和各 id 的数据回填一律没动。样式见 mama-box.css「参考图改版」。 -->
<!-- 五张工具卡 + 一个出口。宫格本身这一版没动：
不等宽三列 + 竖向堆叠本来就是这一屏最不传统的部分，
@@ -242,7 +242,7 @@
<div class="mc-extra" id="kickExtra"></div>
</div>
<span class="mc-btn">记录</span>
<img class="mc-art" src="assets/img/08c0d4c6445b.svg" alt="" aria-hidden="true">
<img class="mc-art" src="assets/img/57e2da52315e.png" alt="" aria-hidden="true">
</button>
<!-- 第五个工具。原来是「胎心记录」，本批换成「胎儿估重」——
后者是真正部署好的站点（beian1.douba.top），点了能用；
@@ -258,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="assets/img/edd9c3b72928.svg" alt="" aria-hidden="true">
<img class="mc-art" src="assets/img/d63a9ebd41e6.png" alt="" aria-hidden="true">
</button>
</div>
<button class="mini-card weight ripple" data-mini="weight">
<img class="mc-art big" src="assets/img/55ee74af0138.svg" alt="" aria-hidden="true">
<img class="mc-art big" src="assets/img/1619eff2a7e6.png" alt="" aria-hidden="true">
<div class="mc-title">孕期体重</div>
<!-- ⚠️ 这里原来是写死的演示值「58.2 kg」，任何用户都会看到（2026-09-22 演示数据泄漏）。
现在由 `applyRemoteCards()` 按 box_app 封装的卡片接口写入：
@@ -275,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/0abc42a1a6e1.svg" alt="" aria-hidden="true">
<img class="mc-art" src="assets/img/9857cf22bbab.png" alt="" aria-hidden="true">
</button>
<!-- 生长曲线原来是 flex:1，把这一列剩下的高度全吃了（约 134px），
而它的内容和上面的孕检日历一模一样多。压到 80px，
@@ -291,7 +291,7 @@
<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/637bd1a7ef6a.svg" alt="" aria-hidden="true">
<img class="mc-art" src="assets/img/0552a97dc8a1.png" alt="" aria-hidden="true">
</button>
<!-- 通往「记一下」弹层里那十几个工具。底部那颗 FAB 开的也是它。
故意不做成糖果色卡：它不是第六个工具，是个出口，

2
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26093019';
var VER = '26093020';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

16
mama-box.css
View File

@@ -779,7 +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 工具卡改版：白字 + 扁平图标（自画 SVG，白色 + 同色系实色块，无渐变无阴影无高光）。
/* 2026-09-30 工具卡改版：白字 + 各工具自己的 LOGO（从点进去那个工具页左上角的 LOGO 原样取出，
assets/img/*.png 透明底；数胎动 .brand-logo、孕期体重 img.brand-logo、孕检日历 .hero-brand i、
胎儿估重 .lg、数宫缩 svg.brand-logo。工具页换 LOGO 时这里要重新取）。
卡底色取点进去那个工具页的主色系、饱和度再深一档（各工具页 theme-color / 主色见每行注释），
这样从卡片点进去颜色是连着的。
只换皮：上面那笔高度账（158+10+64 / 88+10+80+10+44）和版式一个数没动，
@@ -795,12 +797,14 @@ a.skip:focus{left:16px;top:16px}
.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}
/* LOGO 是满幅的圆角方块 / 圆，不能再像插画那样出血到卡边外：一律离右下角 10px 左右。
数胎动的 LOGO 跟卡同是橙色，靠投影把它从底色上托出来（五张统一挂同一档投影）。 */
.bento .mini-card:not(.more) .mc-art{filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}
.mini-card.kick .mc-art{width:44px;right:10px;bottom:12px}
.bento .mc-btn{position:relative;z-index:1}
.mc-art.big{width:80px}
.mini-card.cal .mc-art,.mini-card.curve .mc-art{width:46px;right:2px;bottom:0}
.mini-card.fweight .mc-art{width:46px;right:6px;bottom:4px}
.mc-art.big{width:60px;margin:0 auto 8px}
.mini-card.cal .mc-art,.mini-card.curve .mc-art{width:30px;right:10px;bottom:9px}
.mini-card.fweight .mc-art{width:34px;right:10px;bottom:15px}
/* 告警（胎动偏低 / 宫缩达阈值 / 产检过期）：糖果色底上 --alert 红看不清，换成亮黄字 */
.bento .mini-card.is-warn .mc-sub,.bento .mini-card.is-warn .mc-sub b,
.bento .mini-card.is-warn .mc-big,.bento .mini-card.is-warn .mc-big small,