上正式准备：首页孕妈广场模块 V6/V4 与品牌露出从 demo/ 并入 js/gch/，去掉 V4 每次不缓存的加载（v26110245）
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
@@ -1,93 +0,0 @@
|
||||
/* 11-02 首页「孕妈广场」效果稿 V4 · 故事卡堆（翻一翻） —— 全部限定在 #gcHome.gv4 */
|
||||
#gcHome.gv4{margin:16px -26px 0;border-radius:26px;position:relative;z-index:0;padding:18px 26px 14px;background:linear-gradient(180deg,#FFFDFB 0%,#FFF7F2 100%);box-shadow:0 10px 26px -18px rgba(190,110,110,.45);overflow:hidden}
|
||||
#gcHome.gv4 button{font:inherit;-webkit-tap-highlight-color:transparent}
|
||||
#gcHome.gv4 .g4-head{display:flex;align-items:center;gap:8px}
|
||||
#gcHome.gv4 .g4-title{flex:none;margin:0;font-size:21px;font-weight:900;letter-spacing:.5px;color:#2A1E1E}
|
||||
#gcHome.gv4 .g4-title span{background:linear-gradient(transparent 58%,#FFD0DC 58%,#FFD0DC 92%,transparent 92%);padding:0 3px}
|
||||
#gcHome.gv4 .g4-cat{margin-left:auto;display:flex;padding:2px;border-radius:99px;background:rgba(240,222,214,.7)}
|
||||
#gcHome.gv4 .g4-cat button{height:24px;padding:0 8px;border:0;border-radius:99px;background:none;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11.5px;font-weight:700;color:#9A7F78;white-space:nowrap;transition:background .2s,color .2s}
|
||||
#gcHome.gv4 .g4-cat button.on{background:#fff;color:#D9466A;box-shadow:0 1px 4px rgba(190,110,120,.18)}
|
||||
#gcHome.gv4 .g4-cat button[data-cat=family].on{color:#E0566F}
|
||||
#gcHome.gv4 .g4-cat button[data-cat=work].on{color:#3A72B8}
|
||||
#gcHome.gv4 .g4-cat button[data-cat=baby].on{color:#2E8A7C}
|
||||
#gcHome.gv4 .g4-sub{display:flex;align-items:center;gap:8px;margin:18px 0 2px;padding:6px 6px 6px 8px;border-radius:99px;background:linear-gradient(90deg,#FFEFF2,#FFE3EA);border:1px solid #FFD6E0;font-size:12px;color:#9A817C;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s}
|
||||
#gcHome.gv4 .g4-sub:active{transform:scale(.98)}
|
||||
#gcHome.gv4 .g4-st{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
#gcHome.gv4 .g4-st b{font-weight:900;color:#E0566F}
|
||||
#gcHome.gv4 .g4-in{flex:none;height:26px;padding:0 7px 0 11px;border-radius:99px;background:linear-gradient(135deg,#FF8A9E,#F2627E);color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;gap:1px;box-shadow:0 4px 10px -4px rgba(242,98,126,.7)}
|
||||
#gcHome.gv4 .g4-in i{font-style:normal;font-size:15px;line-height:1;margin-top:-1px}
|
||||
|
||||
#gcHome.gv4 .g4-avs{display:flex}
|
||||
#gcHome.gv4 .g4-avs img{width:18px;height:18px;border-radius:50%;object-fit:cover;border:1.5px solid #fff;margin-left:-5px;background:#FFE3D3}
|
||||
#gcHome.gv4 .g4-avs img:first-child{margin-left:0}
|
||||
|
||||
/* 卡堆舞台：左边卡堆，右边露页码 + 箭头 */
|
||||
#gcHome.gv4 .g4-stage{position:relative;display:flex;align-items:stretch;gap:6px;margin:14px 0 0;height:296px}
|
||||
#gcHome.gv4 .g4-deck{position:relative;flex:1;min-width:0;margin:0 8px 0 0;touch-action:pan-y;user-select:none;-webkit-user-select:none;overscroll-behavior-x:contain}
|
||||
#gcHome.gv4 .g4-card{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:#F3E6E0;cursor:pointer;
|
||||
box-shadow:0 14px 24px -16px rgba(120,60,60,.55),0 2px 6px rgba(120,60,60,.08);border:3px solid #fff;
|
||||
transform-origin:50% 90%;transition:transform .42s cubic-bezier(.2,.8,.25,1),opacity .35s,filter .35s;will-change:transform}
|
||||
#gcHome.gv4 .g4-card[data-d="0"]{transform:none}
|
||||
#gcHome.gv4 .g4-card[data-d="1"]{transform:translate(12px,4px) rotate(4deg) scale(.95);filter:brightness(.96)}
|
||||
#gcHome.gv4 .g4-card[data-d="2"]{transform:translate(-9px,8px) rotate(-3.5deg) scale(.91);filter:brightness(.93)}
|
||||
#gcHome.gv4 .g4-card[data-d="3"]{transform:translate(-9px,8px) rotate(-3.5deg) scale(.91);opacity:0;pointer-events:none}
|
||||
#gcHome.gv4 .g4-card[data-d="out"]{transform:translate(-135%,26px) rotate(-16deg);opacity:0;pointer-events:none}
|
||||
#gcHome.gv4 .g4-deck.deal .g4-card{transform:translate(40px,30px) rotate(8deg) scale(.86)!important;opacity:0;transition:none}
|
||||
#gcHome.gv4 .g4-deck.reset .g4-card{transition:transform .34s ease,opacity .2s}
|
||||
#gcHome.gv4 .g4-card.drag{transition:none}
|
||||
#gcHome.gv4 .g4-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
|
||||
#gcHome.gv4 .st::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(40,18,18,.25) 58%,rgba(30,12,12,.78) 100%);pointer-events:none}
|
||||
#gcHome.gv4 .g4-k{position:absolute;left:12px;top:12px;z-index:1;height:22px;padding:0 9px;border-radius:99px;display:flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:.5px;color:#fff;background:var(--k,#E0566F);box-shadow:0 3px 8px -3px rgba(0,0,0,.35)}
|
||||
#gcHome.gv4 .c-family{--k:#E0566F}
|
||||
#gcHome.gv4 .c-work{--k:#3A72B8}
|
||||
#gcHome.gv4 .c-baby{--k:#2E8A7C}
|
||||
#gcHome.gv4 .g4-bot{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:0 14px 13px;color:#fff}
|
||||
#gcHome.gv4 .g4-tt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:16px;font-weight:900;line-height:1.4;letter-spacing:.2px;text-shadow:0 1px 6px rgba(0,0,0,.3)}
|
||||
#gcHome.gv4 .g4-by{display:flex;align-items:center;gap:5px;margin-top:9px;font-size:11.5px;min-width:0}
|
||||
#gcHome.gv4 .g4-by img{flex:none;width:22px;height:22px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.9)}
|
||||
#gcHome.gv4 .g4-by em{flex:0 1 auto;font-style:normal;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
|
||||
#gcHome.gv4 .g4-by i{flex:none;font-style:normal;padding:0 5px;height:17px;line-height:17px;border-radius:99px;background:rgba(255,255,255,.22);font-size:11px}
|
||||
#gcHome.gv4 .g4-like{margin-left:auto;flex:none;display:flex;align-items:center;gap:3px;font-weight:700;font-variant-numeric:tabular-nums}
|
||||
#gcHome.gv4 .g4-like svg{width:14px;height:14px;fill:#FF7A93}
|
||||
|
||||
/* 最后一张：轮到你了 */
|
||||
#gcHome.gv4 .sub{display:flex;flex-direction:column;align-items:flex-start;padding:18px 18px 16px;background:radial-gradient(120% 70% at 100% 0%,#FFE1D2 0%,rgba(255,225,210,0) 60%),linear-gradient(160deg,#FFF6EE 0%,#FFE7EC 100%);color:#3A2626}
|
||||
#gcHome.gv4 .g4-s-k{height:22px;padding:0 9px;border-radius:99px;display:flex;align-items:center;font-size:11px;font-weight:800;color:#F4593C;background:#fff;box-shadow:0 2px 6px rgba(244,89,60,.15)}
|
||||
#gcHome.gv4 .g4-s-t{margin-top:16px;font-size:28px;font-weight:900;letter-spacing:1px;line-height:1.2}
|
||||
#gcHome.gv4 .g4-s-d{margin-top:6px;font-size:13px;line-height:1.5;color:#8E7068}
|
||||
#gcHome.gv4 .g4-s-r{display:flex;align-items:center;gap:8px;margin-top:16px}
|
||||
#gcHome.gv4 .g4-s-r>span{display:flex;align-items:baseline;gap:2px;padding:6px 10px;border-radius:12px;background:#fff;box-shadow:0 4px 10px -6px rgba(244,89,60,.5)}
|
||||
#gcHome.gv4 .g4-s-r b{font-size:20px;font-weight:900;color:#F4593C;font-variant-numeric:tabular-nums}
|
||||
#gcHome.gv4 .g4-s-r i{font-style:normal;font-size:11px;font-weight:700;color:#B0756A}
|
||||
#gcHome.gv4 .g4-s-r em{font-style:normal;font-weight:900;color:#E9A090}
|
||||
#gcHome.gv4 .g4-s-n{margin-top:6px;font-size:11px;color:#B0948D}
|
||||
#gcHome.gv4 .g4-s-go{margin-top:auto;height:34px;padding:0 18px;border-radius:99px;display:flex;align-items:center;font-size:14px;font-weight:800;color:#fff;background:linear-gradient(135deg,#FF8A5B,#F4593C);box-shadow:0 8px 16px -8px #F4593C}
|
||||
#gcHome.gv4 .g4-s-avs{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
|
||||
#gcHome.gv4 .g4-s-avs{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;width:120px}
|
||||
#gcHome.gv4 .g4-s-avs img{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1.5px solid #fff;margin-left:-6px}
|
||||
#gcHome.gv4 .g4-s-avs i{width:100%;text-align:right;font-style:normal;font-size:11px;color:#B0948D;white-space:nowrap}
|
||||
|
||||
/* 右侧小栏 */
|
||||
#gcHome.gv4 .g4-rail{flex:none;width:34px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding-bottom:2px}
|
||||
#gcHome.gv4 .g4-pg{margin-bottom:auto;padding-top:4px;display:flex;flex-direction:column;align-items:center;line-height:1;color:#C9AAA2;font-variant-numeric:tabular-nums}
|
||||
#gcHome.gv4 .g4-pg b{font-size:24px;font-weight:900;color:#2A1E1E}
|
||||
#gcHome.gv4 .g4-pg i{margin-top:4px;font-style:normal;font-size:12px;font-weight:700}
|
||||
#gcHome.gv4 .g4-arr{width:34px;height:34px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 0 2px;font-size:22px;line-height:1;font-weight:700;background:#fff;color:#D9466A;box-shadow:0 4px 12px -4px rgba(190,110,120,.4)}
|
||||
#gcHome.gv4 .g4-arr.next{background:linear-gradient(135deg,#FF8A9E,#F2627E);color:#fff}
|
||||
#gcHome.gv4 .g4-arr:disabled{opacity:.4}
|
||||
#gcHome.gv4 .g4-arr:active{transform:scale(.92)}
|
||||
|
||||
/* 话题入口 + 底栏 */
|
||||
#gcHome.gv4 .g4-tags{display:flex;align-items:center;gap:6px;margin:18px -26px 0;padding:0 26px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
|
||||
#gcHome.gv4 .g4-tags::-webkit-scrollbar{display:none}
|
||||
#gcHome.gv4 .g4-tags::after{content:"";flex:none;width:10px}
|
||||
#gcHome.gv4 .g4-tl{flex:none;font-size:11px;font-weight:700;color:#B59A93}
|
||||
#gcHome.gv4 .g4-tags button{flex:none;height:24px;padding:0 9px;border:0;border-radius:99px;background:#FFF0EC;font-size:11.5px;font-weight:700;color:#C2506A;white-space:nowrap}
|
||||
#gcHome.gv4 .g4-tags button:active{background:#FFE0E6}
|
||||
#gcHome.gv4 .g4-foot{display:flex;align-items:center;margin-top:10px}
|
||||
#gcHome.gv4 .g4-all{border:0;background:none;padding:4px 0;font-size:12.5px;font-weight:800;color:#F2627E}
|
||||
#gcHome.gv4 .g4-mark{margin-left:auto;font-size:11px;color:#C8BAB6}
|
||||
|
||||
@media (prefers-reduced-motion: reduce){
|
||||
#gcHome.gv4 .g4-card,#gcHome.gv4 .g4-cat button{transition:none!important}
|
||||
}
|
||||
192
demo/gch/v4.js
192
demo/gch/v4.js
@@ -1,192 +0,0 @@
|
||||
/* 11-02 首页「孕妈广场」效果稿 V4 · 故事卡堆（翻一翻）
|
||||
一叠微微错开的真实照片卡，左右拖/轻扫/点箭头翻页，最后一张是「轮到你了」投稿卡；下方一行 #话题 入口。
|
||||
只在 ?gcv=4 时由 index.html 加载；笔记是从 guangchang/data.js 摘的精选（占位示例）。 */
|
||||
(function () {
|
||||
var sec = document.getElementById('gcHome'), T = window.GC_TOPICS;
|
||||
if (!sec || !Array.isArray(T) || !T.length) return;
|
||||
function init() {
|
||||
var esc = function (s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) { return { '&': '&', '<': '<', '>': '>', '"': '"' }[c]; }); };
|
||||
var kfmt = function (n) { return n >= 10000 ? (n / 10000).toFixed(1).replace(/\.0$/, '') + '万' : n >= 1000 ? (n / 1000).toFixed(1).replace(/\.0$/, '') + 'k' : String(n); };
|
||||
var ava = function (n) { return 'assets/img/mom/' + n + '.jpg'; };
|
||||
var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
var CAT_CN = { family: '家庭婚姻', work: '职场', baby: '经验' };
|
||||
var TOP = {}; T.forEach(function (t) { TOP[t.id] = t; });
|
||||
/* 11-02 用户：广场帖子跟「其他妈妈也在搜」一样按孕周 6 段走 —— 多数是同阶段孕妈的帖子，穿插过来人（已生完）的。
|
||||
帖子清单在 guangchang/feed.js（由 data.js 生成的轻量索引 + 排序函数 GC_ORDER），孕周取 app.js 广播的 window.__mbPreg。 */
|
||||
var MOMS = ['m03', 'p02', 'm07', 'p05', 'm11', 'p09', 'm14', 'm16', 'p12', 'm19', 'm21', 'p07'];
|
||||
function userBand() {
|
||||
var pg = window.__mbPreg || {};
|
||||
return pg.postpartum ? 'pp' : (pg.week && window.GC_BAND ? window.GC_BAND('孕' + pg.week + '周') : -1);
|
||||
}
|
||||
function notes(cat) {
|
||||
if (!window.GC_ORDER) return [];
|
||||
var F = window.GC_FEED || [], ub = userBand();
|
||||
var l = window.GC_ORDER(F.filter(function (n) { return n.photo && (!cat || (TOP[n.t] || {}).cat === cat); }), ub);
|
||||
if (!cat) { /* 「全部」：同一分类最多 3 张，三类穿插着来 */
|
||||
var cnt = {}, out = [];
|
||||
l.forEach(function (n) { var c = (TOP[n.t] || {}).cat; if (out.length < 7 && (cnt[c] || 0) < 3) { cnt[c] = (cnt[c] || 0) + 1; out.push(n); } });
|
||||
l = out;
|
||||
}
|
||||
return l.slice(0, 7).map(function (n, i) { return { t: n.t, id: n.id, title: n.title, author: n.author, stage: n.stage, likes: n.likes, photo: n.photo, av: MOMS[(i * 5 + (cat ? cat.length : 0)) % MOMS.length] }; });
|
||||
}
|
||||
function topics(cat) {
|
||||
var l = T.filter(function (t) { return !cat || t.cat === cat; });
|
||||
var hot = l.filter(function (t) { return t.hot; });
|
||||
return (cat ? hot : hot.filter(function (_, i) { return i % 3 === 0; })).concat(l.filter(function (t) { return !t.hot; })).slice(0, 3);
|
||||
}
|
||||
/* 11-02 用户：「进广场首页太深，只能点详情再返回」→ 点帖子只带 ?n=（返回落在广场首页，不落在单个话题）；话题标签才带 ?t= */
|
||||
function go(id, nid) {
|
||||
location.href = 'guangchang/' + (nid ? '?n=' + encodeURIComponent(nid) : id ? '?t=' + encodeURIComponent(id) : '') + location.hash;
|
||||
}
|
||||
|
||||
sec.className = sec.className.replace(/\bgv\d\b/g, '') + ' gv4';
|
||||
sec.innerHTML =
|
||||
'<div class="g4-head"><h2 class="g4-title"><span>孕妈广场</span></h2>' +
|
||||
'<span class="g4-cat" role="tablist" aria-label="话题分类"><button type="button" class="on" data-cat="">全部</button><button type="button" data-cat="family">家庭婚姻</button><button type="button" data-cat="work">职场</button><button type="button" data-cat="baby">经验</button></span></div>' +
|
||||
/* 11-02 用户：「逛广场」单独挂在右边突兀 → 整行做成入口条（浅粉底，整条可点），右侧实心「进广场」 */
|
||||
'<div class="g4-sub" role="button" tabindex="0"><span class="g4-avs" aria-hidden="true">' + ['p05', 'm07', 'p11', 'm16'].map(function (n) { return '<img src="' + ava(n) + '" alt="" loading="lazy">'; }).join('') + '</span><span class="g4-st">翻一翻，看看<b>其他妈妈</b>的故事</span><span class="g4-in">进广场<i>›</i></span></div>' +
|
||||
'<div class="g4-stage"><div class="g4-deck" aria-live="polite"></div>' +
|
||||
'<div class="g4-rail"><span class="g4-pg"><b>1</b><i>/8</i></span>' +
|
||||
'<button type="button" class="g4-arr prev" aria-label="上一张">‹</button><button type="button" class="g4-arr next" aria-label="下一张">›</button></div></div>' +
|
||||
'<div class="g4-tags"></div>' +
|
||||
'<div class="g4-foot"><button type="button" class="g4-all">进孕妈广场 ›</button><span class="g4-mark">效果稿 V4</span></div>';
|
||||
sec.classList.remove('hide');
|
||||
|
||||
var deck = sec.querySelector('.g4-deck'), pgB = sec.querySelector('.g4-pg b'), pgI = sec.querySelector('.g4-pg i'), tags = sec.querySelector('.g4-tags');
|
||||
var cards = [], idx = 0, cur = '';
|
||||
|
||||
function storyCard(n) {
|
||||
var tp = TOP[n.t] || {}, cat = tp.cat || 'family';
|
||||
return '<div class="g4-card st c-' + cat + '" data-t="' + esc(n.t) + '" data-n="' + esc(n.id) + '" role="button" tabindex="0">' +
|
||||
'<img class="g4-ph" src="' + esc(n.photo) + '" alt="" loading="lazy" decoding="async" draggable="false">' +
|
||||
'<span class="g4-k">' + CAT_CN[cat] + '</span>' +
|
||||
'<span class="g4-bot"><b class="g4-tt">' + esc(n.title) + '</b>' +
|
||||
'<span class="g4-by"><img src="' + ava(n.av) + '" alt="" loading="lazy" draggable="false"><em>' + esc(n.author) + '</em><i>' + esc(n.stage) + '</i>' +
|
||||
'<span class="g4-like"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-7.5-10.2A4.3 4.3 0 0112 7.6a4.3 4.3 0 017.5 2.7c0 5.6-7.5 10.2-7.5 10.2z"/></svg>' + kfmt(n.likes) + '</span></span></span></div>';
|
||||
}
|
||||
function submitCard() {
|
||||
return '<div class="g4-card sub" data-sub="1" role="button" tabindex="0">' +
|
||||
'<span class="g4-s-k">兜爸心选 · 官方征集</span>' + /* 11-02 品牌露出 */
|
||||
'<b class="g4-s-t">轮到你了</b>' +
|
||||
'<span class="g4-s-d">你的孕期故事，正是别的妈妈想听的</span>' +
|
||||
'<span class="g4-s-r"><span><b>¥30</b><i>现金</i></span><em>+</em><span><b>500</b><i>兜豆</i></span></span>' +
|
||||
'<span class="g4-s-n">被选中即可获得</span>' +
|
||||
'<span class="g4-s-go">去投稿 ›</span>' +
|
||||
'<span class="g4-s-avs" aria-hidden="true">' + ['m02', 'p04', 'm09', 'p13', 'm18'].map(function (n) { return '<img src="' + ava(n) + '" alt="" loading="lazy" draggable="false">'; }).join('') + '<i>本周已有 326 位妈妈投稿</i></span></div>';
|
||||
}
|
||||
function paint(cat, first) {
|
||||
cur = cat; idx = 0;
|
||||
deck.innerHTML = notes(cat).map(storyCard).join('') + submitCard();
|
||||
cards = [].slice.call(deck.children);
|
||||
if (!first && !reduce) {
|
||||
deck.classList.add('deal');
|
||||
cards.forEach(function (c, i) { c.style.transitionDelay = (Math.min(i, 3) * 60) + 'ms'; });
|
||||
layout();
|
||||
requestAnimationFrame(function () { requestAnimationFrame(function () { deck.classList.remove('deal'); layout(); setTimeout(function () { cards.forEach(function (c) { c.style.transitionDelay = ''; }); }, 500); }); });
|
||||
} else layout();
|
||||
tags.innerHTML = '<span class="g4-tl">大家在聊</span>' + topics(cat).map(function (t) { return '<button type="button" data-t="' + esc(t.id) + '">#' + esc(t.name) + '#</button>'; }).join('');
|
||||
tags.scrollLeft = 0;
|
||||
}
|
||||
/* depth：0 顶层；1、2 在后面错开；>2 藏在后面；<0 已翻走（左侧飞出） */
|
||||
function layout() {
|
||||
cards.forEach(function (c, i) {
|
||||
var d = i - idx;
|
||||
c.setAttribute('data-d', d < 0 ? 'out' : d > 3 ? 3 : d);
|
||||
c.style.zIndex = 20 - Math.abs(d);
|
||||
c.style.transform = '';
|
||||
c.setAttribute('aria-hidden', d === 0 ? 'false' : 'true');
|
||||
c.tabIndex = d === 0 ? 0 : -1;
|
||||
});
|
||||
pgB.textContent = idx + 1; pgI.textContent = '/' + cards.length;
|
||||
/* 11-02 用户：滑到哪张图，右上角分类小滑块跟着跳到它的归属类（只在「全部」里跳；投稿卡回到「全部」；选了具体分类时不动） */
|
||||
if (cur === '') {
|
||||
var cc = cards[idx] && (cards[idx].className.match(/\bc-(\w+)/) || [])[1] || '';
|
||||
[].forEach.call(sec.querySelectorAll('.g4-cat button'), function (x) { x.classList.toggle('on', x.dataset.cat === cc); });
|
||||
}
|
||||
sec.querySelector('.g4-arr.prev').disabled = idx === 0;
|
||||
}
|
||||
function next() {
|
||||
if (idx < cards.length - 1) { idx++; layout(); return; }
|
||||
/* 最后一张再往后 → 整叠收回，从第 1 张重新开始 */
|
||||
idx = 0; deck.classList.add('reset'); layout();
|
||||
setTimeout(function () { deck.classList.remove('reset'); }, 380);
|
||||
}
|
||||
function prev() { if (idx > 0) { idx--; layout(); } else bounce(1); }
|
||||
function bounce(dir) {
|
||||
var c = cards[idx]; if (!c || reduce) return;
|
||||
c.style.transform = 'translateX(' + dir * 14 + 'px) rotate(' + dir * 1.5 + 'deg)';
|
||||
setTimeout(function () { c.style.transform = ''; }, 160);
|
||||
}
|
||||
|
||||
/* 拖动：方向锁 —— 先判断横 / 竖，竖向直接放行给页面滚动，横向才拦截（touchmove passive:false 才能 preventDefault） */
|
||||
var drag = null, moved = false;
|
||||
function start(x, y) { var c = cards[idx]; if (!c) return; drag = { x: x, y: y, dx: 0, lock: '', t: Date.now(), c: c }; moved = false; }
|
||||
function move(x, y, e) {
|
||||
if (!drag) return;
|
||||
var dx = x - drag.x, dy = y - drag.y;
|
||||
if (!drag.lock) {
|
||||
if (Math.abs(dx) < 6 && Math.abs(dy) < 6) return;
|
||||
drag.lock = Math.abs(dx) > Math.abs(dy) ? 'x' : 'y';
|
||||
if (drag.lock === 'y') { drag = null; return; }
|
||||
drag.c.classList.add('drag'); deck.classList.add('dragging');
|
||||
}
|
||||
if (e && e.cancelable) e.preventDefault();
|
||||
if (e) e.stopPropagation();
|
||||
moved = true;
|
||||
if ((idx === 0 && dx > 0)) dx = dx * 0.3; // 第一张往右拖：阻尼
|
||||
drag.dx = dx;
|
||||
drag.c.style.transform = 'translateX(' + dx + 'px) translateY(' + Math.abs(dx) * 0.04 + 'px) rotate(' + dx / 18 + 'deg)';
|
||||
}
|
||||
function end() {
|
||||
if (!drag) return false;
|
||||
var d = drag; drag = null;
|
||||
d.c.classList.remove('drag'); deck.classList.remove('dragging');
|
||||
if (!d.lock) return false;
|
||||
var v = Math.abs(d.dx) / Math.max(1, Date.now() - d.t);
|
||||
if (d.dx < -70 || (d.dx < -24 && v > 0.45)) next();
|
||||
else if ((d.dx > 70 || (d.dx > 24 && v > 0.45)) && idx > 0) prev();
|
||||
else d.c.style.transform = '';
|
||||
return true;
|
||||
}
|
||||
deck.addEventListener('touchstart', function (e) { if (e.touches.length === 1) start(e.touches[0].clientX, e.touches[0].clientY); else drag = null; }, { passive: true });
|
||||
deck.addEventListener('touchmove', function (e) { if (drag && e.touches.length === 1) move(e.touches[0].clientX, e.touches[0].clientY, e); }, { passive: false });
|
||||
/* 首页在 document 上有「左右滑切底部 tab」的手势（app.js touchend）：卡堆横拖结束时截住 touchend，别让它把页面切走 */
|
||||
deck.addEventListener('touchend', function (e) { if (end()) e.stopPropagation(); });
|
||||
deck.addEventListener('touchcancel', end);
|
||||
deck.addEventListener('mousedown', function (e) {
|
||||
if (e.button) return; start(e.clientX, e.clientY); e.preventDefault();
|
||||
var mm = function (ev) { move(ev.clientX, ev.clientY, ev); }, mu = function () { end(); document.removeEventListener('mousemove', mm); document.removeEventListener('mouseup', mu); };
|
||||
document.addEventListener('mousemove', mm); document.addEventListener('mouseup', mu);
|
||||
});
|
||||
deck.addEventListener('click', function (e) {
|
||||
if (moved) { moved = false; return; }
|
||||
var c = e.target.closest('.g4-card');
|
||||
if (!c) return;
|
||||
if (c !== cards[idx]) { next(); return; } // 点到后面露出的卡角 → 翻到下一张
|
||||
go(c.dataset.sub ? '' : c.dataset.t, c.dataset.sub ? '' : c.dataset.n);
|
||||
});
|
||||
deck.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'ArrowRight') next(); else if (e.key === 'ArrowLeft') prev();
|
||||
else if (e.key === 'Enter') { var c = cards[idx]; if (c) go(c.dataset.sub ? '' : c.dataset.t, c.dataset.sub ? '' : c.dataset.n); }
|
||||
});
|
||||
sec.querySelector('.g4-arr.next').addEventListener('click', next);
|
||||
sec.querySelector('.g4-arr.prev').addEventListener('click', prev);
|
||||
tags.addEventListener('click', function (e) { var b = e.target.closest('button[data-t]'); if (b) go(b.dataset.t); });
|
||||
sec.querySelector('.g4-all').addEventListener('click', function () { go(''); });
|
||||
sec.querySelector('.g4-sub').addEventListener('click', function () { go(''); });
|
||||
sec.querySelector('.g4-cat').addEventListener('click', function (e) {
|
||||
var b = e.target.closest('button[data-cat]');
|
||||
if (!b || b.dataset.cat === cur) return; // 「全部」里滑块跟着卡片跳，所以按当前筛选判断，不按高亮判断
|
||||
[].forEach.call(sec.querySelectorAll('.g4-cat button'), function (x) { x.classList.toggle('on', x === b); });
|
||||
paint(b.dataset.cat);
|
||||
});
|
||||
/* 孕周变了（档案里改了 / 孕期数据晚到）→ 段变了才重排，免得翻到一半被打回第 1 张 */
|
||||
var lastUB = userBand();
|
||||
window.addEventListener('mb-preg', function () { var u = userBand(); if (u !== lastUB) { lastUB = u; paint(cur, true); } });
|
||||
paint('', true);
|
||||
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=26110244'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
|
||||
})();
|
||||
@@ -1,88 +0,0 @@
|
||||
/* 11-02 效果稿 V6 · 合并版：在 V4 基础上压矮卡堆、去掉「大家在聊」标签行，下面接「其他妈妈也在搜」 */
|
||||
#gcHome.gv4.gv6 .g4-stage{height:248px}
|
||||
#gcHome.gv4.gv6 .g4-tt{font-size:15px}
|
||||
#gcHome.gv4.gv6 .g4-s-t{margin-top:8px;font-size:22px}
|
||||
#gcHome.gv4.gv6 .g4-s-d{margin-top:4px;font-size:12px}
|
||||
#gcHome.gv4.gv6 .g4-s-n{margin-top:2px}
|
||||
#gcHome.gv4.gv6 .g4-s-avs{display:none}
|
||||
#gcHome.gv4.gv6 .g4-tags{display:none}
|
||||
#gcHome.gv4.gv6 .g6-ms{margin-top:20px;padding-top:16px;border-top:1px dashed #F1DED6}
|
||||
#gcHome.gv4.gv6 .g6-mh{display:flex;align-items:center;gap:8px;margin-bottom:2px}
|
||||
#gcHome.gv4.gv6 .g6-mt{margin:0;font-size:17px;font-weight:900;letter-spacing:.3px;color:#2A1E1E}
|
||||
#gcHome.gv4.gv6 .g6-mt span{background:linear-gradient(transparent 58%,#FFE066 58%,#FFE066 92%,transparent 92%);padding:0 3px}
|
||||
#gcHome.gv4.gv6 .g6-wk{margin-left:auto;padding:2px 9px;border-radius:99px;background:#FFEDE6;color:#E0573A;font-size:11.5px;font-weight:700}
|
||||
#gcHome.gv4.gv6 .ms-it{padding:10px 2px}
|
||||
#gcHome.gv4.gv6 .ms-q{font-size:15px}
|
||||
#gcHome.gv4.gv6 .g4-foot{margin-top:8px}
|
||||
html.night #gcHome.gv4.gv6 .g6-mt{color:#F3E8F0}
|
||||
#gcHome.gv4.gv6 .g4-s-r{margin-top:10px}
|
||||
/* 11-02 用户：图片上的文字不够明显 → 遮罩更早开始、底部更深，标题加大加粗、阴影加重，作者行加大 */
|
||||
#gcHome.gv4.gv6 .st::after{background:linear-gradient(180deg,rgba(0,0,0,0) 22%,rgba(30,12,12,.35) 48%,rgba(22,8,8,.9) 100%)}
|
||||
#gcHome.gv4.gv6 .g4-bot{padding:0 14px 14px}
|
||||
#gcHome.gv4.gv6 .g4-tt{font-size:17.5px;line-height:1.38;letter-spacing:.3px;text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 12px rgba(0,0,0,.45)}
|
||||
#gcHome.gv4.gv6 .g4-by{font-size:12.5px;margin-top:8px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
|
||||
#gcHome.gv4.gv6 .g4-by i{background:rgba(255,255,255,.28);font-size:11.5px}
|
||||
#gcHome.gv4.gv6 .g4-k{font-size:12px;height:24px}
|
||||
|
||||
/* 11-02 用户：孕妈广场里放两个测试 —— 两张并排卡，在卡堆和「其他妈妈也在搜」之间
|
||||
11-02 用户：「颜色有点太多、和下面雷同、显得乱」→ 去掉紫/橙底和彩色标签：白卡 + 细边，上半是插画横幅，
|
||||
下半深色标题 + 灰色信息，只留一个品牌粉「开始测 ›」；两块小标题统一成同一种样式，不再用黄色荧光笔 */
|
||||
#gcHome.gv4.gv6 .g6-qz{margin-top:20px}
|
||||
#gcHome.gv4.gv6 .g6-qh,#gcHome.gv4.gv6 .g6-mt{display:flex;align-items:baseline;gap:6px;margin:0 0 10px;font-size:16px;font-weight:900;letter-spacing:.3px;color:#2A1E1E}
|
||||
#gcHome.gv4.gv6 .g6-mt{margin:0}
|
||||
#gcHome.gv4.gv6 .g6-mt span{background:none;padding:0}
|
||||
#gcHome.gv4.gv6 .g6-qh small{font-size:12px;font-weight:500;color:#A8928C}
|
||||
#gcHome.gv4.gv6 .g6-qa{margin-left:auto;align-self:center;padding:3px 10px;border-radius:99px;background:#FFF0EC;color:#F2533A;font-size:12px;font-weight:800;letter-spacing:0;text-decoration:none;white-space:nowrap}
|
||||
#gcHome.gv4.gv6 .g6-qr{display:grid;grid-template-columns:1fr 1fr;gap:10px}
|
||||
#gcHome.gv4.gv6 .g6-q{display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#fff;border:1px solid #F3E6E0;text-decoration:none;color:#2A1E1E;box-shadow:0 6px 16px -14px rgba(150,90,80,.5)}
|
||||
#gcHome.gv4.gv6 .g6-q img{display:block;width:100%;height:84px;object-fit:cover;object-position:60% 45%;background:#FBF3EF}
|
||||
#gcHome.gv4.gv6 .g6-qb{display:flex;flex-direction:column;gap:4px;padding:9px 11px 11px}
|
||||
#gcHome.gv4.gv6 .g6-qt{font-size:14.5px;font-weight:800;line-height:1.38}
|
||||
#gcHome.gv4.gv6 .g6-qf{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:11.5px;color:#A8928C}
|
||||
#gcHome.gv4.gv6 .g6-qg{flex:none;font-weight:800;color:#E0566F}
|
||||
html.night #gcHome.gv4.gv6 .g6-qh,html.night #gcHome.gv4.gv6 .g6-mt{color:#F3E8F0}
|
||||
html.night #gcHome.gv4.gv6 .g6-q{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#F3E8F0}
|
||||
#gcHome.gv4.gv6 .g6-qt{text-wrap:balance}
|
||||
/* 测一测 · 第 2 版「小胶囊」：并排两颗矮胶囊，圆形插画 + 两行字，浅米底无边框，只有一个灰色箭头 */
|
||||
#gcHome.gv4.gv6 .qv2 .g6-c{display:flex;align-items:center;gap:9px;padding:9px 8px 9px 9px;border-radius:18px;background:#FBF3EF;text-decoration:none;color:#2A1E1E}
|
||||
#gcHome.gv4.gv6 .qv2 .g6-c img{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 3px 8px -4px rgba(150,90,80,.45)}
|
||||
#gcHome.gv4.gv6 .qv2 .g6-cb{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
|
||||
#gcHome.gv4.gv6 .qv2 .g6-cb b{font-size:13.5px;font-weight:800;line-height:1.35;text-wrap:balance}
|
||||
#gcHome.gv4.gv6 .qv2 .g6-cb small{font-size:11px;color:#A8928C}
|
||||
#gcHome.gv4.gv6 .qv2 .g6-c i{flex:none;font-style:normal;font-size:16px;color:#D3B9B2}
|
||||
/* 测一测 · 第 3 版「你 & 他」：一张合体卡，左右各一个圆头像，中间 & 连起来，底部一句组合文案 */
|
||||
#gcHome.gv4.gv6 .qv3 .g6-v{border-radius:20px;background:linear-gradient(180deg,#FFF8F4,#fff);border:1px solid #F3E6E0;padding:14px 10px 10px;box-shadow:0 6px 16px -14px rgba(150,90,80,.5)}
|
||||
#gcHome.gv4.gv6 .qv3 .g6-vr{display:flex;align-items:flex-start}
|
||||
#gcHome.gv4.gv6 .qv3 .g6-vc{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;text-decoration:none;color:#2A1E1E}
|
||||
#gcHome.gv4.gv6 .qv3 .g6-vc img{width:66px;height:66px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 5px 12px -6px rgba(150,90,80,.5);margin-bottom:4px}
|
||||
#gcHome.gv4.gv6 .qv3 .g6-vc small{font-size:11px;color:#A8928C;letter-spacing:1px}
|
||||
#gcHome.gv4.gv6 .qv3 .g6-vc b{font-size:14px;font-weight:800;line-height:1.35}
|
||||
#gcHome.gv4.gv6 .qv3 .g6-vc em{margin-top:3px;font-style:normal;font-size:12px;font-weight:800;color:#E0566F}
|
||||
#gcHome.gv4.gv6 .qv3 .g6-amp{flex:none;align-self:center;margin-top:-34px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #F3E6E0;font-size:14px;font-weight:900;color:#D9A79B}
|
||||
#gcHome.gv4.gv6 .qv3 .g6-vf{margin:10px 0 0;padding-top:9px;border-top:1px dashed #F1DED6;text-align:center;font-size:11.5px;color:#A8928C}
|
||||
html.night #gcHome.gv4.gv6 .qv2 .g6-c,html.night #gcHome.gv4.gv6 .qv3 .g6-v{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#F3E8F0}
|
||||
html.night #gcHome.gv4.gv6 .qv3 .g6-vc{color:#F3E8F0}
|
||||
/* 测一测 · 下面 3 个小列表（三版共用）：圆形小插画 + 标题 + 灰色题数人数 + 描边「去测」；不用序号，和下面热搜榜区分开 */
|
||||
#gcHome.gv4.gv6 .g6-ql{margin-top:10px;padding:2px 12px;border-radius:16px;background:#FBF5F2}
|
||||
#gcHome.gv4.gv6 .g6-li{display:flex;align-items:center;gap:10px;padding:10px 0;text-decoration:none;color:#2A1E1E;border-bottom:1px dashed #EEDDD6}
|
||||
#gcHome.gv4.gv6 .g6-li:last-child{border-bottom:0}
|
||||
#gcHome.gv4.gv6 .g6-li img{flex:none;width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:50% 30%;background:#F3E6E0;border:2px solid #fff}
|
||||
#gcHome.gv4.gv6 .g6-lb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
|
||||
#gcHome.gv4.gv6 .g6-lb b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
#gcHome.gv4.gv6 .g6-lb small{font-size:11px;color:#A8928C}
|
||||
#gcHome.gv4.gv6 .g6-li em{flex:none;font-style:normal;height:24px;padding:0 10px;border-radius:99px;display:flex;align-items:center;font-size:12px;font-weight:800;color:#E0566F;border:1px solid #F4C4CE;background:#fff}
|
||||
html.night #gcHome.gv4.gv6 .g6-ql{background:rgba(255,255,255,.05)}
|
||||
html.night #gcHome.gv4.gv6 .g6-li{color:#F3E8F0;border-color:rgba(255,255,255,.1)}
|
||||
/* 11-02 测一测挪到「其他妈妈也在搜」下面：上面加一道同样的虚线分隔 */
|
||||
#gcHome.gv4.gv6 .g6-qz{margin-top:18px;padding-top:16px;border-top:1px dashed #F1DED6}
|
||||
/* 测一测 · 第 4 版「彩色卡」（11-02 用户要更明显，拿回最早那版紫/橙底试试） */
|
||||
#gcHome.gv4.gv6 .qv4 .g6-k{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:146px;padding:12px 12px 12px;border-radius:18px;text-decoration:none;color:#2A1E1E;background:linear-gradient(160deg,var(--q1),var(--q2));box-shadow:0 8px 18px -12px var(--qs)}
|
||||
#gcHome.gv4.gv6 .qv4 .g6-k img{position:absolute;right:-12px;bottom:-14px;width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.8)}
|
||||
#gcHome.gv4.gv6 .qv4 .g6-kk{align-self:flex-start;height:20px;padding:0 8px;border-radius:99px;display:flex;align-items:center;font-size:11px;font-weight:800;color:#fff;background:var(--qc)}
|
||||
#gcHome.gv4.gv6 .qv4 .g6-kt{position:relative;margin-top:8px;font-size:15px;font-weight:900;line-height:1.35;text-wrap:balance}
|
||||
#gcHome.gv4.gv6 .qv4 .g6-kn{position:relative;margin-top:4px;font-size:11.5px;font-weight:700;color:var(--qc)}
|
||||
#gcHome.gv4.gv6 .qv4 .g6-kg{position:relative;margin-top:auto;align-self:flex-start;height:28px;padding:0 12px;border-radius:99px;display:flex;align-items:center;font-size:12.5px;font-weight:800;color:#fff;background:var(--qc);box-shadow:0 4px 10px -4px var(--qs)}
|
||||
/* 11-02 用户：「查看全部 50 个问题」不用那么明显、别占那么大篇幅 → 去掉浅橙大底块，改成列表下方一行居中小灰字链接 */
|
||||
#gcHome.gv4.gv6 .g6-all{display:flex;align-items:center;justify-content:center;gap:2px;width:auto;margin:2px auto 0;padding:6px 10px;border-radius:0;background:none;font-size:12.5px;font-weight:600;color:#B0948D}
|
||||
#gcHome.gv4.gv6 .g6-all.hide{display:none}
|
||||
html.night #gcHome.gv4.gv6 .g6-all{background:none;color:#B9A6B1}
|
||||
102
demo/gch/v6.js
102
demo/gch/v6.js
@@ -1,102 +0,0 @@
|
||||
/* 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 = function () { if (sec.querySelector('.g4-foot')) merge(); else sec.addEventListener('gc4-ready', merge, { once: true }); }; /* v4 要先拉 feed.js 才渲染 */
|
||||
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 { '&': '&', '<': '<', '>': '>', '"': '"' }[c]; }); }
|
||||
|
||||
function merge() {
|
||||
sec.classList.add('gv6');
|
||||
var mk = sec.querySelector('.g4-mark'); if (mk) { if (window.__gcDefault) mk.remove(); else mk.textContent = '效果稿 V6'; }
|
||||
var old = document.getElementById('pregTips'); if (old) old.style.display = 'none';
|
||||
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>' +
|
||||
'</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', pos: '42% 22%', who: '测你', 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', pos: '58% 24%', who: '测他', c: '#F07A2E', q1: '#FFF3E6', q2: '#FFE2C8', qs: 'rgba(240,122,46,.6)' }
|
||||
];
|
||||
/* 11-02 用户：「测一测出三版让我选」→ 地址 &qz=1/2/3 切换：1 插画白卡（默认）/ 2 小胶囊 / 3 你&他合体卡 */
|
||||
var QV = (location.search.match(/[?&]qz=([1-4])/) || [])[1] || '4'; /* 11-02 用户定：默认用第 4 版彩色卡 */
|
||||
var qz = document.createElement('div'), lk = function (q) { return esc(q.href + location.search + location.hash); };
|
||||
qz.className = 'g6-qz qv' + QV;
|
||||
/* 11-02 用户：「还有多少份测试」→ 头部右侧放总数入口，进孕妈广场的测一测页（30 份 = guangchang/ceshi/meta.js 条数，加减测试时同步改） */
|
||||
var hd = '<div class="g6-qh">测一测<small>1 分钟，看看你和他</small><a class="g6-qa" href="' + esc('guangchang/?c=ceshi' + location.search.replace(/^\?/, '&') + location.hash) + '">全部 30 份测试 ›</a></div>';
|
||||
if (QV === '4') {
|
||||
/* 第 4 版：用户说「测一测要明显一点，把之前那版（紫/橙底）拿来试试」→ 彩色底 + 类型小标签 + 实心按钮 + 右下圆形插画；标题用短的，避免单字掉行 */
|
||||
qz.innerHTML = hd + '<div class="g6-qr">' + QZ.map(function (q) {
|
||||
return '<a class="g6-k ripple" href="' + lk(q) + '" style="--qc:' + q.c + ';--q1:' + q.q1 + ';--q2:' + q.q2 + ';--qs:' + q.qs + '">' +
|
||||
'<img src="' + esc(q.img) + '" alt="" loading="lazy">' +
|
||||
'<span class="g6-kk">' + esc(q.k) + '</span><b class="g6-kt">' + esc(q.t) + '</b><span class="g6-kn">' + q.n + ' 人测过</span><span class="g6-kg">去测试 ›</span></a>';
|
||||
}).join('') + '</div>';
|
||||
} else if (QV === '1') {
|
||||
qz.innerHTML = hd + '<div class="g6-qr">' + QZ.map(function (q) {
|
||||
return '<a class="g6-q ripple" href="' + lk(q) + '">' +
|
||||
'<img src="' + esc(q.img) + '" alt="" loading="lazy">' +
|
||||
'<span class="g6-qb"><b class="g6-qt">' + esc(q.t) + '</b><span class="g6-qf"><span>' + q.n + ' 人测过</span><span class="g6-qg">开始测 ›</span></span></span></a>';
|
||||
}).join('') + '</div>';
|
||||
} else if (QV === '2') {
|
||||
qz.innerHTML = hd + '<div class="g6-qr">' + QZ.map(function (q) {
|
||||
return '<a class="g6-c ripple" href="' + lk(q) + '"><img src="' + esc(q.img) + '" alt="" loading="lazy" style="object-position:' + q.pos + '">' +
|
||||
'<span class="g6-cb"><b>' + esc(q.t) + '</b><small>' + q.n + ' 人测过</small></span><i>›</i></a>';
|
||||
}).join('') + '</div>';
|
||||
} else {
|
||||
qz.innerHTML = hd + '<div class="g6-v"><div class="g6-vr">' + QZ.map(function (q, i) {
|
||||
return (i ? '<span class="g6-amp">&</span>' : '') +
|
||||
'<a class="g6-vc ripple" href="' + lk(q) + '"><img src="' + esc(q.img) + '" alt="" loading="lazy" style="object-position:' + q.pos + '">' +
|
||||
'<small>' + q.who + '</small><b>' + esc(q.t) + '</b><em>开始测 ›</em></a>';
|
||||
}).join('') + '</div><p class="g6-vf">两个都测完，看看你们是哪种组合 · 已有 23.9万 人测过</p></div>';
|
||||
}
|
||||
/* 11-02 用户：「太多了，只放两个测一测」→ 3 个小列表撤掉（topic/yali、yinshi、zhunbei 页面保留，先不挂入口）；
|
||||
位置从卡堆下面挪到「其他妈妈也在搜」下面 */
|
||||
sec.insertBefore(box, foot);
|
||||
sec.insertBefore(qz, foot);
|
||||
var list = box.querySelector('.g6-list'), all = box.querySelector('.g6-all');
|
||||
var tot = (window.__mbPulse && window.__mbPulse.total && +window.__mbPulse.total.value) || 1510000;
|
||||
/* 11-02 按孕周出题：挑题逻辑在 app.js（window.__mbQaPick：第 1 条固定生娃计算器 + 本孕周段 4 条 + 通用 1 条），孕期数据到了（mb-preg）再刷一次 */
|
||||
var BANK = null;
|
||||
function paintList() {
|
||||
if (!BANK || !BANK.length) return;
|
||||
var pg = window.__mbPreg || {}, w = pg.week || 0;
|
||||
var tag = box.querySelector('.g6-wk');
|
||||
if (w) { if (!tag) { tag = document.createElement('span'); tag.className = 'g6-wk'; box.querySelector('.g6-mh').appendChild(tag); } tag.textContent = '孕 ' + w + ' 周'; }
|
||||
else if (tag) tag.remove();
|
||||
var pick = window.__mbQaPick ? window.__mbQaPick(BANK, w) : BANK.slice(0, 6);
|
||||
list.innerHTML = pick.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 b = window.__mbMsBadge ? window.__mbMsBadge(i) : { t: x.badge, c: x.badge === '爆' ? 'bao' : '' };
|
||||
var bd = b.t ? '<span class="ms-bd ' + b.c + '">' + (b.c === 'bao' ? FIRE_W : '') + esc(b.t) + '</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('');
|
||||
}
|
||||
window.addEventListener('mb-preg', paintList);
|
||||
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; }
|
||||
BANK = bank; paintList();
|
||||
if (bank.length > 6) {
|
||||
all.textContent = '查看全部问题 ›';
|
||||
all.classList.remove('hide');
|
||||
/* 全部问题页在 app.js 里（openQA），借原来那块的「查看全部」按钮触发 */
|
||||
all.addEventListener('click', function () { var o = document.getElementById('msAll'); if (o) o.click(); });
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user