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

孕期小知识：首页四张卡去掉文字，改成图标+标题四个入口；点进详情页 #detailTips 看四张卡全文（滚到对应卡并高亮）(v26100131)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-01 13:09:56 +00:00
parent 19e0167df0
commit b3b768722a
3 changed files with 67 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
mama-box.css
View File

@@ -2750,11 +2750,26 @@ a.skip:focus{left:16px;top:16px}
.pt-card b{font-size:14px}
.pt-card p{font-size:13px;line-height:1.6;margin-top:6px}
.pt-foot{font-size:11.5px}
/* 四张小卡精简（2026-10-01）：收起时只一句重点（最多 2 行），标题右侧小箭头提示可点；展开后箭头朝下、显示全文 */
.pt-card{cursor:pointer;align-content:start}
.pt-card p{-webkit-line-clamp:2}
.pt-card b::after{content:"›";margin-left:4px;font-weight:700;opacity:.45;display:inline-block;transition:transform .2s}
.pt-card.is-open b::after{transform:rotate(90deg)}
/* 首页四个入口（2026-10-01 用户要求：首页不放卡片文字，点进详情页）：图标 + 标题，一行四个 */
.pt-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.pt-chip{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 2px 10px;border:0;border-radius:14px;
font:inherit;font-size:12.5px;font-weight:700;min-width:0;cursor:pointer;transition:transform .16s}
.pt-chip:active{transform:scale(.95)}
.pt-chip i{font-style:normal;font-size:20px;line-height:1}
.pt-chip span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-chip.pc-baby span{color:#C4583C}.pt-chip.pc-mom span{color:#B3547E}.pt-chip.pc-eat span{color:#4F7F3E}.pt-chip.pc-care span{color:#4A6FA6}
/* 详情页 #detailTips：四张卡竖排、全文不截断 */
.pt-page{padding:16px 16px 40px}
.pt-page .pt-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:0;padding:0;overflow:visible;scroll-snap-type:none}
.pt-page .pt-card{display:block;padding:14px 16px 15px;border-radius:18px;transform:translateY(10px)}
.pt-page .pt-grid.is-shown .pt-card{transform:none}
.pt-page .pt-card b{display:inline-block;margin-left:8px;font-size:15px;vertical-align:middle}
.pt-page .pt-ico{width:30px;height:30px;font-size:17px;vertical-align:middle}
.pt-page .pt-card p{margin-top:8px;font-size:14.5px;line-height:1.75;display:block;-webkit-line-clamp:unset}
.pt-page .pt-foot{margin-top:16px;text-align:center}
.pt-card.is-hit{animation:ptHit 1.2s ease}
@keyframes ptHit{0%,100%{box-shadow:0 0 0 0 rgba(244,89,60,0)}30%{box-shadow:0 0 0 3px rgba(244,89,60,.35)}}
/* ============ 孕期盲盒 · 价值感改造（2026-10-01）：下周预告 / 待解锁任务 / 集齐奖励 / 宝宝周记 ============ */
/* 下周预告：卡片剪影（同一张插画压成纯色）+ 倒计时 */