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

首页孕妈广场模块五版效果稿：index.html 加 ?gcv=N 演示开关 + demo/gch 汇总与 v1~v5

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-11-02 00:46:38 +00:00
parent 228b06170f
commit 68fa31eea9
18 changed files with 1074 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
demo/gch/v5.css Normal file
View File

@@ -0,0 +1,79 @@
/* 首页「孕妈广场」效果稿 V5 · 今日一问 + 话题横滑 */
#gcHome.gv5{margin:16px -26px 0;padding:18px 26px 16px;border-radius:26px;position:relative;z-index:0;background-color:#fff}
#gcHome.gv5 button{font:inherit;-webkit-tap-highlight-color:transparent}
#gcHome.gv5 .g5-head{display:flex;align-items:center;gap:8px}
#gcHome.gv5 .g5-title{margin:0;font-size:21px;font-weight:900;letter-spacing:.5px;color:#2A1E1E}
#gcHome.gv5 .g5-title span{background:linear-gradient(transparent 58%,#FFD0DC 58%,#FFD0DC 92%,transparent 92%);padding:0 3px}
#gcHome.gv5 .g5-tag{font-size:11px;color:#C4B5B1;font-weight:500;align-self:flex-end;margin-bottom:3px}
#gcHome.gv5 .g5-more{margin-left:auto;display:inline-flex;align-items:center;gap:2px;height:26px;padding:0 4px 0 6px;border:0;background:none;font-size:13px;font-weight:700;color:#E0566F}
#gcHome.gv5 .g5-more i{font-style:normal;font-size:16px;line-height:1;margin-top:-1px}
/* 今日一问卡 */
#gcHome.gv5 .q5{position:relative;margin-top:12px;padding:14px 14px 12px;border-radius:20px;overflow:hidden;
background:radial-gradient(120px 90px at 100% 0,rgba(255,196,170,.45),transparent 70%),linear-gradient(150deg,#FFF6F1 0%,#FFEDF1 100%);
box-shadow:inset 0 0 0 1px rgba(242,98,126,.10),0 10px 22px -16px rgba(226,90,80,.45)}
#gcHome.gv5 .q5::before{content:"\201C";position:absolute;right:10px;top:-14px;font-size:96px;font-weight:900;line-height:1;color:#FFD0DC;opacity:.7;font-family:Georgia,serif;pointer-events:none}
#gcHome.gv5 .q5-top{position:relative;display:flex;align-items:center;gap:8px}
#gcHome.gv5 .q5-k{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:99px;background:linear-gradient(120deg,#FF8A5B,#F4593C);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.3px}
#gcHome.gv5 .q5-k i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.9}
#gcHome.gv5 .q5-d{font-size:11px;color:#B08F88;font-weight:600}
#gcHome.gv5 .q5-q{position:relative;margin:10px 0 12px;font-size:17px;font-weight:900;line-height:1.4;color:#2F2424;letter-spacing:.2px}
#gcHome.gv5 .q5-act{position:relative;min-height:44px}
#gcHome.gv5 .q5-btns{display:flex;gap:10px}
#gcHome.gv5 .q5-v{flex:1;min-width:0;height:40px;padding:0 8px;border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;font-weight:800;white-space:nowrap;transition:transform .15s}
#gcHome.gv5 .q5-v.a{border:0;background:linear-gradient(135deg,#FF8A9E,#F2627E);color:#fff;box-shadow:0 8px 14px -10px #F2627E}
#gcHome.gv5 .q5-v.b{border:1.5px solid #FFC2A8;background:#fff;color:#E2553A}
#gcHome.gv5 .q5-v:active{transform:scale(.96)}
#gcHome.gv5 .q5-lab{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:700;color:#9A7F78}
#gcHome.gv5 .q5-lab span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
#gcHome.gv5 .q5-lab b{font-size:14px;font-weight:900;font-variant-numeric:tabular-nums}
#gcHome.gv5 .q5-lab .la b{color:#F2627E}
#gcHome.gv5 .q5-lab .lb b{color:#F4893C}
#gcHome.gv5 .q5-res.pa .la,#gcHome.gv5 .q5-res.pb .lb{color:#3A2A2A}
#gcHome.gv5 .q5-lab i{font-style:normal;width:15px;height:15px;border-radius:50%;display:inline-grid;place-items:center;font-size:10px;background:#F2627E;color:#fff}
#gcHome.gv5 .q5-res.pb .q5-lab i{background:#F4893C}
#gcHome.gv5 .q5-bar{display:flex;gap:3px;height:9px;margin-top:6px;border-radius:99px;overflow:hidden}
#gcHome.gv5 .q5-bar .ba{flex:none;width:var(--w);background:linear-gradient(90deg,#FF9AAD,#F2627E);border-radius:99px 0 0 99px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
#gcHome.gv5 .q5-bar .bb{flex:1;background:linear-gradient(90deg,#FFB27A,#F4893C);border-radius:0 99px 99px 0}
#gcHome.gv5 .q5-res.in .ba{width:50%}
#gcHome.gv5 .q5-see{display:inline-flex;align-items:center;gap:2px;margin-top:8px;padding:0;border:0;background:none;font-size:12.5px;font-weight:800;color:#E0566F}
#gcHome.gv5 .q5-see i{font-style:normal;font-size:15px;line-height:1}
#gcHome.gv5 .q5-who{position:relative;display:flex;align-items:center;gap:7px;margin-top:10px;padding-top:10px;border-top:1px dashed rgba(226,140,130,.28);font-size:12px;color:#9A7F78}
#gcHome.gv5 .q5-who b{color:#D9466A;font-weight:800;font-variant-numeric:tabular-nums}
#gcHome.gv5 .q5-avs{display:flex}
#gcHome.gv5 .q5-avs img{width:22px;height:22px;border-radius:50%;object-fit:cover;border:2px solid #FFF3F2;margin-left:-7px;background:#FFE3D3}
#gcHome.gv5 .q5-avs img:first-child{margin-left:0}
/* 分类 */
#gcHome.gv5 .g5-cat{display:flex;gap:6px;margin:14px 0 0}
#gcHome.gv5 .g5-cat button{flex:none;height:28px;padding:0 13px;border:0;border-radius:99px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;font-weight:700;color:#9A7F78;background:#F8F1EE;white-space:nowrap;transition:background .2s,color .2s}
#gcHome.gv5 .g5-cat button.on{background:#2F2424;color:#fff}
/* 横滑小方卡 */
#gcHome.gv5 .g5-row{display:flex;gap:10px;margin:10px -26px 0;padding:2px 26px 6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding:0 26px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
#gcHome.gv5 .g5-row::-webkit-scrollbar{display:none}
#gcHome.gv5 .g5-row::after{content:"";flex:none;width:16px}
#gcHome.gv5 .g5-c{flex:none;width:112px;padding:0;border:0;background:none;text-align:left;display:flex;flex-direction:column;scroll-snap-align:start;transition:transform .15s}
#gcHome.gv5 .g5-c:active{transform:scale(.97)}
#gcHome.gv5 .g5-p{position:relative;display:block;width:112px;height:112px;border-radius:16px;overflow:hidden;background:var(--c1,#F3E7E2);box-shadow:0 6px 14px -10px rgba(80,40,40,.5)}
#gcHome.gv5 .g5-p img{width:100%;height:100%;object-fit:cover;display:block}
#gcHome.gv5 .g5-p em{position:absolute;left:6px;top:6px;height:18px;padding:0 6px;border-radius:6px;background:rgba(255,255,255,.9);color:var(--ink);font-size:10.5px;font-style:normal;font-weight:800;line-height:18px}
#gcHome.gv5 .g5-p em.h{left:auto;right:6px;background:linear-gradient(135deg,#FF7A45,#F4433C);color:#fff}
#gcHome.gv5 .g5-n{margin-top:7px;font-size:13px;font-weight:800;line-height:1.38;color:#2F2424;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:36px}
#gcHome.gv5 .g5-m{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:11px;font-weight:600;color:#A8908A;white-space:nowrap}
#gcHome.gv5 .g5-m i{width:6px;height:6px;border-radius:50%;background:#43C08A;box-shadow:0 0 0 2px rgba(67,192,138,.18)}
#gcHome.gv5 .g5-sub{height:112px;align-items:center;justify-content:center;gap:2px;text-align:center;border-radius:16px;background:linear-gradient(150deg,#FFF1E6,#FFE2E8);box-shadow:inset 0 0 0 1.5px rgba(244,89,60,.18)}
#gcHome.gv5 .g5-s1{font-size:14px;font-weight:900;color:#2F2424}
#gcHome.gv5 .g5-s2{font-size:11px;color:#B08F88;font-weight:600;margin-top:2px}
#gcHome.gv5 .g5-s3{display:flex;align-items:baseline;gap:2px;color:#F4593C;font-weight:900}
#gcHome.gv5 .g5-s3 b{font-size:18px}
#gcHome.gv5 .g5-s3 span{font-size:11px}
#gcHome.gv5 .g5-s4{margin-top:4px;height:22px;padding:0 10px;border-radius:99px;background:linear-gradient(120deg,#FF8A5B,#F4593C);color:#fff;font-size:11px;font-weight:800;line-height:22px}
@media (prefers-reduced-motion:reduce){
#gcHome.gv5 *{transition:none!important;animation:none!important}
}