我的页改版（蜜桃珊瑚头部 + 兜豆兑换商城主卡 + 服务宫格）；首页新增兜豆兑换商城入口
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
113
index.html
113
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:26100135 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<!-- V:26100136 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<link rel="stylesheet" href="mama-box.css">
|
||||
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
||||
<!-- 共享助手：授权/跳商城/位置上报（分享卡片同步，见 docs/h5-auth-standard.md 第四节） -->
|
||||
@@ -355,6 +355,13 @@
|
||||
<button class="nyp-btn" id="nyBtn" type="button">进去布置 <svg viewBox="0 0 24 24" width="11" height="11" aria-hidden="true"><path d="M8 5l8 7-8 7z" fill="currentColor"/></svg></button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 首页 · 兜豆兑换商城入口（2026-10-01）：紧跟婴儿房（那张卡写着「攒兜豆把它布置好」），
|
||||
顺着「兜豆」这条线往下接。点击同「我的」页 #meExchCard → openExchange()。 -->
|
||||
<button class="exch-strip ripple" id="homeExch">
|
||||
<span class="es-coin" aria-hidden="true"><svg viewBox="0 0 40 40" width="34" height="34"><circle cx="20" cy="20" r="15" fill="#FFC94D" stroke="#E89B1E" stroke-width="2.2"/><circle cx="20" cy="20" r="10" fill="none" stroke="#FFF1C2" stroke-width="1.4"/><path d="M15.5 16c0-1.4 1.1-2.4 2.6-2.4h2c2.9 0 4.9 2 4.9 4.6v3.6c0 2.6-2 4.6-4.9 4.6h-2c-1.5 0-2.6-1-2.6-2.4z" fill="#fff"/></svg></span>
|
||||
<span class="es-main"><b>兜豆兑换商城</b><span>攒下的兜豆，在这里换成好物</span></span>
|
||||
<span class="es-go">去兑换<i>›</i></span>
|
||||
</button>
|
||||
|
||||
<!-- 模块二 · 今天的动线。
|
||||
上一版这里是两个各自独立的模块：「AI今日小结」一张渐变卡，
|
||||
@@ -848,7 +855,12 @@
|
||||
</section>
|
||||
|
||||
<section class="screen" id="screen-me" data-screen="me">
|
||||
<div class="me-top">
|
||||
<div class="me-top me-v2">
|
||||
<!-- 2026-10-01「我的」页改版：头部从实心橘渐变 + 白卡，改成蜜桃 → 珊瑚的柔光渐变，
|
||||
用户信息直接压在渐变上（白字），下面一张金色「兜豆兑换商城」卡半压在头部边缘。
|
||||
装饰：两团柔光 + 几颗小星星，纯 CSS/SVG，不加图片请求。 -->
|
||||
<i class="mt-glow g1" aria-hidden="true"></i><i class="mt-glow g2" aria-hidden="true"></i>
|
||||
<svg class="mt-stars" viewBox="0 0 120 60" aria-hidden="true"><path d="M20 14l1.6 4.2 4.4 1.6-4.4 1.6L20 25.6l-1.6-4.2-4.4-1.6 4.4-1.6z" fill="#fff" opacity=".75"/><path d="M92 8l1 2.6 2.6 1-2.6 1L92 15.2l-1-2.6-2.6-1 2.6-1z" fill="#fff" opacity=".6"/><circle cx="64" cy="22" r="1.6" fill="#fff" opacity=".55"/><circle cx="108" cy="40" r="1.2" fill="#fff" opacity=".5"/></svg>
|
||||
<div class="hero-top">
|
||||
<!-- （商城图标已移除：进商城统一走下方「兜爸心选」模块 meMallCard）
|
||||
<button class="icon-btn plain" id="btnMall" aria-label="进商城">
|
||||
@@ -898,6 +910,7 @@
|
||||
⚠️ syncPregnancy() 里那行 $('.me-info p') 早就删掉了（它取的是
|
||||
**第一个** <p>）。现在第一个 <p> 是下面的「已连续记录」，
|
||||
谁要是把那行加回来，会把连续记录天数冲掉，而且是静默的。 -->
|
||||
<span class="me-tag hide" id="meTag"></span>
|
||||
<p id="meRecordLine">已连续记录 <b>42</b> 天</p>
|
||||
</div>
|
||||
<i class="me-chev" aria-hidden="true">›</i>
|
||||
@@ -905,8 +918,32 @@
|
||||
</div>
|
||||
|
||||
<div class="page-body no-top">
|
||||
<!-- 兜豆兑换商城主卡（2026-10-01）：半压在头部渐变边缘，是「我的」页最跳的一张。
|
||||
点击走 openExchange()（app.js）—— 链接优先取应用后台，取不到再用写死的兜底地址。
|
||||
#meBeans 行在拿到兜豆余额前隐藏（余额接口待兑换商城侧提供）。 -->
|
||||
<button class="bean-card ripple" id="meExchCard">
|
||||
<span class="bc-pattern" aria-hidden="true"></span>
|
||||
<span class="bc-coin" aria-hidden="true">
|
||||
<svg viewBox="0 0 64 64" width="64" height="64">
|
||||
<ellipse cx="34" cy="50" rx="20" ry="6" fill="#B8641A" opacity=".18"/>
|
||||
<circle cx="28" cy="30" r="17" fill="#FFC94D"/><circle cx="28" cy="30" r="17" fill="none" stroke="#E89B1E" stroke-width="2.4"/>
|
||||
<circle cx="28" cy="30" r="11.5" fill="none" stroke="#FFF1C2" stroke-width="1.6" opacity=".9"/>
|
||||
<path d="M23 25.5c0-1.6 1.3-2.8 3-2.8h2.4c3.3 0 5.6 2.3 5.6 5.3v4c0 3-2.3 5.3-5.6 5.3H26c-1.7 0-3-1.2-3-2.8z" fill="#fff" opacity=".95"/>
|
||||
<circle cx="46" cy="42" r="10" fill="#FFD966"/><circle cx="46" cy="42" r="10" fill="none" stroke="#E89B1E" stroke-width="2"/>
|
||||
<path d="M46 37.5v9M41.5 42h9" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="bc-main">
|
||||
<span class="bc-kick">兜豆兑换商城</span>
|
||||
<span class="bc-title">攒兜豆，换好物</span>
|
||||
<span class="bc-sub">做任务、开盲盒都能攒</span>
|
||||
<span class="bc-beans hide" id="meBeansRow">我的兜豆 <b id="meBeans">0</b></span>
|
||||
</span>
|
||||
<span class="bc-cta">去兑换<i>›</i></span>
|
||||
</button>
|
||||
|
||||
<!-- 授权完善资料：H5 → navigateTo → 小程序授权页(头像/昵称/手机号) → box_app /auth/profile 落库 -->
|
||||
<div class="list-card" style="margin-top:12px" id="meAuthBox">
|
||||
<div class="list-card" style="margin-top:14px" id="meAuthBox">
|
||||
<button class="li ripple" id="meAuthCard">
|
||||
<span class="li-ico o"><svg viewBox="0 0 24 24" width="19" height="19" aria-hidden="true"><rect x="5" y="10.5" width="14" height="9.5" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M12 15v2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
|
||||
<span class="li-t">授权完善资料</span>
|
||||
@@ -957,11 +994,11 @@
|
||||
rgba 各家浏览器支持不一，stroke-opacity 是 SVG 1.1 的正经属性。 -->
|
||||
<div class="pc-ico">
|
||||
<svg viewBox="0 0 32 32" width="27" height="27" aria-hidden="true">
|
||||
<circle cx="16" cy="16" r="11.6" fill="none" stroke="#FFFFFF" stroke-opacity=".3" stroke-width="3.2"/>
|
||||
<circle id="pcRing" cx="16" cy="16" r="11.6" fill="none" stroke="#FFFFFF" stroke-width="3.2"
|
||||
<circle cx="16" cy="16" r="11.6" fill="none" stroke="#F0704F" stroke-opacity=".3" stroke-width="3.2"/>
|
||||
<circle id="pcRing" cx="16" cy="16" r="11.6" fill="none" stroke="#F0704F" stroke-width="3.2"
|
||||
stroke-linecap="round" stroke-dasharray="45 73" transform="rotate(-90 16 16)"/>
|
||||
<circle cx="17" cy="12.9" r="3.2" fill="#FFFFFF"/>
|
||||
<path d="M13.8 17.2c.3 3.6 3 5.1 6 4.1" fill="none" stroke="#FFFFFF" stroke-width="3.4" stroke-linecap="round"/>
|
||||
<circle cx="17" cy="12.9" r="3.2" fill="#F0704F"/>
|
||||
<path d="M13.8 17.2c.3 3.6 3 5.1 6 4.1" fill="none" stroke="#F0704F" stroke-width="3.4" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="pc-main"><div class="pc-title" id="pcTitle">孕 24 周 +3 天</div><div class="pc-sub" id="pcSub">预产期 2024年12月22日 · 还有 110 天</div></div>
|
||||
@@ -1122,54 +1159,28 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h2 class="sec-title dark">甄选好物</h2>
|
||||
<button class="wx-card ripple" id="meMallCard">
|
||||
<!-- 「甄选好物」角标已按需求去掉（.wx-top 角标行整行移除；孕育顾问那条"限量福利"不受影响） -->
|
||||
<span class="wx-body">
|
||||
<!-- 逛商城入口：购物袋图标（同 .wx-fig 76×拉伸高） -->
|
||||
<span class="wx-fig" aria-hidden="true">
|
||||
<svg viewBox="0 0 64 64" width="100%" height="100%">
|
||||
<rect x="2" y="2" width="60" height="60" rx="14" fill="#FFF1E6"/>
|
||||
<path d="M19 25h26l-2.1 23.2a3.4 3.4 0 0 1-3.4 3H25.5a3.4 3.4 0 0 1-3.4-3L19 25z" fill="#fff" stroke="#E8A98C" stroke-width="1.7" stroke-linejoin="round"/>
|
||||
<path d="M26 25a6 6 0 0 1 12 0" fill="none" stroke="#D85F38" stroke-width="1.9" stroke-linecap="round"/>
|
||||
<path d="M27.5 35h9M27.5 41h9" stroke="#F2C7B3" stroke-width="1.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="wx-main">
|
||||
<span class="wx-head">
|
||||
<span class="wx-title">兜爸心选商城</span>
|
||||
<span class="wx-lim">母婴 · 好物</span>
|
||||
</span>
|
||||
<span class="wx-sub">为宝宝甄选的母婴好物，值得认真挑一挑</span>
|
||||
</span>
|
||||
<!-- 心选商城：改成一条横幅（原来是带大按钮的电商卡，和上面的兑换卡抢主角）。id/点击逻辑不变（goMall）。 -->
|
||||
<button class="mall-strip ripple" id="meMallCard">
|
||||
<span class="ms-ico" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" width="22" height="22"><path d="M5 8h14l-1.2 11a2 2 0 0 1-2 1.8H8.2a2 2 0 0 1-2-1.8z" fill="#fff" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M8.6 10V6.8a3.4 3.4 0 0 1 6.8 0V10" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
|
||||
</span>
|
||||
<span class="wx-cta">进入商城</span>
|
||||
<span class="ms-main"><b>兜爸心选商城</b><span>为宝宝甄选的母婴好物</span></span>
|
||||
<span class="ms-go">逛一逛<i>›</i></span>
|
||||
</button>
|
||||
|
||||
<h2 class="sec-title dark">设置与服务</h2>
|
||||
<div class="list-card">
|
||||
<!-- 「提醒设置」整项已按需求删除 -->
|
||||
<!-- 孕期盲盒卡册的常驻入口（2026-10-01 用户反馈：开完盲盒后想回看，只认首页横幅不够）。
|
||||
点击与首页横幅同一路径（app.js openBoxEntry）；#meBoxV 显示「已收集 N/37」，未拿到数据时隐藏整行。 -->
|
||||
<button class="li ripple hide" id="meBoxCard">
|
||||
<span class="li-ico o"><svg viewBox="0 0 24 24" width="19" height="19" aria-hidden="true"><rect x="4.5" y="10.5" width="15" height="9.5" rx="2" fill="none" stroke="currentColor" stroke-width="1.8"/><rect x="3.3" y="7.2" width="17.4" height="3.6" rx="1.3" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M12 7.2V20M12 7.2C10.4 3.8 7 4.3 8 6.4c.6 1 2.4.9 4 .8zM12 7.2c1.6-3.4 5-2.9 4-.8-.6 1-2.4.9-4 .8z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg></span>
|
||||
<span class="li-t">我的孕期卡册</span><span class="li-v" id="meBoxV"></span><i class="chev">›</i></button>
|
||||
<button class="li ripple" data-open="detailSetting" data-set="privacy">
|
||||
<span class="li-ico p"><svg viewBox="0 0 24 24" width="19" height="19" aria-hidden="true"><rect x="4.5" y="10" width="15" height="10.5" rx="3" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M8.2 10V7.6a3.8 3.8 0 0 1 7.6 0V10" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="12" cy="15.2" r="1.5" fill="currentColor"/></svg></span>
|
||||
<span class="li-t">隐私与权限</span><i class="chev">›</i></button>
|
||||
<button class="li ripple" data-open="detailSetting" data-set="help">
|
||||
<span class="li-ico o"><svg viewBox="0 0 24 24" width="19" height="19" aria-hidden="true"><path d="M12 4.2c4.5 0 7.8 2.8 7.8 6.4s-3.3 6.4-7.8 6.4c-.7 0-1.3-.06-1.9-.18l-3.6 2.3a.4.4 0 0 1-.6-.45l.8-2.9c-1.5-1.16-2.3-2.7-2.3-4.4 0-3.6 3.1-6.4 7.6-6.4z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M9.9 9.4a2.2 2.2 0 0 1 4.2.8c0 1.5-2.1 1.6-2.1 3" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></span>
|
||||
<span class="li-t">帮助与反馈</span><i class="chev">›</i></button>
|
||||
<button class="li ripple" data-open="detailSetting" data-set="about">
|
||||
<span class="li-ico b"><svg viewBox="0 0 24 24" width="19" height="19" aria-hidden="true"><circle cx="12" cy="12" r="8.2" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M12 11v5.4" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/><circle cx="12" cy="7.9" r="1.15" fill="currentColor"/></svg></span>
|
||||
<span class="li-t">关于兜爸心选</span><span class="li-v">v3.2.1</span><i class="chev">›</i></button>
|
||||
<!-- 退出授权登录：仅已授权时显示（applyRemoteProfile 控制）。
|
||||
调 box_app /auth/logout —— 只翻授权状态，不清昵称/头像/手机号等资料 -->
|
||||
<button class="li ripple" id="meLogoutCard" style="display:none">
|
||||
<span class="li-ico r"><svg viewBox="0 0 24 24" width="19" height="19" aria-hidden="true"><path d="M14 5h5a1.5 1.5 0 0 1 1.5 1.5v11A1.5 1.5 0 0 1 19 19h-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M10 12H3m0 0 3.5-3.5M3 12l3.5 3.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
||||
<span class="li-t" style="color:#C33A2E">退出授权登录</span>
|
||||
<i class="chev">›</i></button>
|
||||
<h2 class="sec-title dark">常用服务</h2>
|
||||
<!-- 设置与服务：列表改成四宫格。按钮的 id / data-open / data-set 全部沿用，JS 不用动。
|
||||
#meBoxCard 仍由盲盒数据控制 .hide；#meBoxV 显示成右上角小角标。 -->
|
||||
<div class="svc-grid">
|
||||
<button class="svc ripple hide" id="meBoxCard"><span class="sv-ico o"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><rect x="4.5" y="10.5" width="15" height="9.5" rx="2" fill="none" stroke="currentColor" stroke-width="1.8"/><rect x="3.3" y="7.2" width="17.4" height="3.6" rx="1.3" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M12 7.2V20M12 7.2C10.4 3.8 7 4.3 8 6.4c.6 1 2.4.9 4 .8zM12 7.2c1.6-3.4 5-2.9 4-.8-.6 1-2.4.9-4 .8z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg></span><span class="sv-t">孕期卡册</span><span class="sv-badge" id="meBoxV"></span></button>
|
||||
<button class="svc ripple" data-open="detailSetting" data-set="privacy"><span class="sv-ico p"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><rect x="4.5" y="10" width="15" height="10.5" rx="3" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M8.2 10V7.6a3.8 3.8 0 0 1 7.6 0V10" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="12" cy="15.2" r="1.5" fill="currentColor"/></svg></span><span class="sv-t">隐私权限</span></button>
|
||||
<button class="svc ripple" data-open="detailSetting" data-set="help"><span class="sv-ico o"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M12 4.2c4.5 0 7.8 2.8 7.8 6.4s-3.3 6.4-7.8 6.4c-.7 0-1.3-.06-1.9-.18l-3.6 2.3a.4.4 0 0 1-.6-.45l.8-2.9c-1.5-1.16-2.3-2.7-2.3-4.4 0-3.6 3.1-6.4 7.6-6.4z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M9.9 9.4a2.2 2.2 0 0 1 4.2.8c0 1.5-2.1 1.6-2.1 3" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></span><span class="sv-t">帮助反馈</span></button>
|
||||
<button class="svc ripple" data-open="detailSetting" data-set="about"><span class="sv-ico b"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><circle cx="12" cy="12" r="8.2" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M12 11v5.4" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/><circle cx="12" cy="7.9" r="1.15" fill="currentColor"/></svg></span><span class="sv-t">关于我们</span></button>
|
||||
</div>
|
||||
<!-- 退出授权登录：仅已授权时显示（applyRemoteProfile 控制 style.display）。
|
||||
调 box_app /auth/logout —— 只翻授权状态，不清昵称/头像/手机号等资料 -->
|
||||
<button class="me-logout ripple" id="meLogoutCard" style="display:none">退出授权登录</button>
|
||||
<p class="me-ver">兜爸心选 · v3.2.1</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
30
js/app.js
30
js/app.js
@@ -3,7 +3,7 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
|
||||
var VER = '26100135';
|
||||
var VER = '26100136';
|
||||
const $ = (s, c) => (c || document).querySelector(s);
|
||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||
|
||||
@@ -1063,6 +1063,12 @@
|
||||
const p = $('.seg-panel[data-panel="data"]');
|
||||
if (p) p.classList.toggle('is-empty', !!on);
|
||||
}
|
||||
/* 「我的」页头部名字下面那枚小标签：孕周 / 宝宝月龄；未完善时隐藏 */
|
||||
function setMeTag(t) {
|
||||
const el = $('#meTag'); if (!el) return;
|
||||
el.textContent = t || '';
|
||||
el.classList.toggle('hide', !t);
|
||||
}
|
||||
function syncPregnancy() {
|
||||
/* 孕期小知识：只认真实孕周（自己判显隐，见 renderTips） */
|
||||
renderTips();
|
||||
@@ -1083,6 +1089,7 @@
|
||||
/* ① 我的 · 孕期卡 */
|
||||
const pcT = $('#pcTitle'), pcS = $('#pcSub'), pcB = $('#pcBar'), pcR = $('#pcRing');
|
||||
if (pcT) pcT.textContent = ageTxt;
|
||||
setMeTag(ageTxt);
|
||||
if (pcS) pcS.textContent = '记录宝宝的成长时光';
|
||||
if (pcB) pcB.style.setProperty('--p', '100%');
|
||||
if (pcR) {
|
||||
@@ -1135,6 +1142,7 @@
|
||||
fpRender();
|
||||
/* ① 我的 · 孕期卡 → 引导 */
|
||||
$('#pcTitle').textContent = '待完善孕期信息';
|
||||
setMeTag('');
|
||||
$('#pcSub').textContent = '填好预产期，开启孕期陪伴';
|
||||
$('#pcBar').style.setProperty('--p', '0%');
|
||||
const rg = $('#pcRing');
|
||||
@@ -1206,6 +1214,7 @@
|
||||
|
||||
/* ① 我的 · 孕期卡 */
|
||||
$('#pcTitle').textContent = weekTxt;
|
||||
setMeTag(weekTxt);
|
||||
$('#pcSub').textContent = (dueTxt ? dueTxt + ' · ' : '') + '还有 ' + left + ' 天';
|
||||
$('#pcBar').style.setProperty('--p', pct + '%');
|
||||
/* 卡片左上角那个图标是一圈进度环，和这条进度条同源（同一个 pct），
|
||||
@@ -4134,6 +4143,25 @@
|
||||
toast('请在微信小程序中打开商城');
|
||||
}
|
||||
}
|
||||
/* ---------- 兜豆兑换商城入口（2026-10-01） ----------
|
||||
两个入口：「我的」页金色主卡 #meExchCard、首页婴儿房下面那条 #homeExch。
|
||||
链接优先取应用后台（APP_BY_ID，identifier 按候选名逐个找），走 jumpApp()
|
||||
—— 与其它 H5 应用同一条路（带 openid/unionid）。后台还没配、兜底地址也空时提示，
|
||||
不静默。⚠️ EXCH_FALLBACK_URL 待兑换商城侧给出正式地址后填上。 */
|
||||
const EXCH_IDS = ['duihuan', 'exchange', 'doudou', 'duihuanshangcheng'];
|
||||
const EXCH_FALLBACK_URL = '';
|
||||
function openExchange() {
|
||||
haptic();
|
||||
let app = null;
|
||||
for (const id of EXCH_IDS) { if (APP_BY_ID[id]) { app = APP_BY_ID[id]; break; } }
|
||||
const url = (app && app.url) || EXCH_FALLBACK_URL;
|
||||
if (!url) { toast('兜豆兑换商城即将开放，先攒着兜豆吧'); return; }
|
||||
jumpApp(url, (app && app.identifier) || 'duihuan');
|
||||
}
|
||||
$$('#meExchCard, #homeExch').forEach(function (b) {
|
||||
b.addEventListener('click', openExchange);
|
||||
});
|
||||
|
||||
/* 商城入口：「我的」页服务卡与首页商城主卡。
|
||||
⚠️ 2026-09-19：底 tab #tabMall 已经改回「宝宝来信」（见下面的 #tabLetter 绑定），
|
||||
不再走 goMall —— 所以这里只留两颗真正的商城入口。 */
|
||||
|
||||
107
mama-box.css
107
mama-box.css
@@ -2879,3 +2879,110 @@ a.skip:focus{left:16px;top:16px}
|
||||
.bx-gl:not(.all) .bx-gl-h{flex-direction:column;align-items:flex-start;gap:2px}
|
||||
.bx-gl:not(.all) .bx-gl-l,.bx-gl:not(.all) .bx-gl-s,.bx-gl:not(.all) .bx-gl-b{margin-left:0}
|
||||
.bx-gl:not(.all){padding:9px 10px}
|
||||
|
||||
/* ================= 「我的」页改版（2026-10-01）=================
|
||||
配色：头部蜜桃 → 珊瑚柔光渐变（和首页 hero 同一家族）；兜豆兑换卡用奶油金，
|
||||
是全页唯一的「金色」，一眼就是主角；孕期卡回到白底 + 珊瑚进度（上一版深绿和全站暖色打架）；
|
||||
心选商城 / 常用服务都是白卡，退到背景里。
|
||||
⚠️ 本段写在文件末尾，靠层叠覆盖上面的旧规则（.me-top / .me-card / .preg-card …），
|
||||
旧规则的注释讲的是旧版的取舍，看这里为准。 */
|
||||
.me-top.me-v2{
|
||||
padding:calc(env(safe-area-inset-top) + 14px) 20px 58px;border-radius:0 0 34px 34px;
|
||||
background:
|
||||
radial-gradient(180px 140px at 8% 0%, rgba(255,170,190,.55), rgba(255,170,190,0) 70%),
|
||||
radial-gradient(200px 160px at 100% 85%, rgba(255,206,130,.55), rgba(255,206,130,0) 70%),
|
||||
linear-gradient(160deg,#FF9F7E 0%,#F8775A 52%,#EE6248 100%)}
|
||||
.me-top.me-v2::after{display:none}
|
||||
.mt-glow{position:absolute;border-radius:50%;pointer-events:none}
|
||||
.mt-glow.g1{width:210px;height:210px;right:-70px;top:-90px;background:rgba(255,255,255,.12)}
|
||||
.mt-glow.g2{width:120px;height:120px;left:-40px;bottom:-60px;background:rgba(255,255,255,.08)}
|
||||
.mt-stars{position:absolute;left:96px;top:calc(env(safe-area-inset-top) + 12px);width:150px;height:75px;pointer-events:none}
|
||||
.me-top.me-v2 .hero-top{margin-bottom:6px;position:relative;z-index:2}
|
||||
.me-v2 .me-card{background:none;box-shadow:none;padding:0 2px;border-radius:0;gap:15px;overflow:visible}
|
||||
.me-v2 .me-avatar{width:70px;height:70px;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 8px 18px rgba(150,50,30,.28)}
|
||||
.me-v2 .av-edit{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(150,50,30,.3)}
|
||||
.me-v2 .me-name{color:#fff;font-size:23px;text-shadow:0 1px 6px rgba(150,50,30,.2)}
|
||||
.me-tag{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;
|
||||
color:#fff;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
|
||||
.me-tag.hide{display:none}
|
||||
.me-v2 .me-info p{color:rgba(255,255,255,.92);margin-top:6px;font-size:12.5px}
|
||||
.me-v2 .me-info p b{color:#FFF3B0;font-size:15px}
|
||||
.me-v2 .me-chev{color:rgba(255,255,255,.8)}
|
||||
|
||||
/* 兜豆兑换商城主卡：半压在头部底边上 */
|
||||
#screen-me .page-body.no-top{margin-top:-40px}
|
||||
.bean-card{position:relative;overflow:hidden;width:100%;display:flex;align-items:center;gap:12px;text-align:left;
|
||||
padding:16px 16px 16px 12px;border-radius:24px;color:#6B3E12;
|
||||
background:
|
||||
radial-gradient(140px 100px at 100% 0%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),
|
||||
linear-gradient(118deg,#FFF7E2 0%,#FFE7B0 55%,#FFD27E 100%);
|
||||
box-shadow:0 14px 30px rgba(196,120,40,.24),inset 0 0 0 1px rgba(255,255,255,.7);transition:transform .18s var(--ease)}
|
||||
.bean-card:active{transform:scale(.985)}
|
||||
.bc-pattern{position:absolute;inset:0;pointer-events:none;opacity:.5;
|
||||
background-image:radial-gradient(circle at 1px 1px, rgba(214,150,60,.35) 1px, transparent 1.4px);background-size:12px 12px;
|
||||
-webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 100%);mask-image:linear-gradient(100deg,transparent 35%,#000 100%)}
|
||||
.bc-coin{flex:0 0 64px;position:relative;filter:drop-shadow(0 4px 6px rgba(200,120,20,.25))}
|
||||
.bc-coin svg{display:block}
|
||||
.bc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;position:relative}
|
||||
.bc-kick{font-size:11.5px;font-weight:800;color:#B8641A;letter-spacing:.5px}
|
||||
.bc-title{font-size:19px;font-weight:900;letter-spacing:-.3px;color:#5A300C}
|
||||
.bc-sub{font-size:12px;color:#8C6034}
|
||||
.bc-beans{margin-top:3px;font-size:12px;color:#8C6034}
|
||||
.bc-beans b{font-size:15px;color:#D2691E;font-weight:900}
|
||||
.bc-beans.hide{display:none}
|
||||
.bc-cta{flex:0 0 auto;position:relative;display:flex;align-items:center;gap:2px;padding:9px 13px;border-radius:99px;
|
||||
font-size:13.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#F7845E,#E85A3C);
|
||||
box-shadow:0 6px 14px rgba(232,90,60,.35)}
|
||||
.bc-cta i,.ms-go i,.es-go i{font-style:normal;font-size:16px;line-height:1;margin-left:1px}
|
||||
|
||||
/* 孕期信息卡：白底 + 珊瑚进度 */
|
||||
#screen-me .preg-card{color:var(--ink);
|
||||
background:radial-gradient(200px 120px at 100% 0%, #FFEDE4, rgba(255,237,228,0) 70%),#fff;
|
||||
box-shadow:var(--sh)}
|
||||
#screen-me .pc-ico{background:#FFF0EA}
|
||||
#screen-me .pc-title{color:var(--ink)}
|
||||
#screen-me .pc-sub{color:var(--ink-2)}
|
||||
#screen-me .preg-card .chev{color:#C9BFB8}
|
||||
#screen-me .preg-card .rp{background:rgba(244,89,60,.1)}
|
||||
#screen-me .pc-bar{background:#FBE7DE}
|
||||
#screen-me .pc-bar i{background:linear-gradient(90deg,#FFB08F,#F4593C)}
|
||||
#screen-me .pc-stage{color:#A0928A}
|
||||
#screen-me .pc-stage .cur{color:#fff;background:linear-gradient(135deg,#F7845E,#E85A3C)}
|
||||
|
||||
/* 心选商城横幅 */
|
||||
.mall-strip{width:100%;display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border-radius:20px;text-align:left;
|
||||
background:#fff;box-shadow:var(--sh)}
|
||||
.ms-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;color:#E8603F;
|
||||
background:linear-gradient(140deg,#FFEDE5,#FFD9CA)}
|
||||
.ms-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
|
||||
.ms-main b{font-size:15.5px;font-weight:800;color:var(--ink)}
|
||||
.ms-main span{font-size:12px;color:var(--ink-2)}
|
||||
.ms-go{display:flex;align-items:center;font-size:13px;font-weight:700;color:var(--brand)}
|
||||
|
||||
/* 常用服务四宫格 */
|
||||
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:16px 6px;border-radius:22px;background:#fff;box-shadow:var(--sh)}
|
||||
.svc{position:relative;overflow:visible!important;display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0}
|
||||
.svc.hide{display:none}
|
||||
.sv-ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center}
|
||||
.sv-ico.o{background:#FFEFE6;color:#E8703F}
|
||||
.sv-ico.p{background:#F1EBFB;color:#7B5FD4}
|
||||
.sv-ico.b{background:#E7F0FA;color:#4478BC}
|
||||
.sv-t{font-size:12.5px;font-weight:700;color:var(--ink)}
|
||||
.sv-badge{position:absolute;top:-6px;left:50%;margin-left:10px;padding:1px 6px;white-space:nowrap;border-radius:99px;font-size:10px;font-weight:800;
|
||||
color:#fff;background:var(--brand);box-shadow:0 0 0 2px #fff}
|
||||
.sv-badge:empty{display:none}
|
||||
.me-logout{display:block;width:100%;margin-top:14px;padding:14px;border-radius:18px;background:#fff;
|
||||
font-size:14.5px;font-weight:700;color:#C33A2E;text-align:center;box-shadow:var(--sh)}
|
||||
.me-ver{text-align:center;font-size:11.5px;color:#B5A9A1;margin:18px 0 6px}
|
||||
|
||||
/* 首页 · 兜豆兑换商城入口条（婴儿房下面） */
|
||||
.exch-strip{width:100%;display:flex;align-items:center;gap:11px;margin-top:12px;padding:12px 14px;border-radius:20px;text-align:left;
|
||||
background:radial-gradient(120px 80px at 100% 0%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),linear-gradient(118deg,#FFF7E2,#FFE3A6 70%,#FFD48A);
|
||||
box-shadow:0 10px 22px rgba(196,120,40,.18),inset 0 0 0 1px rgba(255,255,255,.7)}
|
||||
.es-coin{flex:0 0 auto;filter:drop-shadow(0 3px 4px rgba(200,120,20,.25))}
|
||||
.es-coin svg{display:block}
|
||||
.es-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
|
||||
.es-main b{font-size:15px;font-weight:900;color:#5A300C}
|
||||
.es-main span{font-size:12px;color:#8C6034;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.es-go{flex:0 0 auto;display:flex;align-items:center;padding:7px 12px;border-radius:99px;font-size:13px;font-weight:800;color:#fff;
|
||||
background:linear-gradient(135deg,#F7845E,#E85A3C);box-shadow:0 5px 12px rgba(232,90,60,.3)}
|
||||
|
||||
Reference in New Issue
Block a user