v26110257 首页孕妈广场卡堆首次露出时演示左右滑动（只演一次，等首页引导关闭后）

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 08:53:00 +00:00
parent 977aeeff5d
commit ec23742458
9 changed files with 76 additions and 18 deletions
--- a/guangchang/ceshi/index.html
+++ b/guangchang/ceshi/index.html
@@ -367,8 +367,8 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
 </div>
 <div class="toast" id="toast"></div>

-<script src="meta.js?v=26110256"></script>
-<script src="tests.js?v=26110256"></script>
+<script src="meta.js?v=26110257"></script>
+<script src="tests.js?v=26110257"></script>
 <script>
 (function () {
  'use strict';
--- a/guangchang/index.html
+++ b/guangchang/index.html
@@ -666,10 +666,10 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
 <div id="sheet" role="dialog" aria-modal="true"><i class="sg"></i><div class="sbd" id="sbd"></div></div>
 <div class="toast" id="toast"></div>

-<script src="topics.js?v=26110256"></script>
-<script src="data.js?v=26110256"></script>
-<script src="feed.js?v=26110256"></script>
-<script src="ceshi/meta.js?v=26110256"></script>
+<script src="topics.js?v=26110257"></script>
+<script src="data.js?v=26110257"></script>
+<script src="feed.js?v=26110257"></script>
+<script src="ceshi/meta.js?v=26110257"></script>
 <script>
 (function () {
  'use strict';
@@ -735,7 +735,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
  var CMD = null, CMERR = false;
  /* 头像编码：数字 = av/NNNN.webp（旧代码头像）；'av:c012' = av/c012.webp（卡通/可爱卡通）；'/…' = 站内绝对路径（内置头像库 /_bridge/avatars/）；其余 = assets/img/mom/xxx.jpg */
  var avP = function (a) { return typeof a === 'number' ? 'av/' + ('000' + a).slice(-4) + '.webp' : a.indexOf('av:') === 0 ? 'av/' + a.slice(3) + '.webp' : a.charAt(0) === '/' ? a : '../assets/img/mom/' + a + '.jpg'; };
-  fetch('cm.json?v=26110256').then(function (r) { return r.json(); }).then(function (j) {
+  fetch('cm.json?v=26110257').then(function (r) { return r.json(); }).then(function (j) {
    CMD = j; if (openId && NBY[openId]) { renderComments(NBY[openId]); syncBar(NBY[openId]); }
  }).catch(function () { CMERR = true; if (openId && NBY[openId]) renderComments(NBY[openId]); });
  function commentsOf(n) {
--- a/guangchang/mine/index.html
+++ b/guangchang/mine/index.html
@@ -105,7 +105,7 @@ main{padding:6px 16px 0}
 </div>
 <div class="wb"><button type="button" id="write"><svg class="ic" viewBox="0 0 24 24"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></svg>写新的故事</button></div>

-<script src="../topics.js?v=26110256"></script>
+<script src="../topics.js?v=26110257"></script>
 <script>
 (function () {
  'use strict';
--- a/index.html
+++ b/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:26110256 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26110257 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
 <link rel="stylesheet" href="mama-box.css">
 <link rel="stylesheet" href="night.css">
 <!-- 夜晚模式：首屏绘制前就按上次的选择加 class，避免先白后黑闪一下（开关在首页右上角 #nightBtn，逻辑见 app.js） -->
@@ -2519,7 +2519,7 @@
 <script src="/_bridge/avatar-picker.js?v=26101105"></script>
 <script src="/_bridge/hand-icons.js?v=26101202"></script>
 <script src="js/zodiac-art.js"></script>
-<script src="guangchang/topics.js?v=26110256"></script>
+<script src="guangchang/topics.js?v=26110257"></script>
 <script src="js/app.js"></script>
 <script>
 /* 11-02 首页「孕妈广场」效果稿：地址带 ?gcv=1~6 时，把 #gcHome 换成 demo/gch/vN.css + vN.js 的版式并滚到这一块。
@@ -2527,7 +2527,7 @@
 (function () {
  var m = location.search.match(/[?&]gcv=([1-6])(?:&|$)/);
  if (!m) window.__gcDefault = 1;
-  var n = m ? m[1] : '6', l = document.createElement('link'), s = document.createElement('script'), q = m ? Date.now() : 'v=26110256';
+  var n = m ? m[1] : '6', l = document.createElement('link'), s = document.createElement('script'), q = m ? Date.now() : 'v=26110257';
  var dir = n === '4' || n === '6' ? 'js/gch/' : 'demo/gch/';   /* 11-03 上正式：定稿 V6（含它套的 V4）并进 js/gch/，其余效果稿仍在 demo/ */
  l.rel = 'stylesheet'; l.href = dir + 'v' + n + '.css?' + q;
  s.src = dir + 'v' + n + '.js?' + q;
@@ -2536,7 +2536,7 @@
  /* 11-02 品牌露出（用户定 4 处都要）：默认加载，?brand=0 可关掉对比；11-03 已并进 js/gch/ */
  if (!/[?&]brand=0/.test(location.search)) {
    var bl = document.createElement('link'), bs = document.createElement('script');
-    bl.rel = 'stylesheet'; bl.href = 'js/gch/brand.css?v=26110256'; bs.src = 'js/gch/brand.js?v=26110256';
+    bl.rel = 'stylesheet'; bl.href = 'js/gch/brand.css?v=26110257'; bs.src = 'js/gch/brand.js?v=26110257';
    document.head.appendChild(bl); document.body.appendChild(bs);
  }
 })();
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
 (function () {
  'use strict';
  /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26110256';
+  var VER = '26110257';
  const $ = (s, c) => (c || document).querySelector(s);
  const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

--- a/js/gch/v4.css
+++ b/js/gch/v4.css
@@ -91,3 +91,10 @@
@media (prefers-reduced-motion: reduce){
  #gcHome.gv4 .g4-card,#gcHome.gv4 .g4-cat button{transition:none!important}
 }
+
+/* 11-03 首次进首页的「可以左右滑」提示：小手 + 气泡，压在卡堆中间偏右 */
+#gcHome.gv4 .g4-hint{position:absolute;left:0;right:40px;top:50%;z-index:40;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;transform:translateY(-50%);transition:opacity .25s}
+#gcHome.gv4 .g4-hint.off{opacity:0}
+#gcHome.gv4 .g4-hand{width:46px;height:46px;margin-left:70px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);box-shadow:0 6px 18px rgba(80,30,20,.28)}
+#gcHome.gv4 .g4-hand svg{width:26px;height:26px;fill:none;stroke:#E2694A;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
+#gcHome.gv4 .g4-hint b{padding:6px 12px;border-radius:99px;background:rgba(42,30,30,.72);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.5px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
--- a/js/gch/v4.js
+++ b/js/gch/v4.js
@@ -181,9 +181,60 @@
  var lastUB = userBand();
  window.addEventListener('mb-preg', function () { var u = userBand(); if (u !== lastUB) { lastUB = u; paint(cur, true); } });
  paint('', true);
+
+  /* 11-03 用户：「首次进入首页时，孕妈广场下面的图片给一个左右滑动的动效，提示用户可以滑」
+     → 卡堆第一次露出大半屏时：顶上那张往左探 2 下再回来 + 小手 + 「左右滑动看更多」；只在第一次进首页演一次（mmbox.gc4.hint.v1），
+       用户自己滑过 / 点过卡堆就不再演；演的过程中一碰就停。系统开了「减少动态效果」不演。 */
+  var HK = 'mmbox.gc4.hint.v1', hinted = false;
+  try { hinted = !!localStorage.getItem(HK); } catch (e) {}
+  function hintDone() { hinted = true; try { localStorage.setItem(HK, '1'); } catch (e) {} }
+  if (!hinted && !reduce && window.IntersectionObserver && Element.prototype.animate) {
+    var stage = sec.querySelector('.g4-stage'), hintEl = null, anims = [], hintT = 0;
+    var stopHint = function () {
+      clearTimeout(hintT); anims.forEach(function (a) { try { a.cancel(); } catch (e) {} }); anims = [];
+      if (hintEl) { var h = hintEl; hintEl = null; h.classList.add('off'); setTimeout(function () { h.remove(); }, 260); }
+    };
+    ['touchstart', 'mousedown'].forEach(function (ev) { deck.addEventListener(ev, function () { if (!hinted) hintDone(); stopHint(); }, { passive: true }); });
+    /* 卡堆露出 60% 以上（扣掉底部 tab 栏那条）且首页引导 coach.js 的遮罩已关、页面在前台，停 0.5 秒再演；引导还开着就等它关 */
+    var seen = false, waitT = 0;
+    function tryPlay() {
+      clearTimeout(waitT);
+      if (hinted || !seen) return;
+      if (document.querySelector('.mb-coach') || document.hidden) { waitT = setTimeout(tryPlay, 700); return; }
+      hintT = setTimeout(function () {
+        if (!seen || hinted || document.querySelector('.mb-coach')) { tryPlay(); return; }
+        io.disconnect();
+        var c = cards[idx]; if (!c || hinted) return;
+        hintDone();
+        stage.insertAdjacentHTML('beforeend', '<div class="g4-hint" aria-hidden="true"><span class="g4-hand"><svg viewBox="0 0 24 24"><path d="M9.5 11.2V5.3a1.5 1.5 0 013 0v5.2m0-.7V9a1.5 1.5 0 013 0v1.6m0-.4a1.5 1.5 0 013 0v4.3c0 3.4-2.4 6-5.7 6h-.9c-1.8 0-3.2-.8-4.3-2.2l-3-4a1.5 1.5 0 012.3-1.9l1.6 1.7V11.2"/></svg></span><b>左右滑动 看更多</b></div>');
+        hintEl = stage.lastElementChild;
+        var ez = { duration: 2600, easing: 'ease-in-out', iterations: 1 };
+        var kf = [
+          { transform: 'none', offset: 0 }, { transform: 'translateX(-46px) rotate(-5deg)', offset: .2 }, { transform: 'none', offset: .38 },
+          { transform: 'translateX(-46px) rotate(-5deg)', offset: .6 }, { transform: 'none', offset: .78 }, { transform: 'none', offset: 1 }
+        ];
+        anims.push(c.animate(kf, ez));
+        var n1 = cards[idx + 1];   /* 后面那张跟着往前凑一点，像要接上来 */
+        if (n1) anims.push(n1.animate([
+          { transform: 'translate(12px,4px) rotate(4deg) scale(.95)', offset: 0 }, { transform: 'translate(4px,2px) rotate(1.5deg) scale(.97)', offset: .2 },
+          { transform: 'translate(12px,4px) rotate(4deg) scale(.95)', offset: .38 }, { transform: 'translate(4px,2px) rotate(1.5deg) scale(.97)', offset: .6 },
+          { transform: 'translate(12px,4px) rotate(4deg) scale(.95)', offset: .78 }, { transform: 'translate(12px,4px) rotate(4deg) scale(.95)', offset: 1 }
+        ], ez));
+        var hd = hintEl.querySelector('.g4-hand');
+        anims.push(hd.animate([
+          { transform: 'translateX(0)', opacity: 0, offset: 0 }, { transform: 'translateX(0)', opacity: 1, offset: .04 }, { transform: 'translateX(-60px)', opacity: 1, offset: .2 },
+          { transform: 'translateX(0)', opacity: 1, offset: .38 }, { transform: 'translateX(-60px)', opacity: 1, offset: .6 }, { transform: 'translateX(0)', opacity: 1, offset: .78 },
+          { transform: 'translateX(0)', opacity: 0, offset: 1 }
+        ], ez));
+        hintT = setTimeout(stopHint, 2900);
+      }, 500);
+    }
+    var io = new IntersectionObserver(function (es) { seen = es[0].isIntersecting; if (seen) tryPlay(); }, { threshold: .6, rootMargin: '0px 0px -110px 0px' });
+    io.observe(deck);
+  }
  sec.dispatchEvent(new Event('gc4-ready'));   /* V6 合并版等这个再往里插「其他妈妈也在搜」 */
 }
  /* feed.js 首页默认不加载（index.html 只引了 topics.js），这里按需拉一次 */
  if (window.GC_FEED) init();
-  else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110256'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
+  else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110257'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
 })();
--- a/js/gch/v6.js
+++ b/js/gch/v6.js
@@ -6,9 +6,9 @@
 (function () {
  var sec = document.getElementById('gcHome');
  if (!sec) return;
-  var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/gch/v4.css?v=26110256';
+  var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/gch/v4.css?v=26110257';
  document.head.appendChild(l);
-  var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110256';
+  var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110257';
  s.onload = function () { if (sec.querySelector('.g4-foot')) merge(); else sec.addEventListener('gc4-ready', merge, { once: true }); };   /* v4 要先拉 feed.js 才渲染 */
  document.body.appendChild(s);

--- a/topic/_shared/tools.js
+++ b/topic/_shared/tools.js
@@ -68,7 +68,7 @@
  function getJSON(u) { return fetch(u, { cache: 'no-cache' }).then(function (r) { if (!r.ok) throw r.status; return r.json(); }); }

  function related(box) {
-    getJSON('../_shared/idx.json?v=26110256').then(function (idx) {
+    getJSON('../_shared/idx.json?v=26110257').then(function (idx) {
      var me = null; idx.forEach(function (x) { if (x[0] === SLUG) me = x; });
      var tag = me ? me[2] : '', h = 0; for (var i = 0; i < SLUG.length; i++) h = (h * 31 + SLUG.charCodeAt(i)) >>> 0;
      var rest = idx.filter(function (x) { return x[0] !== SLUG; });
@@ -175,7 +175,7 @@
    }
    fetch(API + '/comments?kind=topic&target=' + encodeURIComponent(SLUG) + (OID ? '&openid=' + encodeURIComponent(OID) : ''))
      .then(function (r) { return r.json(); }).then(function (j) { if (j && j.code === 200) { RC = j.result; paint(); } }).catch(function () {});
-    getJSON('../_shared/cm/' + SLUG + '.json?v=26110256').then(function (d) { L = d.c || []; paint(); }).catch(function () { paint(); });
+    getJSON('../_shared/cm/' + SLUG + '.json?v=26110257').then(function (d) { L = d.c || []; paint(); }).catch(function () { paint(); });
  }

  function extras(el) {