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

首页孕妈广场第五版「广场地面」：话题气泡之字形错落、头像站在气泡下、虚线小路串起、可横滑；v26110125

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-11-01 23:06:10 +00:00
parent e961048616
commit 175d15240a
3 changed files with 89 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
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:26110124 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26110125 缓存版本标记：改 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） -->
@@ -530,7 +530,7 @@
<button type="button" class="gch-more" id="gchMore">去逛逛<i aria-hidden="true">›</i></button>
</div>
<div class="gch-who"><span class="gch-avs" id="gchAvs" aria-hidden="true"></span><span id="gchCnt"></span></div>
<div class="gch-row" id="gchRow"></div>
<div class="gch-row gb" id="gchRow"></div>
<style>
#homeBody>section.gc-home{--gt:255,120,150}
.gc-home{margin:16px -26px 0;padding:16px 26px 16px;border-radius:26px;position:relative;z-index:0;background-color:#fff}
@@ -580,6 +580,43 @@
.gch-card.all .ga{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#E2553A;font-size:22px;font-weight:700;box-shadow:0 4px 10px rgba(226,85,58,.15)}
.gch-card.all b{font-size:13.5px;font-weight:800;color:#8A5A4C}
.gch-card.all small{font-size:11px;color:#B39184}
/* —— 11-01 第五版「广场地面」 —— */
.gch-row.gb{display:block;height:250px;margin:10px -26px 0;padding:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
.gch-row.gb::after{display:none}
.gb-map{position:relative;height:250px;min-width:100%;width:max-content;display:flex;align-items:flex-start;gap:8px;padding:8px 26px 0;box-sizing:border-box;
background:radial-gradient(circle at 50% 50%,rgba(255,206,190,.22) 0 2px,transparent 2.5px) 0 0/22px 22px,linear-gradient(180deg,#FFF8F4 0%,#FFF1EA 100%)}
.gb-path{position:absolute;left:0;top:0;pointer-events:none}
.gb-path path{fill:none;stroke:#F6C9B8;stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round}
.gb-w{position:absolute;width:18px;height:18px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 2px 6px rgba(200,120,100,.25);opacity:.85;animation:gbWalk 6s ease-in-out infinite alternate}
.gb-w:nth-of-type(2n){animation-duration:7.5s;animation-direction:alternate-reverse}
@keyframes gbWalk{from{transform:translateX(-6px)}to{transform:translateX(8px)}}
.gb-col{position:relative;z-index:1;flex:none;width:128px;display:flex;flex-direction:column}
.gb-col.lo{padding-top:78px}
.gb-b{position:relative;display:block;width:128px;padding:0 0 26px;border:0;background:none;font:inherit;text-align:left;animation:gbBob 4.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes gbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.gb-b:active .gb-in{transform:scale(.96)}
.gb-in{position:relative;display:flex;flex-direction:column;gap:5px;padding:10px 11px 10px;border-radius:20px 20px 20px 6px;background:#fff;color:var(--ink);
box-shadow:0 10px 20px -12px var(--ink),0 0 0 1.5px var(--c2) inset;transition:transform .15s}
/* 气泡尾巴：左下角一个小三角，指向下面的头像 */
.gb-in::after{content:"";position:absolute;left:12px;bottom:-5px;width:10px;height:10px;background:inherit;background:#fff;transform:rotate(45deg);border-radius:0 0 3px 0;box-shadow:1.5px 1.5px 0 0 var(--c2)}
.gb-b:nth-child(odd) .gb-in{background:linear-gradient(150deg,#fff 40%,var(--c1))}
.gb-a{position:absolute;left:5px;bottom:-2px;width:24px;height:24px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.12);background:#FFE3D3}
.gb-ph{display:block;width:calc(100% + 22px);height:60px;margin:-10px -11px 2px;border-radius:20px 20px 0 0;object-fit:cover}
.gb-k{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:800;letter-spacing:.5px;opacity:.85}
.gb-k em{font-style:normal;height:15px;padding:0 5px;border-radius:5px;background:linear-gradient(135deg,#FF7A45,#F4433C);color:#fff;font-size:9.5px;line-height:15px}
.gb-n{font-size:13.5px;font-weight:900;line-height:1.38;color:#2F2424;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gb-b.ph .gb-n{-webkit-line-clamp:2}
.gb-m{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;opacity:.8;white-space:nowrap}
.gb-m i{width:6px;height:6px;border-radius:50%;background:#2DBE6C;box-shadow:0 0 0 0 rgba(45,190,108,.5);animation:gbLive 1.8s ease-out infinite}
@keyframes gbLive{to{box-shadow:0 0 0 6px rgba(45,190,108,0)}}
.gb-end{justify-content:center;align-self:stretch;padding-right:26px}
.gb-all{width:112px;height:112px;margin:0 auto;border-radius:50%;border:1.5px dashed #F2B9A6;background:radial-gradient(circle at 35% 30%,#fff,#FFE9E0);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;color:#B9654E;box-shadow:0 10px 22px -14px #E2553A}
.gb-all b{font-size:26px;font-weight:900;line-height:1;color:#E2553A;font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif}
.gb-all span{font-size:11px;line-height:1.35;text-align:center}
.gb-all i{margin-top:3px;font-style:normal;font-size:11.5px;font-weight:800;color:#E2553A}
@media (prefers-reduced-motion:reduce){.gb-b,.gb-w,.gb-m i{animation:none}}
html.night .gb-map{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.06) 0 2px,transparent 2.5px) 0 0/22px 22px,transparent}
html.night .gb-path path{stroke:rgba(255,255,255,.18)}
html.night .gch-title{color:#F1E6EE}
html.night .gch-cat{background:rgba(255,255,255,.08)}
</style>
@@ -2432,7 +2469,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=26110124"></script>
<script src="guangchang/topics.js?v=26110125"></script>
<script src="js/app.js"></script>
<!-- 2026-10-03 首页彩蛋：宝宝在肚皮底下动（独立文件，删掉这一行即整体下线；开关在「隐私权限」） -->
<script src="js/bump.js"></script>
@@ -2441,7 +2478,7 @@
<!-- 2026-10-05 首页头图：宝宝时不时动一动小手小脚（独立文件，删掉这一行即下线） -->
<script src="js/baby-limbs.js?v=26101201"></script>
<script src="js/coach.js?v=26101211"></script>
<script src="js/birth-flow.js?v=26110124"></script>
<script src="js/birth-flow.js?v=26110125"></script>
<!-- 禁止下拉回弹（2026-10-11 统一规则，与孕期体重同一段）：竖向拖动时从手指下往上找还能朝该方向滚的容器，找不到才拦；横滑、双指、可滚列表不受影响 -->
<script>