孕期小知识:首页只留标题+一行摘要+四个入口,全文挪到详情页 #detailTips
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
40
mama-box.css
40
mama-box.css
@@ -2708,6 +2708,46 @@ a.skip:focus{left:16px;top:16px}
|
||||
.pt-card p{font-size:13px;line-height:1.6;margin-top:6px}
|
||||
.pt-foot{font-size:11.5px}
|
||||
|
||||
/* 孕期小知识 · 首页只放核心(2026-10-01 用户反馈「文字太多」):
|
||||
首页 = 一张小卡(今天这条的标题 + 一行摘要 + 看详情)+ 一排四个入口;正文 / 7 天 / 四张卡全文都在详情页 #detailTips。 */
|
||||
.pt-mini{position:relative;overflow:hidden;border-radius:20px;padding:14px 16px 12px;cursor:pointer;
|
||||
background:linear-gradient(135deg,#FFE9E1 0%,#FFF1E6 55%,#FFF7EE 100%);transition:transform .16s}
|
||||
.pt-mini:active{transform:scale(.98)}
|
||||
.pt-mini::after{content:"";position:absolute;right:-30px;top:-40px;width:130px;height:130px;border-radius:50%;
|
||||
background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,0) 70%);pointer-events:none}
|
||||
.pt-mini .pt-float{top:12px;font-size:30px}
|
||||
.pt-mini-t{font-size:17px;font-weight:800;color:#5A2E22;letter-spacing:-.2px;padding-right:44px}
|
||||
.pt-mini-d{margin-top:4px;padding-right:30px;font-size:14px;color:var(--ink-2);
|
||||
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.pt-mini-go{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--brand)}
|
||||
.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:4px;padding:10px 2px 9px;border:0;border-radius:14px;
|
||||
font:inherit;font-size:12.5px;font-weight:700;color:var(--ink);min-width:0;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}
|
||||
.preg-tips .pt-foot{display:none}
|
||||
|
||||
/* 详情页:今天这条放大;四张卡竖排、全文不截断 */
|
||||
.pt-page{padding:16px 16px 40px}
|
||||
.pt-page .pt-today{padding:16px 18px 12px}
|
||||
.pt-page .pt-float{font-size:34px;top:12px}
|
||||
.pt-page .pt-t{margin-top:8px;font-size:18px}
|
||||
.pt-page .pt-d{margin-top:6px;font-size:15px;line-height:1.8}
|
||||
.pt-page .pt-days{margin-top:12px;padding-top:10px}
|
||||
.pt-page .pt-day i{width:28px;height:28px;line-height:28px;font-size:12.5px}
|
||||
.pt-sub{margin:20px 2px 10px;font-size:15.5px;font-weight:800}
|
||||
.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):下周预告 / 待解锁任务 / 集齐奖励 / 宝宝周记 ============ */
|
||||
/* 下周预告:卡片剪影(同一张插画压成纯色)+ 倒计时 */
|
||||
.bx-next{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:20px;background:#fff;box-shadow:var(--sh)}
|
||||
|
||||
Reference in New Issue
Block a user