jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

孕妈广场：顶部换成宝宝祈福树 banner（树摇摆、福牌上飘、星光，点击进 /qifu-shu/ 带身份并上报 last_app）；投稿奖励挪到热门话题列表头

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-11-02 10:26:15 +00:00
parent 2fe63c7717
commit 62a889b474
5 changed files with 82 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/img/d71826d10457.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

2
demo/gch/v4.js
View File

@@ -187,5 +187,5 @@
}
/* feed.js 首页默认不加载（index.html 只引了 topics.js），这里按需拉一次 */
if (window.GC_FEED) init();
else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110213'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110214'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
})();

82
guangchang/index.html
View File

@@ -62,6 +62,48 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
.k-baby,.c-baby{--kf:#2E8A7C;--kt:#21705F;--kl:#EBF7F3;--kl2:#CDEBE3}
.cats .c-family,.cats .c-marriage,.cats .c-work,.cats .c-baby{--cf:var(--kf)}
/* ---------- 祈福树 banner（11-02）：夜空 + 摇摆的树 + 飘福牌 ---------- */
.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)}
.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);
animation:qfTw 3.2s ease-in-out infinite alternate}
.qf-st::after{content:"";position:absolute;inset:0;background-image:radial-gradient(1.3px 1.3px at 20% 40%,#fff,transparent),radial-gradient(1px 1px at 35% 26%,#FFE9B0,transparent),radial-gradient(1.4px 1.4px at 50% 60%,#fff,transparent),radial-gradient(1px 1px at 16% 62%,#fff,transparent);
animation:qfTw 2.4s ease-in-out infinite alternate-reverse}
@keyframes qfTw{from{opacity:.35}to{opacity:1}}
.qf-glow{position:absolute;right:-6px;bottom:-30px;width:190px;height:190px;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(255,206,110,.55) 0%,rgba(255,170,80,.22) 40%,transparent 70%);animation:qfGl 3.6s ease-in-out infinite}
@keyframes qfGl{0%,100%{opacity:.7;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
.qf-tree{position:absolute;right:-4px;bottom:-4px;height:150px;width:auto;transform-origin:52% 100%;animation:qfSw 5.5s ease-in-out infinite;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
@keyframes qfSw{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.qf-fly{position:absolute;right:22px;bottom:60px;width:110px;height:100px;pointer-events:none}
.qf-fly i{position:absolute;bottom:0;width:15px;height:20px;border-radius:3px;background:linear-gradient(#E8343F,#B8141F);color:#FFD98A;font-style:normal;font-size:10px;font-weight:900;line-height:20px;text-align:center;
font-family:"STKaiti","KaiTi","Kaiti SC",serif;box-shadow:0 0 8px rgba(255,190,90,.6);opacity:0;animation:qfUp 4.8s ease-in infinite}
.qf-fly i::before{content:"";position:absolute;left:50%;top:-5px;width:1px;height:5px;background:#FFD98A}
.qf-fly i:nth-child(1){left:6px;animation-delay:0s}.qf-fly i:nth-child(2){left:44px;animation-delay:1.2s}
.qf-fly i:nth-child(3){left:82px;animation-delay:2.4s}.qf-fly i:nth-child(4){left:26px;animation-delay:3.6s}
@keyframes qfUp{0%{opacity:0;transform:translateY(10px) rotate(-8deg) scale(.7)}15%{opacity:1}70%{opacity:.9}100%{opacity:0;transform:translateY(-88px) rotate(10deg) scale(1)}}
.qf-tx{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;height:100%;padding:16px 0 14px 16px;color:#fff}
.qf-tx small{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 9px 0 7px;border-radius:99px;background:rgba(255,255,255,.12);font-size:11px;font-weight:700;color:#FFE3A6;letter-spacing:.5px}
.qf-tx small i{width:6px;height:6px;border-radius:50%;background:#FFC85C;box-shadow:0 0 6px #FFC85C;animation:qfGl 1.8s ease-in-out infinite}
.qf-tx b{margin-top:9px;font-size:21px;font-weight:900;letter-spacing:1px;line-height:1.2;font-family:"STKaiti","KaiTi","Kaiti SC","STSong",serif;
background:linear-gradient(180deg,#FFF3D2,#FFC86A);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 18px rgba(255,200,110,.25)}
.qf-tx em{margin-top:5px;font-style:normal;font-size:11px;color:rgba(255,236,200,.75);letter-spacing:.5px}
.qf-go{position:relative;overflow:hidden;margin-top:auto;display:inline-flex;align-items:center;gap:2px;height:30px;padding:0 10px 0 14px;border-radius:99px;
background:linear-gradient(135deg,#FFE29A,#F6B544);color:#7A3A0C;font-size:13px;font-weight:900;box-shadow:0 6px 14px -6px rgba(255,190,80,.9)}
.qf-go .ic{width:13px;height:13px}
.qf-go::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg);animation:qfSh 2.8s ease-in-out infinite}
@keyframes qfSh{0%,55%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.qf *,.qf *::before,.qf *::after{animation:none!important}.qf-fly{display:none}}
/* 投稿奖励：热门话题列表头一行 */
.htl .rwl{display:flex;align-items:center;gap:6px;width:100%;margin:6px 0 2px;padding:8px 10px;border-radius:12px;background:linear-gradient(100deg,#FFF1E8,#FFE6E6);text-align:left;font-size:12px;font-weight:700;color:#8A4B36}
.htl .rwl .ic{flex:none;width:16px;height:16px;color:#F2553A}
.htl .rwl span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.htl .rwl em{font-style:normal;color:#F2394A;font-weight:900}
.htl .rwl b{flex:none;font-size:11.5px;color:#F2553A}
/* ---------- 投稿有奖横幅 ---------- */
.rw{position:relative;display:flex;align-items:center;gap:12px;margin:2px 12px 0;padding:13px 14px;border-radius:18px;overflow:hidden;width:calc(100% - 24px);text-align:left;
background:radial-gradient(120px 90px at 100% 0,rgba(255,255,255,.35),transparent 70%),linear-gradient(120deg,#FF8A5B,#F4593C 60%,#E8473A);color:#fff;box-shadow:0 10px 22px -12px #E8473A}
@@ -456,9 +498,9 @@ 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=26110213"></script>
<script src="data.js?v=26110213"></script>
<script src="feed.js?v=26110213"></script>
<script src="topics.js?v=26110214"></script>
<script src="data.js?v=26110214"></script>
<script src="feed.js?v=26110214"></script>
<script>
(function () {
'use strict';
@@ -615,6 +657,32 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
bar.style.background = getComputedStyle(on).getPropertyValue('--cf');
}
window.addEventListener('resize', moveBar);
/* 11-02 用户：「孕妈广场做一张为宝宝祈福的 banner，点了直接进祈福树；要把祈福树调上来、有动效，像首页 3D 婴儿房，吸引点击；替换掉 30 现金 + 500 兜豆」
→ 夜空卡 + 右侧祈福树（透明图 assets/img/d71826d10457.png，AI 生成）轻轻摇 + 树后金光呼吸 + 福牌往上飘 + 星星闪；整卡可点 */
function qifuHTML() {
return '<button type="button" class="qf" id="qfBanner" aria-label="去宝宝祈福树，为宝宝挂一张福牌">' +
'<i class="qf-st" aria-hidden="true"></i><i class="qf-glow" aria-hidden="true"></i>' +
'<img class="qf-tree" src="../assets/img/d71826d10457.png" alt="" decoding="async">' +
'<span class="qf-fly" aria-hidden="true"><i>福</i><i>安</i><i>福</i><i>康</i></span>' +
'<span class="qf-tx"><small><i></i>宝宝祈福树</small><b>为宝宝挂一张福牌</b><em>集齐五福，愿宝宝平平安安</em>' +
'<span class="qf-go">去祈福<svg class="ic"><use href="#i-right"/></svg></span></span></button>';
}
/* 跳祈福树：同首页 jumpApp(QIFU_URL) —— 相对路径、身份走 query、上报 last_app 与分享位置（AGENTS 硬约定 3/6/7/13） */
function goQifu() {
var url = '/qifu-shu/', q = [], oid = param('openid'), uid = param('unionid');
if (oid) q.push('openid=' + encodeURIComponent(oid));
if (uid) q.push('unionid=' + encodeURIComponent(uid));
if (!oid && !uid) q.push('__no_identity=1');
var target = url + '?' + q.join('&');
try {
if (oid) {
var api = '/api/mp/public/last-app?openid=' + encodeURIComponent(oid) + '&url=' + encodeURIComponent(location.origin + url);
if (!(navigator.sendBeacon && navigator.sendBeacon(api)) && window.fetch) fetch(api, { method: 'POST', keepalive: true }).catch(function () {});
}
if (window.wxAuth && wxAuth.reportLocation) wxAuth.reportLocation({ href: target });
} catch (e) {}
haptic(); location.href = target;
}
function rewardHTML(sm) {
return '<button type="button" class="rw' + (sm ? ' sm' : '') + '" data-rule="1"><span class="gf"><svg class="ic"><use href="#i-gift"/></svg></span>' +
'<span class="rt"><small>参与话题投稿 · 被选中奖励</small><b>' + REWARD + '</b></span><span class="go">怎么参与<svg class="ic" style="width:12px;height:12px"><use href="#i-right"/></svg></span></button>';
@@ -633,10 +701,11 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
var t = TBY[cur], el = $('#head'), fh = $('#fh');
if (!t) {
var hl = hotList();
el.innerHTML = rewardHTML() +
el.innerHTML = qifuHTML() +
'<div class="sh"><svg class="fire"><use href="#i-fire"/></svg><h2>热门话题</h2><button type="button" class="more" data-all="1">全部 ' + hl.length + ' 个<svg class="ic" style="width:13px;height:13px"><use href="#i-right"/></svg></button></div>' +
/* 11-02 用户：「热门话题不要一块一块的，改成井号、偏列表的形式」→ 排行列表：名次 + #话题# + 一行简介 + 篇数/热，右侧「参与」 */
'<div class="htl">' + hl.slice(0, 6).map(function (x, i) {
/* 11-02 用户：「热门话题不要一块一块的，改成井号、偏列表的形式」→ 排行列表：名次 + #话题# + 一行简介 + 篇数/热，右侧「参与」
投稿奖励从顶部大横幅挪到这里当列表头一行（用户：「30 现金 + 500 兜豆看放哪」→ 跟「参与」放一起，点了看规则） */
'<div class="htl"><button type="button" class="rwl" data-rule="1"><svg class="ic"><use href="#i-gift"/></svg><span>投稿被选中得 ' + REWARD + '</span><b>怎么参与 ›</b></button>' + hl.slice(0, 6).map(function (x, i) {
return '<div class="hr k-' + x.cat + '" data-t="' + x.id + '" role="button"><i class="no' + (i < 3 ? ' t' + i : '') + '">' + (i + 1) + '</i>' +
'<span class="hm"><b><em>#</em>' + esc(x.name) + '<em>#</em></b><small>' + (catF ? '' : '<u>' + CATS.filter(function (c) { return c[0] === x.cat; })[0][1] + '</u>') + cntT(x.id) + ' 篇分享 · ' + esc((D[x.id] || {}).desc || '') + '</small></span>' +
'<button type="button" class="jn" data-join="' + x.id + '">参与</button></div>';
@@ -740,6 +809,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
});
$('#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; }
var j = e.target.closest('[data-join]'); if (j) { haptic(); openRule(j.dataset.join); return; }
if (e.target.closest('[data-rule]')) { openRule(''); return; }
if (e.target.closest('[data-all]')) { openTopics(); return; }

8
index.html
View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title>
<!-- V:26110213 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26110214 缓存版本标记：改 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） -->
@@ -2498,7 +2498,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=26110213"></script>
<script src="guangchang/topics.js?v=26110214"></script>
<script src="js/app.js"></script>
<script>
/* 11-02 首页「孕妈广场」效果稿：地址带 ?gcv=1~6 时，把 #gcHome 换成 demo/gch/vN.css + vN.js 的版式并滚到这一块。
@@ -2506,7 +2506,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=26110213';
var n = m ? m[1] : '6', l = document.createElement('link'), s = document.createElement('script'), q = m ? Date.now() : 'v=26110214';
l.rel = 'stylesheet'; l.href = 'demo/gch/v' + n + '.css?' + q;
s.src = 'demo/gch/v' + n + '.js?' + q;
if (m) s.onload = function () { setTimeout(function () { var el = document.getElementById('gcHome'); if (el) el.scrollIntoView({ block: 'center' }); }, 900); };
@@ -2514,7 +2514,7 @@
/* 11-02 品牌露出（用户定 4 处都要）：默认加载，?brand=0 可关掉对比；⚠️ 上正式前和 V6 一起并进正式代码，别依赖 demo/ */
if (!/[?&]brand=0/.test(location.search)) {
var bl = document.createElement('link'), bs = document.createElement('script');
bl.rel = 'stylesheet'; bl.href = 'demo/brand/brand.css?v=26110213'; bs.src = 'demo/brand/brand.js?v=26110213';
bl.rel = 'stylesheet'; bl.href = 'demo/brand/brand.css?v=26110214'; bs.src = 'demo/brand/brand.js?v=26110214';
document.head.appendChild(bl); document.body.appendChild(bs);
}
})();

2
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26110213';
var VER = '26110214';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));