style(首页工具卡): 图标改成白色半透明水印,降低视觉干扰 (v26093022)
用户反馈五个彩色图标抢眼、满屏都是图标。图标只作装饰,统一改为: - 白色单色 SVG(彩色细节改用镂空),28% 透明度; - 放大并转 -12°,斜压在卡片右下角、出血到卡边外,退成卡面底纹; - 孕期体重卡的秤也改为右下角水印,标题和数字居中;文字层统一压在水印之上。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
14
index.html
14
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: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 开的也是它。
|
||||
故意不做成糖果色卡:它不是第六个工具,是个出口,
|
||||
|
||||
Reference in New Issue
Block a user