首页工具区替换为已上架应用宫格: /api/mp/apps 动态渲染(排除授权示例), 点击带身份跳转, 前8个+展开收起 (v26090719)
This commit is contained in:
72
index.html
72
index.html
@@ -6,8 +6,8 @@
|
||||
<meta name="theme-color" content="#F4593C">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>妈妈盒子 · 孕育陪伴</title>
|
||||
<!-- V:26090718 缓存版本标记:改 css/js 时同步 bump 该值,并给下方资源引用加 ?v= 以强制 webview 刷新子资源 -->
|
||||
<link rel="stylesheet" href="mama-box.css?v=26090718">
|
||||
<!-- V:26090719 缓存版本标记:改 css/js 时同步 bump 该值,并给下方资源引用加 ?v= 以强制 webview 刷新子资源 -->
|
||||
<link rel="stylesheet" href="mama-box.css?v=26090719">
|
||||
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -161,67 +161,19 @@
|
||||
<span class="wm" aria-hidden="true">妈妈</span>
|
||||
<div class="dock-head">
|
||||
<h2 class="dock-title" id="dockTitle">宝宝的孕育工具</h2>
|
||||
<button class="dock-all" data-sheet="open">所有工具 ›</button>
|
||||
<button class="dock-all" id="dockAll" style="display:none">所有工具 ›</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>
|
||||
<!-- 五张工具卡 + 一个出口。宫格本身这一版没动:
|
||||
不等宽三列 + 竖向堆叠本来就是这一屏最不传统的部分,
|
||||
而且两列高度是硬凑齐的(见 style.css 里 .mini-card.curve 上面那段),
|
||||
动它得整列重算,收益也不在这儿。 -->
|
||||
<div class="bento">
|
||||
<div class="bento-col">
|
||||
<button class="mini-card kick ripple" data-mini="kick">
|
||||
<div class="mc-head">
|
||||
<div class="mc-title">数胎动</div>
|
||||
<div class="mc-sub">今天 <b id="kickTodayHome">3</b> 次</div>
|
||||
</div>
|
||||
<span class="mc-btn">记录</span>
|
||||
<img class="mc-art" src="assets/img/7980160b80b0.png" alt="" aria-hidden="true">
|
||||
</button>
|
||||
<!-- 第五个工具。原来是「胎心记录」,本批换成「胎儿估重」——
|
||||
后者是真正部署好的站点(beian1.douba.top),点了能用;
|
||||
而胎心记录在这张卡上一直只是个弹 toast 的占位入口。
|
||||
⚠️ 胎心记录**没有被删掉**:它还在「记一下」弹层里(快捷区 q3 +
|
||||
全部工具宫格),档案页那两条「来自「胎心记录」」的历史记录也照旧。
|
||||
这里换掉的只是首页宫格的一个坑位。
|
||||
⚠️ 类名、结构、三个尺寸全部照搬原来那张卡:外层仍是 .mini-card
|
||||
(.heart 只是改名成 .fweight,两条 CSS 跟着改),内部仍是
|
||||
「名字 + 状态两行叠着 + 右下角插画」。所以左列 158 + 10 + 64 = 232
|
||||
这笔账一个数都没动,右列(88 + 10 + 80 + 10 + 44)不用跟着补。
|
||||
图标换成了内联 SVG 的表盘,理由见 patch 脚本里那段注释。 -->
|
||||
<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">
|
||||
</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">
|
||||
<div class="mc-title">孕期体重</div>
|
||||
<div class="mc-big">58.2 <small>kg</small></div>
|
||||
</button>
|
||||
<div class="bento-col">
|
||||
<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">
|
||||
</button>
|
||||
<!-- 生长曲线原来是 flex:1,把这一列剩下的高度全吃了(约 134px),
|
||||
而它的内容和上面的孕检日历一模一样多。压到 80px,
|
||||
省下的 54px 给下面那张「更多工具」。 -->
|
||||
<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">
|
||||
</button>
|
||||
<!-- 通往「记一下」弹层里那十几个工具。底部那颗 FAB 开的也是它。
|
||||
故意不做成糖果色卡:它不是第六个工具,是个出口,
|
||||
灰米底 + 一行小字,和上面五张分得开。 -->
|
||||
<button class="mini-card more ripple" data-sheet="open">
|
||||
<span class="mc-more-t">更多工具</span><i class="chev">›</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 一期 · 工具区 = box_app 已上架应用列表(/api/mp/apps 动态渲染)。
|
||||
原型里那五张演示卡(数胎动/胎儿估重/孕期体重/孕检日历/生长曲线)已整体移除:
|
||||
「今天 3 次 / 58.2kg」这类是写死的演示数据,不是真实功能。
|
||||
应用信息(图标/名称/链接)由 box_app 应用管理统一维护,点击带身份跳转。 -->
|
||||
<div class="app-grid" id="appGrid"></div>
|
||||
<button class="app-more" id="appMore" style="display:none">展开全部工具 ›</button>
|
||||
</section>
|
||||
|
||||
<!-- 模块二 · 今天的动线。
|
||||
@@ -1761,8 +1713,8 @@
|
||||
加载失败/离线时 window.wx 为 undefined,goMall() 会降级为 toast 提示,
|
||||
不影响应用其余功能。 -->
|
||||
|
||||
<script src="js/app.js?v=26090718"></script>
|
||||
<!-- 页面版本号(排查 webview 缓存):底部会显示 v26090718 -->
|
||||
<div id="ver" style="position:fixed;left:0;right:0;bottom:10px;text-align:center;z-index:9999;pointer-events:none;color:#B3A69C;font-size:10px;letter-spacing:.5px">v26090718</div>
|
||||
<script src="js/app.js?v=26090719"></script>
|
||||
<!-- 页面版本号(排查 webview 缓存):底部会显示 v26090719 -->
|
||||
<div id="ver" style="position:fixed;left:0;right:0;bottom:10px;text-align:center;z-index:9999;pointer-events:none;color:#B3A69C;font-size:10px;letter-spacing:.5px">v26090719</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user