mama-box/demo/gch/v6.js

/* 11-02 首页「孕妈广场」效果稿 V6 · 合并版：孕妈广场（V4 故事卡堆，压矮）+ 其他妈妈也在搜（6 个问题）合成一个模块
   用户定：小标题仍叫「其他妈妈也在搜」；卡堆左右手滑、点箭头都能翻。
   做法：先套 V4（v4.css + v4.js），再在卡堆下面接「其他妈妈也在搜」，原来那块 #pregTips 藏起来。
   列表沿用首页 .ms-* 样式（写在 #pregTips 里的 <style>，块藏了样式照样生效），数据同 assets/data/qa/hot.json 前 6 条。 */
(function () {
  var sec = document.getElementById('gcHome');
  if (!sec) return;
  var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'demo/gch/v4.css?' + Date.now();
  document.head.appendChild(l);
  var s = document.createElement('script'); s.src = 'demo/gch/v4.js?' + Date.now();
  s.onload = merge;
  document.body.appendChild(s);

  var FIRE = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.6 2.5c.4 3-1.6 4.6-3 6.2C8 10.4 7 12 7 14.3A5 5 0 0012 19.5a5 5 0 005-5.2c0-2-1-3.6-1.9-4.6-.2 1.3-.9 2.2-1.9 2.6.6-3.4-.2-7-.6-9.8z" fill="currentColor"/><path d="M12 19.5a2.6 2.6 0 01-2.6-2.6c0-1.6 1.3-2.5 2-3.6.3 1 .9 1.6 1.6 1.9.9.4 1.6 1.2 1.6 2.1A2.6 2.6 0 0112 19.5z" fill="#FFD36B"/></svg>';
  var FIRE_W = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.6 2.5c.4 3-1.6 4.6-3 6.2C8 10.4 7 12 7 14.3A5 5 0 0012 19.5a5 5 0 005-5.2c0-2-1-3.6-1.9-4.6-.2 1.3-.9 2.2-1.9 2.6.6-3.4-.2-7-.6-9.8z" fill="#FFE07A"/></svg>';
  function esc(t) { return String(t == null ? '' : t).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }

  function merge() {
    sec.classList.add('gv6');
    var mk = sec.querySelector('.g4-mark'); if (mk) mk.textContent = '效果稿 V6';
    var old = document.getElementById('pregTips'); if (old) old.style.display = 'none';
    var wk = document.getElementById('msWk'), wkT = wk && wk.textContent.trim();
    var box = document.createElement('div');
    box.className = 'g6-ms';
    box.innerHTML =
      '<div class="g6-mh"><h3 class="g6-mt"><span>其他妈妈也在搜</span></h3>' +
      '<span class="ms-live" aria-hidden="true">' + FIRE.replace('currentColor', 'currentColor') + '实时热搜</span>' +
      (wkT ? '<span class="g6-wk">' + esc(wkT) + '</span>' : '') + '</div>' +
      '<div class="ms-list g6-list"></div>' +
      '<button type="button" class="ms-all g6-all hide"></button>';
    var foot = sec.querySelector('.g4-foot');
    /* 两个测试：你是什么样的妈妈（已有 topic/ceshi）+ 你家准爸爸是哪种队友（新做 topic/duiyou） */
    var QZ = [
      { href: 'topic/ceshi/', k: '妈妈类型', t: '测一测你是什么样的妈妈', n: '15.6万', img: 'topic/ceshi/img/hero.webp', c: '#7C5CFC', q1: '#F1ECFF', q2: '#E4DBFF', qs: 'rgba(124,92,252,.6)' },
      { href: 'topic/duiyou/', k: '队友类型', t: '你家准爸爸是哪种队友', n: '8.3万', img: 'topic/duiyou/img/hero.webp', c: '#F07A2E', q1: '#FFF3E6', q2: '#FFE2C8', qs: 'rgba(240,122,46,.6)' }
    ];
    var qz = document.createElement('div');
    qz.className = 'g6-qz';
    qz.innerHTML = '<div class="g6-qh">测一测<small>· 1 分钟，看看你和他</small></div><div class="g6-qr">' + QZ.map(function (q) {
      return '<a class="g6-q ripple" href="' + esc(q.href + location.search + location.hash) + '" style="--qc:' + q.c + ';--q1:' + q.q1 + ';--q2:' + q.q2 + ';--qs:' + q.qs + '">' +
        '<img src="' + esc(q.img) + '" alt="" loading="lazy" onerror="this.remove()">' +
        '<span class="g6-qk">' + esc(q.k) + '</span><b class="g6-qt">' + esc(q.t) + '</b><span class="g6-qn">' + q.n + ' 人测过</span><span class="g6-qg">去测试 ›</span></a>';
    }).join('') + '</div>';
    sec.insertBefore(qz, foot);
    sec.insertBefore(box, foot);
    var list = box.querySelector('.g6-list'), all = box.querySelector('.g6-all');
    var tot = (window.__mbPulse && window.__mbPulse.total && +window.__mbPulse.total.value) || 1510000;
    fetch('assets/data/qa/hot.json?' + Date.now()).then(function (r) { return r.ok ? r.json() : []; }).catch(function () { return []; }).then(function (bank) {
      if (!bank || !bank.length) { box.style.display = 'none'; return; }
      list.innerHTML = bank.slice(0, 6).map(function (x, i) {
        var n = tot * (+x.heat || 0), heat = x.heat ? '<span class="ms-h">' + FIRE + '<b>' + (n >= 1e4 ? Math.round(n / 1e3) / 10 + '万' : Math.round(n)) + ' 人看过</b></span>' : '';
        var bd = x.badge ? '<span class="ms-bd' + (x.badge === '爆' ? ' bao' : x.badge === '新' ? ' new' : '') + '">' + (x.badge === '爆' ? FIRE_W : '') + esc(x.badge) + '</span>' : '';
        return '<a class="ms-it ripple" href="' + esc((x.href || '') + location.search + location.hash) + '"><i class="ms-no">' + (i + 1) + '</i>' +
          '<span class="ms-m"><span class="ms-q">' + esc(x.q) + '</span>' + heat + '</span>' + bd + '<i class="ms-go">›</i></a>';
      }).join('');
      if (bank.length > 6) {
        all.textContent = '查看全部 ' + bank.length + ' 个问题 ›';
        all.classList.remove('hide');
        /* 全部问题页在 app.js 里（openQA），借原来那块的「查看全部」按钮触发 */
        all.addEventListener('click', function () { var o = document.getElementById('msAll'); if (o) o.click(); });
      }
    });
  }
})();