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:
18
index.html
18
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: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 的左格 + 圆点 + 剩下的),点才落得进同一条竖线里。
|
||||
|
||||
Reference in New Issue
Block a user