style(今日脚印): 引导占位改用 AI 气泡那套语言(白气泡 + 竖线圆点),不再横跨整块 (v26092218)

用户反馈:原来那张横跨整块的白卡「放在这有点突兀」,要求按 AI 气泡的样式、用白色背景实现。

- 标记改为与 .ai-bubble **同构**:空 .ab-badge 占位(宽度 = --tl-time)+ .ab-dot + .ab-body >
  .tl-guide-bubble。于是圆点落在**同一条竖线**上,与时间轴/落款行对齐。
- 样式:白底 + 1px --line 描边 + 4px/16px 圆角 + 指向竖线的尖角。
  ⚠️ 白底必须带描边:AI 气泡靠暖渐变区分,白气泡压白底只剩阴影会糊成一片。
  ⚠️ 尖角用「旋转 45° 的小方块 + 同色描边」(纯 border 三角做不出描边)。
  ⚠️ 文案层级:lead(上游引导语)走 15px/600 主文案,下面那行提示走 12.5px 次要色,芯片左对齐。
- 行为不变(文案仍来自接口 lead,芯片仍来自 unused[] 且可点)。

本地验证:guide 模式渲染为竖线上的白气泡(版式已截图确认)、rows 模式不受影响、无 JS 异常。
This commit is contained in:
2026-09-23 01:02:51 +08:00
parent 77fb75796d
commit 31163448da
2 changed files with 28 additions and 10 deletions

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:26092217 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26092218 缓存版本标记:改 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 第四节) -->
@@ -319,11 +319,19 @@
<!-- 引导占位(fpApply('guide') 才显示,此时 #tlSteps 收起):
文案与应用**都来自接口** —— lead 是上游自己的引导语(如「宝妈,先从这几件事记起吧。」),
unused[] 是今天没用过的应用,能对上 App 表的会渲染成可点芯片(见 js 的 renderGuide)。
这里的默认文案只在接口没给 lead 时兜底。 -->
⚠️ 版式**沿用下面 AI 气泡那套语言**(左列 + 圆点 + 带尖角的气泡),只是底色用白 ——
用户反馈原来那张横跨整块的白卡「放在这有点突兀」;现在它与时间轴共用同一条竖线。
左边的空 .ab-badge 只是**占位**,宽度 = --tl-time,好让圆点落在竖线上(与 AI 行同列)。 -->
<div class="tl-guide" id="tlGuide" style="display:none">
<div class="tl-guide-t" id="tlGuideTitle">还没有你的脚印</div>
<div class="tl-guide-s" id="tlGuideSub">去上面的工具记一笔,这里就会长出你今天的脚印</div>
<div class="tl-guide-apps" id="tlGuideApps"></div>
<span class="ab-badge"></span>
<span class="ab-dot"></span>
<span class="ab-body">
<span class="tl-guide-bubble">
<span class="tl-guide-t" id="tlGuideTitle">还没有你的脚印</span>
<span class="tl-guide-s" id="tlGuideSub">去上面的工具记一笔,这里就会长出你今天的脚印</span>
<span class="tl-guide-apps" id="tlGuideApps"></span>
</span>
</span>
</div>
<!-- 这一天的收尾节点。三个直接子元素刻意和 .step 一样排
(42px 的左格 + 圆点 + 剩下的),点才落得进同一条竖线里。