diff --git a/guangchang/index.html b/guangchang/index.html index 3df999f..26e67b9 100644 --- a/guangchang/index.html +++ b/guangchang/index.html @@ -3,7 +3,7 @@ - + @@ -66,31 +66,30 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin .qf{position:relative;display:block;width:calc(100% - 24px);height:148px;margin:2px 12px 0;border-radius:20px;overflow:hidden;text-align:left; background:radial-gradient(120% 140% at 82% 100%,#3B3A86 0%,#252A63 38%,#161B3F 75%);box-shadow:0 12px 26px -14px rgba(30,30,90,.7)} .qf:active{transform:scale(.985)} -/* 11-07 孕妈悄悄话条（祈福树横幅下面）：和首页广场模块底部那条同款夜空细条；点了回首页直接打开星空页（首页 ?wh=1） */ -.whs{position:relative;display:flex;align-items:center;gap:10px;width:calc(100% - 24px);margin:10px 12px 0;padding:10px 12px 10px 10px;border:0;border-radius:16px;overflow:hidden;text-align:left;font:inherit;color:#fff; - background:linear-gradient(100deg,#2A2550 0%,#3E2F5E 60%,#53365F 100%);box-shadow:0 6px 16px -8px rgba(52,36,92,.55)} -.whs:active{transform:scale(.985)} -.whs-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden} -.whs-sky i{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;opacity:.85;filter:drop-shadow(0 0 1.5px rgba(255,255,255,.6)); - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center/contain no-repeat;animation:whsTw 2.6s ease-in-out infinite} -@keyframes whsTw{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:.2;transform:scale(.55)}} -.whs-mt{position:absolute;top:-4px;left:62%;width:96px;height:2px;border-radius:2px;opacity:0;transform-origin:0 50%; - background:linear-gradient(90deg,#fff,rgba(255,255,255,.75) 30%,rgba(255,255,255,0));box-shadow:0 0 8px 1px rgba(255,255,255,.8);animation:whsMt 7s linear infinite 1.5s} -.whs-mt.m2{left:92%;width:70px;animation-duration:11s;animation-delay:5.2s} -@keyframes whsMt{0%{opacity:0;transform:translate(0,0) rotate(-24deg)}1.5%{opacity:1}9%{opacity:0;transform:translate(-150px,68px) rotate(-24deg)}100%{opacity:0;transform:translate(-150px,68px) rotate(-24deg)}} -@media (prefers-reduced-motion:reduce){.whs-sky i,.whs-mt{animation:none}} -.whs-ico,.whs-tx,.whs-go{position:relative;z-index:1} -.whs-ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.12);color:#FFD9A8} -.whs-ico svg{width:18px;height:18px} -.whs-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} -.whs-tx small{font-size:11px;font-weight:600;letter-spacing:1px;color:rgba(255,255,255,.6)} -.whs-tp{display:flex;align-items:center;gap:6px;min-width:0} -.whs-tp em{flex:none;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.5px;color:#4A2E1E;background:linear-gradient(120deg,#FFE2B8,#FFB98F);padding:1px 6px;border-radius:5px;line-height:15px} -.whs-tp b{font-size:15px;font-weight:900;letter-spacing:.5px;color:#FFE7C7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} -.whs-rl{font-size:12.5px;font-weight:500;color:rgba(255,244,232,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .26s,transform .26s} -.whs-rl.out{opacity:0;transform:translateY(5px)} -.whs-go{flex:none;display:flex;align-items:center;gap:2px;font-size:12px;font-weight:700;color:#FFE2B8} -.whs-go .ic{width:13px;height:13px} +/* 11-07 置顶笔记「孕妈悄悄话」（用户：首页不放，在广场内容里发一条置顶笔记，点了进星空页）： + 右列第一张，样子是一张笔记卡 —— 封面换成夜空（星星一闪一闪 + 偶尔一道流星）+ 本周话题大字 + 一句轮播的悄悄话 */ +.nc.pin .pcv{position:relative;height:calc(var(--cw, 175px) * 1.25);overflow:hidden;color:#fff; + background:radial-gradient(120% 70% at 85% 0%,#5A3B72 0%,transparent 60%),radial-gradient(90% 60% at 0% 100%,#4A2C55 0%,transparent 70%),linear-gradient(180deg,#191634 0%,#241D44 55%,#2F2148 100%)} +.pcv .psk{position:absolute;inset:0;pointer-events:none} +.pcv .psk i{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;opacity:.85;filter:drop-shadow(0 0 2px rgba(255,255,255,.7)); + background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center/contain no-repeat;animation:pTw 2.6s ease-in-out infinite} +.pcv .psk i.b{width:11px;height:11px;margin:-5.5px 0 0 -5.5px;opacity:1;filter:drop-shadow(0 0 4px rgba(255,255,255,.9))} +@keyframes pTw{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:.2;transform:scale(.55)}} +.pcv .pmt{position:absolute;top:8%;left:78%;width:80px;height:2px;border-radius:2px;opacity:0;transform-origin:0 50%; + background:linear-gradient(90deg,#fff,rgba(255,255,255,.7) 30%,rgba(255,255,255,0));box-shadow:0 0 8px 1px rgba(255,255,255,.8);animation:pMt 6s linear infinite 1.2s} +.pcv .pmt::before{content:"";position:absolute;left:-2px;top:-1.5px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px #fff} +.pcv .pmt.m2{top:30%;left:96%;width:60px;animation-duration:9s;animation-delay:4.2s} +@keyframes pMt{0%{opacity:0;transform:translate(0,0) rotate(-28deg)}2%{opacity:1}12%{opacity:0;transform:translate(-130px,70px) rotate(-28deg)}100%{opacity:0;transform:translate(-130px,70px) rotate(-28deg)}} +@media (prefers-reduced-motion:reduce){.pcv .psk i,.pcv .pmt{animation:none}} +.pcv .ptop{position:absolute;left:8px;top:8px;z-index:1;height:19px;padding:0 7px;border-radius:6px;background:linear-gradient(120deg,#FFE2B8,#FFB98F);color:#4A2E1E;font-size:10.5px;font-style:normal;font-weight:900;line-height:19px;letter-spacing:.5px} +.pcv .pbig{position:absolute;left:12px;right:12px;bottom:40px;z-index:1} +.pcv .pbig small{display:block;font-size:10.5px;font-weight:700;letter-spacing:1px;color:rgba(255,231,199,.75)} +.pcv .pbig b{display:block;margin-top:4px;font-size:19px;font-weight:900;line-height:1.3;letter-spacing:.5px;color:#FFE7C7;text-shadow:0 2px 10px rgba(20,10,40,.6)} +.pcv .pq{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;margin:0;font-size:11.5px;color:rgba(255,244,232,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .26s,transform .26s} +.pcv .pq.out{opacity:0;transform:translateY(5px)} +.nb .ntg.k-whs{background:#F0EBFA;color:#7A5BB8} +.nc.pin .nf .pav{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#3E2F5E,#6B4AA8);color:#FFE2B8;font-size:10px;font-style:normal} +.nc.pin .nf .pgo{margin-left:auto;flex:none;font-size:11px;font-weight:800;color:#7A5BB8} .qf-st{position:absolute;inset:0;pointer-events:none;opacity:.9; background-image:radial-gradient(1.4px 1.4px at 12% 20%,#fff,transparent),radial-gradient(1px 1px at 28% 70%,#fff,transparent),radial-gradient(1.2px 1.2px at 46% 14%,#FFE9B0,transparent), radial-gradient(1px 1px at 54% 82%,#fff,transparent),radial-gradient(1.5px 1.5px at 62% 30%,#fff,transparent),radial-gradient(1px 1px at 8% 88%,#FFE9B0,transparent),radial-gradient(1.2px 1.2px at 40% 46%,#fff,transparent); @@ -956,7 +955,7 @@ html.night .gtg button.on{background:#F2725B;border-color:#F2725B;color:#fff}
- + @@ -1198,48 +1197,40 @@ html.night .gtg button.on{background:#F2725B;border-color:#F2725B;color:#fff} '' + '宝宝祈福树#为宝宝挂一张福牌#集齐五福，愿宝宝平平安安' + '去祈福'; - } /* 11-07 用户：「悄悄话算孕期广场的话题性质」→ 祈福树横幅下面放一条悄悄话夜空细条（同首页广场模块底部那条）。 - 数据同首页：GET /whisper?openid=&week=（孕周取首页写的 mmbox.gcwk.v1）；拉不到 / 没孕周 / 已退出登录 → 不显示，不造内容。 - 星空全屏页只在首页有 → 点了回首页带 ?wh=1，首页数据回来自动打开。 */ + } /* 11-07 用户：「首页就不放了，在内容页里放，发一个笔记置顶，点击就进到这个页面」→ 「全部」信息流右列第一张置顶笔记卡。 + 有孕周（首页写的 mmbox.gcwk.v1，≥4 周、没生）且没退出登录才出；数据同首页 GET /whisper?openid=&week=，回来后卡里轮播真实的悄悄话， + 拉不到就只显示话题，不造内容。星空全屏页在首页 → 点了跳首页带 ?wh=1，首页直接打开星空页，关掉回到这里。 */ + var PIN_WK = (function () { try { var g = JSON.parse(localStorage.getItem('mmbox.gcwk.v1') || 'null'); return g && !g.pp && g.w ? +g.w : 0; } catch (e) { return 0; } })(); + var PIN_ON = PIN_WK >= 4 && !(window.mbGate && window.mbGate.out); var WHD = null, whRi = 0, whT = null; - function whHTML() { - if (!WHD) return ''; - var th = (WHD.theme && WHD.theme.name) ? WHD.theme : (window.MB_WH_THEME ? window.MB_WH_THEME() : null); - var l = (WHD.list || []).filter(function (x) { return !x.mine; }); - var nm = WHD.week ? WHD.week + '周孕妈悄悄话' : '孕妈悄悄话'; - var sky = [[50,12,6,-1.2,2.4],[60,30,4,-.3,2],[73,15,5,-2.4,2.8],[93,13,4,-3.1,2.2],[21,90,4,-3.7,2.6],[45,88,5,-1.6,3.2],[73,80,4,-2.2,2.6],[89,88,5,-.8,3]] - .map(function (k) { return ''; }).join(''); - return ''; + function pinHTML() { + var th = (WHD && WHD.theme && WHD.theme.name) ? WHD.theme : (window.MB_WH_THEME ? window.MB_WH_THEME() : null); + var l = WHD ? (WHD.list || []).filter(function (x) { return !x.mine; }) : []; + var sky = [[14,14,0,-1.2,2.4],[38,8,0,-.3,2],[62,20,1,-2.4,2.8],[86,12,0,-3.1,2.2],[24,34,1,-3.7,2.6],[50,40,0,-1.6,3.2],[80,32,0,-2.2,2.6],[10,52,0,-.8,3],[70,50,1,-1.9,2.4],[90,58,0,-2.8,3]] + .map(function (k) { return ''; }).join(''); + return ''; } function whRoll() { clearInterval(whT); whRi = 0; - var l = WHD ? (WHD.list || []).filter(function (x) { return !x.mine; }) : []; + var el = document.getElementById('pinRl'), l = WHD ? (WHD.list || []).filter(function (x) { return !x.mine; }) : []; + if (!el || !l.length) return; + el.textContent = '“' + l[0].text + '”'; if (l.length < 2) return; whT = setInterval(function () { - var el = document.getElementById('whsRl'); if (!el || document.hidden) return; - whRi = (whRi + 1) % l.length; el.classList.add('out'); - setTimeout(function () { el.textContent = '“' + l[whRi].text + '”'; el.classList.remove('out'); }, 260); + var e2 = document.getElementById('pinRl'); if (!e2) { clearInterval(whT); return; } if (document.hidden) return; + whRi = (whRi + 1) % l.length; e2.classList.add('out'); + setTimeout(function () { e2.textContent = '“' + l[whRi].text + '”'; e2.classList.remove('out'); }, 260); }, 4000); } - function whFill() { - var slot = document.getElementById('whSlot'); if (!slot) return; - slot.innerHTML = whHTML(); whRoll(); - } - (function whFetch() { - var g = null; try { g = JSON.parse(localStorage.getItem('mmbox.gcwk.v1') || 'null'); } catch (e) {} - var w = g && !g.pp && g.w ? +g.w : 0; - if (w < 4 || (window.mbGate && window.mbGate.out)) return; - fetch('/api/mp/public/mama-box/whisper?openid=' + encodeURIComponent(OPENID || '') + '&week=' + w) - .then(function (r) { return r.ok ? r.json() : null; }) - .then(function (j) { var r = j && j.code === 200 && j.result; if (r && r.show && (r.list || []).length) { WHD = r; whFill(); } }) - .catch(function () {}); - })(); + if (PIN_ON) fetch('/api/mp/public/mama-box/whisper?openid=' + encodeURIComponent(OPENID || '') + '&week=' + PIN_WK) + .then(function (r) { return r.ok ? r.json() : null; }) + .then(function (j) { var r = j && j.code === 200 && j.result; if (r && r.show && (r.list || []).length) { WHD = r; whRoll(); } }) + .catch(function () {}); /* 分类小 banner：家庭婚姻 / 职场 / 经验 点了 = 参与本类最热话题（投稿规则弹层）；测一测 点了 = 进最热的那个测试 */ var CBN = { @@ -1649,7 +1640,7 @@ html.night .gtg button.on{background:#F2725B;border-color:#F2725B;color:#fff} /* 11-05 用户：「职场那些标签和上面的话题整合到一个里面，感觉有点乱」→ 选方案 A：「全部」下去掉「热门话题」整块， 标签作为唯一入口（末尾加「全部话题 ›」）；选中标签时标签下露出这一类的 2～3 个热门话题（用户同意）；投稿奖励一行挪到「大家在聊」上面。 话题本身不变：投稿选话题、帖子卡上的 #话题#、话题详情页照旧。分类视图（catF）仍是原来的热门话题列表。 */ - el.innerHTML = qifuHTML() + '
' + whHTML() + '
' + + el.innerHTML = qifuHTML() + '
'; fh.className = 'shtg'; fh.innerHTML = '

大家在聊

孕妈们的分享
' + @@ -1728,7 +1719,7 @@ html.night .gtg button.on{background:#F2725B;border-color:#F2725B;color:#fff} 11-03 用户：「笔记里测一测减少一些，已经有测一测模块了」→ 原来第 3 位起每 8 张插 1 张（约 20 张），改成第 6 位起每 30 张插 1 张、最多 3 张 */ var csq = CS_MIX.concat(byHot(TM).map(function (x) { return x.id; }).filter(function (id) { return CS_MIX.indexOf(id) < 0; })); list.forEach(function (n, k) { if (k >= 6 && (k - 6) % 30 === 0 && ci < 3) { var tid = csq[ci++ % csq.length]; if (TMBY[tid]) mixed.push({ test: TMBY[tid] }); } mixed.push(n); }); - list = [{ mine: 1 }].concat(mixed); + list = [{ mine: 1 }].concat(PIN_ON ? [{ pin: 1 }] : [], mixed); /* 11-07 置顶笔记「孕妈悄悄话」 */ } /* 11-03 用户：切分类有点卡。原来每张卡塞进列里再 offsetHeight 量高，每量一次整页重排；85 张卡在中端机上卡 0.5 秒以上，正好卡在滑入动画中间。 现在：帖子卡高度直接算（封面 = 列宽 × 比例，底部 = 标题 1/2 行 + 作者行，和 .nc 样式对应），只有「我的投稿 / 收藏 / 测试卡」这几种 @@ -1740,6 +1731,7 @@ html.night .gtg button.on{background:#F2725B;border-color:#F2725B;color:#fff} list.forEach(function (n) { if (n.mine) specials.push(myCardHTML(), favCardHTML()); else if (n.test) specials.push(testCardHTML(n.test, dn)); + else if (n.pin) specials.push(pinHTML()); }); var spH = []; if (specials.length) { @@ -1754,6 +1746,7 @@ html.night .gtg button.on{background:#F2725B;border-color:#F2725B;color:#fff} function add(html, c, h) { out[c].push(anim(html, k2++)); hs[c] += h + 8; } list.forEach(function (n) { if (n.mine) { add(specials[si], 0, spH[si++]); add(specials[si], 0, spH[si++]); return; } + if (n.pin) { add(specials[si], 1, spH[si++]); lastTx[1] = false; return; } /* 右列第一张 */ if (n.test) { var tc0 = hs[0] <= hs[1] ? 0 : 1; add(specials[si], tc0, spH[si++]); lastTx[tc0] = false; return; } nk++; var c = hs[0] <= hs[1] ? 0 : 1, sty = !lastTx[c] && n.photo ? (txN[c]++ % 2 ? 'tg' : 'ov') : ''; @@ -1761,6 +1754,7 @@ html.night .gtg button.on{background:#F2725B;border-color:#F2725B;color:#fff} var r = n.ratio; if (n.photo && sty === 'ov') r = Math.max(r, 1.33); else if (n.photo && sty === 'tg') r = Math.max(r, 1.2); add(cardHTML(n, !cur, sty), c, estH(n, r)); }); + if (PIN_ON) setTimeout(whRoll, 0); var FIRST = 14, gen = renderFeed.gen = (renderFeed.gen || 0) + 1; cols[0].innerHTML = out[0].slice(0, FIRST).join(''); cols[1].innerHTML = out[1].slice(0, FIRST).join(''); if (out[0].length > FIRST || out[1].length > FIRST) setTimeout(function () { @@ -1885,7 +1879,6 @@ html.night .gtg button.on{background:#F2725B;border-color:#F2725B;color:#fff} $('#more').addEventListener('click', function (e) { if (e.target.closest('[data-t]')) { haptic(); selectTopic(''); } }); $('#head').addEventListener('click', function (e) { if (e.target.closest('#qfBanner')) { goQifu(); return; } - if (e.target.closest('#whsGo')) { haptic(); var q = new URLSearchParams(location.search); ['t', 'n', 'c'].forEach(function (k) { q.delete(k); }); q.set('wh', '1'); location.href = '../?' + q + location.hash; return; } var cb = e.target.closest('.cbn[data-test], .csv-i[data-test]'); if (cb) { haptic(); location.href = ceshiURL(cb.dataset.test, true); return; } var dc = e.target.closest('#csvGo'); if (dc) { csdRoll(dc); return; } var j = e.target.closest('[data-join]'); if (j) { haptic(); openRule(j.dataset.join); return; } @@ -1955,6 +1948,7 @@ html.night .gtg button.on{background:#F2725B;border-color:#F2725B;color:#fff} }, true); $('#wf').addEventListener('click', function (e) { if (e.target.closest('[data-mine]')) { haptic(); location.href = mineURL(); return; } + if (e.target.closest('#whPin')) { haptic(); var q = new URLSearchParams(location.search); ['t', 'n', 'c'].forEach(function (k) { q.delete(k); }); q.set('wh', '1'); location.href = '../?' + q + location.hash; return; } if (e.target.closest('[data-fav]')) { haptic(); openFav(false); return; } var ts = e.target.closest('[data-test]'); if (ts) { haptic(); location.href = ceshiURL(ts.dataset.test, catF === 'ceshi'); return; } diff --git a/index.html b/index.html index db026de..9452d74 100644 --- a/index.html +++ b/index.html @@ -9,16 +9,16 @@ 兜爸心选 · 孕育陪伴 - + - + - +