diff --git a/index.html b/index.html index 3011d5a..569fef2 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,8 @@ 妈妈盒子 · 孕育陪伴 - - + + @@ -161,19 +161,69 @@

宝宝的孕育工具

- +

妈妈每记录一次，宝宝就多一段成长记忆

- -
- + 动它得整列重算，收益也不在这儿。 --> +
+
+ + + +
+ +
+ + + + + +
+
+ - - -
v26090721
+ + +
v26090722
diff --git a/js/app.js b/js/app.js index 277d96a..4f3cfa5 100644 --- a/js/app.js +++ b/js/app.js @@ -170,10 +170,10 @@ location.href = u; } - /* ================= 首页工具区 = 已上架应用宫格 ================= + /* ================= 「记一下」弹层 · 全部孕期工具 = 已上架应用列表 ================= 数据：box_app /api/mp/apps（应用管理统一维护图标/名称/链接）。 范围：isPublished=1 且有 url；排除授权示例（wx-h5-demo，开发者用的）。 - 交互：默认前 8 个，「所有工具 ›/展开全部工具」展开收起；点击带身份跳转。 */ + 交互：全量铺进弹层宫格（沿用 .apps-grid/.app 样式），点击带身份跳转对应 H5。 */ function appTileColor(name) { const PALETTE = ['#F2917A', '#E8A2B8', '#8FB4E3', '#7FC8A9', '#E3B771', '#A99BD1', '#73BFB2', '#DE8F6E']; let h = 0; @@ -192,36 +192,25 @@ location.href = url; } function renderAppGrid(apps) { - const grid = $('#appGrid'), moreBtn = $('#appMore'), dockAll = $('#dockAll'); + const grid = $('#appsGrid'); if (!grid) return; grid.innerHTML = apps.map(a => { const ico = a.logo || a.icon || ''; const name = a.name || a.identifier || '应用'; - /* 有 logo：白底让图盖满；无 logo：用 colorTheme/调色板 + 首字彩色块。 - ⚠️ colorTheme 目前全是 'blue' 这种颜色名 —— 有图时别拿它当底色， - 不然 37 个磁贴清一色蓝块，图加载前像坏了。 */ + /* 有 logo：白底圆角让图盖满；无 logo：colorTheme/调色板 + 首字彩色块。 + ⚠️ colorTheme 目前全是 'blue' 颜色名 —— 有图时别拿它当底色，否则清一色蓝。 */ const bg = ico ? 'background:#fff' : 'background:' + (a.colorTheme || appTileColor(name)); - const img = ico ? '' : (name.slice(0, 1)); - return ''; + const img = ico ? '' : '' + name.slice(0, 1) + ''; + return ''; }).join(''); /* 磁贴点击（事件委托，innerHTML 重建后不用重绑） */ grid.onclick = function (e) { - const t = e.target.closest('.app-tile'); + const t = e.target.closest('.app'); if (t && t.dataset.url) jumpApp(decodeURIComponent(t.dataset.url)); }; - if (apps.length > 8) { - moreBtn.style.display = 'block'; - dockAll.style.display = ''; - } - } - function toggleAppGrid() { - const grid = $('#appGrid'), moreBtn = $('#appMore'), dockAll = $('#dockAll'); - const ex = grid.classList.toggle('expanded'); - moreBtn.style.display = ex ? 'none' : 'block'; - dockAll.textContent = ex ? '收起 ›' : '所有工具 ›'; - haptic(); + /* 角标「共 N 个」同步真实数量 */ + const cnt = $('.apps-head.for-all .sec-more'); + if (cnt) cnt.textContent = '共 ' + apps.length + ' 个 ›'; } function loadPublishedApps() { fetch('/api/mp/apps?isPublished=1&pageSize=200') @@ -233,10 +222,8 @@ .sort((x, y) => (x.seq || 0) - (y.seq || 0) || (x.no || 0) - (y.no || 0)); renderAppGrid(apps); }) - .catch(function () { /* 拉不到就保持空宫格，不影响其余页面 */ }); + .catch(function () { /* 拉不到就保留弹层原有占位，不影响其余页面 */ }); } - $('#appMore').addEventListener('click', toggleAppGrid); - $('#dockAll').addEventListener('click', toggleAppGrid); loadPublishedApps(); function go(name) { @@ -1858,7 +1845,7 @@ n.textContent = n.dataset.wk === 'cn' ? '孕 ' + state.week + ' 周' : state.week; }); const next = CHECKUPS.find(w => w * 7 > gaNow); - /* #calNext 原在首页孕检日历卡上 —— 那批演示卡已换成应用宫格，元素没了，别再写 */ + $('#calNext').textContent = mdTxt(next ? gaToDate(next * 7) : state.due); const t = new Date(); $('#noteWhen').textContent = mdTxt(t) + ' ' + WEEKDAY[t.getDay()] + ' · ' + gaTxt(gaNow); } diff --git a/mama-box.css b/mama-box.css index 0ed21a7..1dddd15 100644 --- a/mama-box.css +++ b/mama-box.css @@ -2640,14 +2640,5 @@ a.skip:focus{left:16px;top:16px} @keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.32)}100%{transform:scale(1)}} -/* ================= 首页工具区 = 已上架应用宫格 ================= - 数据来自 box_app /api/mp/apps（应用管理统一维护图标/名称/链接）。 - 默认显示前 8 个，.expanded 时全量展开；点击磁贴带身份跳转对应 H5。 */ -.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 8px;margin-top:14px} -.app-grid:not(.expanded) .app-tile:nth-child(n+9){display:none} -.app-tile{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;padding:0;cursor:pointer;min-width:0} -.app-ico{width:52px;height:52px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 3px 12px rgba(43,35,32,.08);display:grid;place-items:center;font-size:20px;font-weight:800;color:#fff;flex:0 0 auto} -.app-ico img{width:100%;height:100%;object-fit:cover;display:block} -.app-tile-name{font-size:11px;color:#2B2320;text-align:center;line-height:1.3;max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} -.app-more{display:block;width:100%;margin-top:16px;padding:11px;border:1px dashed #E4D5CB;border-radius:12px;background:none;color:#A08C80;font-size:13px;font-weight:600;cursor:pointer} -.app-more:active{background:#F3EAE3} +/* 弹层「全部孕期工具」：无 logo 应用的字母兜底块（与 .a-ico 同尺寸） */ +.apps-grid .a-ico-letter{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:22px;color:#fff;font-size:22px;font-weight:800}