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

style(首页工具卡): 图标改成白色半透明水印，降低视觉干扰 (v26093022)

Browse Source 
用户反馈五个彩色图标抢眼、满屏都是图标。图标只作装饰，统一改为：
- 白色单色 SVG（彩色细节改用镂空），28% 透明度；
- 放大并转 -12°，斜压在卡片右下角、出血到卡边外，退成卡面底纹；
- 孕期体重卡的秤也改为右下角水印，标题和数字居中；文字层统一压在水印之上。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-09-30 17:06:48 +00:00
parent a7e71fda2d
commit 53b208e3a5
13 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/img/3c4cf0da356c.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="8 8 32 32"><circle cx="24" cy="24" r="13.5" fill="none" stroke="#fff" stroke-width="3.2"/><path d="M24 24L30.5 17.5" stroke="#fff" stroke-width="3.2" stroke-linecap="round"/><circle cx="24" cy="24" r="3" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 272 B

1
assets/img/3fb748e6df44.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="7 11 35 35"><path d="M9 31c3.6 0 4.2-13 7.6-13s4 13 7.6 13 4.2-13 7.6-13 4 13 7.6 13" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><circle cx="24" cy="38.5" r="2.1" fill="#F2B44A"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 282 B

1
assets/img/5486081fed1b.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="10.3 10.3 27.4 27.4"><circle cx="24" cy="24" r="13.2" fill="#F8FBFF"/><path d="M24 24L31.6 16.6" stroke="#F2876E" stroke-width="3.2" stroke-linecap="round" fill="none"/><circle cx="24" cy="24" r="2.6" fill="#5E78B4"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 272 B

1
assets/img/6a738c6b4784.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="8.5 8 35 35"><ellipse cx="26" cy="30" rx="9" ry="11.5" transform="rotate(10 26 30)" fill="#fff"/><circle cx="14.5" cy="17" r="3.2" fill="#fff"/><circle cx="21.5" cy="13.5" r="2.8" fill="#fff"/><circle cx="28" cy="12.5" r="2.5" fill="#fff"/><circle cx="34" cy="14" r="2.2" fill="#fff"/><circle cx="38.5" cy="17.5" r="1.9" fill="#fff"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 389 B

1
assets/img/6add0c9e5856.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="8.5 8 35 35" fill="#fff"><ellipse cx="26" cy="30" rx="9" ry="11.5" transform="rotate(10 26 30)"/><circle cx="14.5" cy="17" r="3.2"/><circle cx="21.5" cy="13.5" r="2.8"/><circle cx="28" cy="12.5" r="2.5"/><circle cx="34" cy="14" r="2.2"/><circle cx="38.5" cy="17.5" r="1.9"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 329 B

1
assets/img/a693b92f3239.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="12 8 76 80"><defs><mask id="m"><rect x="0" y="0" width="100" height="100" fill="#fff"/><path d="M16 42H84" stroke="#000" stroke-width="4"/><path d="M37 60l8 8 17-17" fill="none" stroke="#000" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round"/><rect x="27" y="10" width="15" height="24" rx="7.5" fill="#000"/><rect x="58" y="10" width="15" height="24" rx="7.5" fill="#000"/></mask></defs><rect x="16" y="22" width="68" height="62" rx="14" fill="#fff" mask="url(#m)"/><rect x="30" y="12" width="9" height="18" rx="4.5" fill="#fff"/><rect x="61" y="12" width="9" height="18" rx="4.5" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 665 B

1
assets/img/a8775a486c4c.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="12 10 76 78"><rect x="16" y="22" width="68" height="62" rx="14" fill="#C7D9AC"/><path d="M16 42V36a14 14 0 0 1 14-14h40a14 14 0 0 1 14 14v6Z" fill="#8CAE64"/><rect x="30" y="12" width="9" height="18" rx="4.5" fill="#DDE9CC"/><rect x="61" y="12" width="9" height="18" rx="4.5" fill="#DDE9CC"/><rect x="25" y="48" width="50" height="28" rx="8" fill="#EEF4E5"/><path d="M38 62l7.5 7.5L62 53" fill="none" stroke="#6F9A48" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 538 B

1
assets/img/ad7487f2e445.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="7 11 35 35"><path d="M9 31c3.6 0 4.2-13 7.6-13s4 13 7.6 13 4.2-13 7.6-13 4 13 7.6 13" fill="none" stroke="#fff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/><circle cx="24" cy="38.5" r="2.3" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 281 B

1
assets/img/e23a31b6fb87.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="6 4 88 92"><defs><linearGradient id="b" x1="0" y1="0" x2=".3" y2="1"><stop offset="0" stop-color="#FCCBBB"/><stop offset="1" stop-color="#F3A48F"/></linearGradient><linearGradient id="d" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#7A8089"/><stop offset="1" stop-color="#5A6069"/></linearGradient></defs><rect x="10" y="12" width="80" height="80" rx="20" fill="#E3826D"/><rect x="10" y="8" width="80" height="80" rx="20" fill="url(#b)"/><path d="M50 55V84M16 60H84" stroke="#EE9A85" stroke-width="1.2" opacity=".6"/><circle cx="50" cy="33" r="19.5" fill="#FFE6DC"/><circle cx="50" cy="33" r="17" fill="url(#d)"/><line x1="39.19" y1="36.93" x2="36.37" y2="37.96" stroke="#fff" stroke-width="1.6" stroke-linecap="round" opacity=".9"/><line x1="37.51" y1="32.56" x2="35.51" y2="32.49" stroke="#fff" stroke-width="1.1" stroke-linecap="round" opacity=".9"/><line x1="38.58" y1="27.92" x2="36.75" y2="27.10" stroke="#fff" stroke-width="1.1" stroke-linecap="round" opacity=".9"/><line x1="41.32" y1="24.01" x2="39.93" y2="22.57" stroke="#fff" stroke-width="1.1" stroke-linecap="round" opacity=".9"/><line x1="45.32" y1="21.41" x2="44.57" y2="19.56" stroke="#fff" stroke-width="1.1" stroke-linecap="round" opacity=".9"/><line x1="50.00" y1="21.50" x2="50.00" y2="18.50" stroke="#fff" stroke-width="1.6" stroke-linecap="round" opacity=".9"/><line x1="54.68" y1="21.41" x2="55.43" y2="19.56" stroke="#fff" stroke-width="1.1" stroke-linecap="round" opacity=".9"/><line x1="58.68" y1="24.01" x2="60.07" y2="22.57" stroke="#fff" stroke-width="1.1" stroke-linecap="round" opacity=".9"/><line x1="61.42" y1="27.92" x2="63.25" y2="27.10" stroke="#fff" stroke-width="1.1" stroke-linecap="round" opacity=".9"/><line x1="62.49" y1="32.56" x2="64.49" y2="32.49" stroke="#fff" stroke-width="1.1" stroke-linecap="round" opacity=".9"/><line x1="60.81" y1="36.93" x2="63.63" y2="37.96" stroke="#fff" stroke-width="1.6" stroke-linecap="round" opacity=".9"/><path d="M50 38V21" stroke="#F58A70" stroke-width="3" stroke-linecap="round"/><circle cx="50" cy="39" r="5" fill="#F58A70"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

1
assets/img/fc0ab3d2e21a.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="6 6 88 88"><defs><mask id="m"><rect x="0" y="0" width="100" height="100" fill="#fff"/><circle cx="50" cy="34" r="18" fill="#000"/><path d="M26 68H74" stroke="#000" stroke-width="3" stroke-linecap="round"/></mask></defs><rect x="10" y="10" width="80" height="80" rx="22" fill="#fff" mask="url(#m)"/><line x1="38.67" y1="36.00" x2="36.21" y2="36.43" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/><line x1="38.89" y1="31.02" x2="36.48" y2="30.38" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/><line x1="41.19" y1="26.61" x2="39.28" y2="25.00" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/><line x1="45.14" y1="23.58" x2="44.08" y2="21.31" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/><line x1="50.00" y1="22.50" x2="50.00" y2="20.00" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/><line x1="54.86" y1="23.58" x2="55.92" y2="21.31" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/><line x1="58.81" y1="26.61" x2="60.72" y2="25.00" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/><line x1="61.11" y1="31.02" x2="63.52" y2="30.38" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/><line x1="61.33" y1="36.00" x2="63.79" y2="36.43" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/><path d="M50 38L50 24" stroke="#fff" stroke-width="3.2" stroke-linecap="round"/><circle cx="50" cy="38" r="4" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

14
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:26093021 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26093022 缓存版本标记：改 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 第四节） -->
@@ -192,7 +192,7 @@
</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 五张卡改版：白色粗标题 + 各工具 LOGO 里的图形（取自点进去那个工具页左上角的 LOGO，
去掉外面的圆角方块 / 圆环底，只留里面的图形；assets/img/*.svg 矢量）。卡底色跟点进去的工具页同色系、稍深一档。
只留里面的图形），做成白色单色半透明「水印」斜压在卡片右下角，只作装饰；assets/img/*.svg 矢量。卡底色跟点进去的工具页同色系、稍深一档。
只换皮：排布、高度账、data-mini 跳转和各 id 的数据回填一律没动。样式见 mama-box.css「参考图改版」。 -->
<!-- 五张工具卡 + 一个出口。宫格本身这一版没动：
不等宽三列 + 竖向堆叠本来就是这一屏最不传统的部分，
@@ -213,7 +213,7 @@
<div class="mc-extra" id="kickExtra"></div>
</div>
<span class="mc-btn">记录</span>
<img class="mc-art" src="assets/img/6a738c6b4784.svg" alt="" aria-hidden="true">
<img class="mc-art" src="assets/img/6add0c9e5856.svg" alt="" aria-hidden="true">
</button>
<!-- 第五个工具。原来是「胎心记录」，本批换成「胎儿估重」——
后者是真正部署好的站点（beian1.douba.top），点了能用；
@@ -229,11 +229,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/5486081fed1b.svg" alt="" aria-hidden="true">
<img class="mc-art" src="assets/img/3c4cf0da356c.svg" alt="" aria-hidden="true">
</button>
</div>
<button class="mini-card weight ripple" data-mini="weight">
<img class="mc-art big" src="assets/img/e23a31b6fb87.svg" alt="" aria-hidden="true">
<img class="mc-art big" src="assets/img/fc0ab3d2e21a.svg" alt="" aria-hidden="true">
<div class="mc-title">孕期体重</div>
<!-- ⚠️ 这里原来是写死的演示值「58.2 kg」，任何用户都会看到（2026-09-22 演示数据泄漏）。
现在由 `applyRemoteCards()` 按 box_app 封装的卡片接口写入：
@@ -246,7 +246,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/a8775a486c4c.svg" alt="" aria-hidden="true">
<img class="mc-art" src="assets/img/a693b92f3239.svg" alt="" aria-hidden="true">
</button>
<!-- 生长曲线原来是 flex:1，把这一列剩下的高度全吃了（约 134px），
而它的内容和上面的孕检日历一模一样多。压到 80px，
@@ -262,7 +262,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/3fb748e6df44.svg" alt="" aria-hidden="true">
<img class="mc-art" src="assets/img/ad7487f2e445.svg" 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 = '26093021';
var VER = '26093022';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

22
mama-box.css
View File

@@ -757,8 +757,11 @@ a.skip:focus{left:16px;top:16px}
数胎动 .brand-logo、孕期体重 img.brand-logo、孕检日历 .hero-brand i、胎儿估重 .lg、数宫缩 svg.brand-logo）。
用户要求只留 LOGO 里面的图形、不要外面的圆角方块 / 圆环底，并且要高清：
数胎动 / 胎儿估重 / 数宫缩的原 LOGO 本身是 SVG，直接删掉底板那一层；
孕期体重（128px webp）和孕检日历（100px png）原图是小位图、放大就糊，照原图配色重画成矢量。
孕期体重（128px webp）和孕检日历（100px png）原图是小位图、放大就糊，照原图重画成矢量。
都在 assets/img/*.svg，工具页换 LOGO 时这里要重新取。
用户随后反馈五个彩色图标「抢、太乱，满屏都是图标」：图标只是装饰，于是统一成
**白色单色**（原来的彩色细节改用镂空表达），半透明、放大、斜压在右下角并出血到卡边外，
退成卡面的底纹，让标题和数字当主角。
卡底色取点进去那个工具页的主色系、饱和度再深一档（各工具页 theme-color / 主色见每行注释），
这样从卡片点进去颜色是连着的。
只换皮：上面那笔高度账（158+10+64 / 88+10+80+10+44）和版式一个数没动，
@@ -774,13 +777,16 @@ 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)}
/* 图形统一离右下角 10px 左右，挂一档浅投影，让白色图形在渐变底上立得住。 */
.bento .mini-card:not(.more) .mc-art{filter:drop-shadow(0 2px 4px rgba(0,0,0,.16))}
.mini-card.kick .mc-art{width:36px;right:10px;bottom:8px}
.bento .mc-btn{position:relative;z-index:1}
.mc-art.big{width:64px;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:30px;right:12px;bottom:17px}
/* 水印式图标：五张统一 28% 白、转 -12°、右下角出血（.mini-card 本身 overflow:hidden 负责裁边）。
⚠️ 文字层必须压在水印上面：除 .mc-art 外的子元素一律 relative + z-index:1。
⚠️ 孕期体重那张原来是「图在上、字在下」的竖排，图标改成 absolute 退出文档流后，
标题和数字靠卡片自身的 flex 居中落在正中，不用另调。 */
.bento .mini-card:not(.more)>*:not(.mc-art){position:relative;z-index:1}
.bento .mini-card:not(.more) .mc-art{filter:none;opacity:.28;transform:rotate(-12deg);pointer-events:none}
.mini-card.kick .mc-art{width:78px;right:-10px;bottom:-12px}
.mini-card.weight .mc-art.big{position:absolute;width:90px;right:-14px;bottom:-12px;margin:0}
.mini-card.cal .mc-art,.mini-card.curve .mc-art{width:52px;right:-6px;bottom:-8px}
.mini-card.fweight .mc-art{width:50px;right:-6px;bottom:-12px}
/* 告警（胎动偏低 / 宫缩达阈值 / 产检过期）：糖果色底上 --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,