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 的左格 + 圆点 + 剩下的),点才落得进同一条竖线里。
|
||||
|
||||
20
mama-box.css
20
mama-box.css
@@ -639,12 +639,22 @@ a.skip:focus{left:16px;top:16px}
|
||||
320px 视口下 .step 一行内容总宽约 311 > 可用 264,flex 就去压唯一压得动的时间列,
|
||||
把它压到约 36px,圆点跟着左移,看上去就是「时间贴到竖线上」。
|
||||
现在三处统一 flex:0 0 var(--tl-time),谁都不许缩。 */
|
||||
/* 今日脚印:「无档案」时的引导占位(替换掉收起的时间轴) */
|
||||
.tl-guide{background:#fff;border-radius:22px;padding:20px 18px;box-shadow:var(--sh);text-align:center}
|
||||
.tl-guide-t{font-size:15px;font-weight:800;color:var(--ink)}
|
||||
.tl-guide-s{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.6}
|
||||
/* 引导占位(今天没有任何足迹时):**沿用 AI 气泡那套语言** —— 左列 + 圆点 + 带尖角的气泡,
|
||||
与时间轴共用同一条竖线,不再是一张横跨整块的白卡(用户反馈那样突兀)。
|
||||
⚠️ 底色用白(用户指定):所以要**加一圈描边**才看得出气泡边界 ——
|
||||
AI 气泡靠暖渐变区分,白气泡压白底只剩阴影会糊成一片。
|
||||
⚠️ 尖角用「旋转 45° 的小方块 + 同色描边」,这样描边能跟着拐过去;纯 border 三角做不出描边。 */
|
||||
.tl-guide{position:relative;display:flex;align-items:flex-start;gap:var(--tl-gap);
|
||||
width:100%;padding:10px var(--tl-pad) 0}
|
||||
.tl-guide-bubble{display:block;position:relative;background:#fff;border:1px solid var(--line);
|
||||
border-radius:4px 16px 16px 16px;padding:11px 14px 12px}
|
||||
.tl-guide-bubble::before{content:"";position:absolute;left:-5px;top:11px;width:9px;height:9px;
|
||||
background:#fff;border-left:1px solid var(--line);border-bottom:1px solid var(--line);
|
||||
transform:rotate(45deg);border-radius:0 0 0 2px}
|
||||
.tl-guide-t{display:block;font-size:15px;font-weight:600;line-height:1.55;color:#403430}
|
||||
.tl-guide-s{display:block;font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.6}
|
||||
/* 引导里可点的应用芯片(名字来自接口 unused[];identifier 是 box_app 按 App 表 url 路径解析的) */
|
||||
.tl-guide-apps{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
|
||||
.tl-guide-apps{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
|
||||
.tl-guide-apps:empty{display:none}
|
||||
.tl-chip{font:inherit;font-size:12.5px;font-weight:700;color:var(--brand-dk);
|
||||
background:#FFF1EC;border:1px solid #FFDFD5;border-radius:999px;padding:7px 13px;line-height:1}
|
||||
|
||||
Reference in New Issue
Block a user