Files
mama-box/mock/story/index.html
2026-11-01 05:46:34 +00:00

855 lines
69 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>孕妈故事 · 设计稿</title>
<!-- 设计稿(2026-11-01):「孕妈故事」新模块。纯静态、假数据、不接后端,不影响首页真实代码。
切屏:顶部分段 或 地址 #home / #square / #detail / #write / #rules -->
<style>
:root{
--brand:#F4593C;--brand-lt:#FF7C5C;--brand-dk:#E04A2E;
--bg:#F8F3EF;--card:#fff;--ink:#2B2320;--ink-2:#6B615B;--muted:#9A8380;--line:#EFE7E1;
--peach:#FFEDE6;--peach-2:#FFF4EE;--purple:#8B6FE0;
--r-lg:24px;--r-md:18px;--r-sm:12px;
--sh:0 8px 24px rgba(188,120,96,.10);
--btn:linear-gradient(135deg,#F77B55,#EE5A3E);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:#EDE5DF;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
color:var(--ink);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
.ic{width:16px;height:16px;flex:none;display:inline-block;vertical-align:middle}
.phone{position:relative;max-width:390px;min-height:100vh;margin:0 auto;background:var(--bg);overflow:hidden}
/* ---------- 分段切换 ---------- */
.seg-wrap{position:sticky;top:0;z-index:50;padding:10px 12px 10px;background:rgba(248,243,239,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(220,200,190,.45)}
.seg-cap{display:flex;align-items:center;justify-content:space-between;margin:0 2px 8px;font-size:11px;color:var(--muted);letter-spacing:.5px}
.seg-cap b{color:var(--ink);font-size:12.5px;letter-spacing:1px}
.seg{display:flex;gap:2px;padding:3px;border-radius:99px;background:#EFE4DD}
.seg button{flex:auto;height:30px;padding:0 8px;border-radius:99px;font-size:12.5px;font-weight:700;color:#8A746E;white-space:nowrap}
.seg button.on{background:#fff;color:var(--brand-dk);box-shadow:0 2px 8px rgba(190,120,96,.18)}
.screen{display:none;padding-bottom:28px}
.screen.on{display:block}
/* 设计标注 */
.note{display:flex;align-items:center;gap:6px;margin:14px 16px 8px;font-size:11px;color:#B39A93;letter-spacing:.3px}
.note::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:1.5px dashed #D6BDB4}
.note em{font-style:normal;padding:1px 7px;border-radius:99px;background:#F3E7E1;color:#A07C70;font-weight:700}
/* ---------- 通用组件 ---------- */
.av{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none;background:#FFE3D3;display:block}
.av-anon{display:grid;place-items:center;background:linear-gradient(145deg,#E9E1F5,#D8CDEB);color:#8D7AB5}
.av-anon svg{width:62%;height:62%}
.badge-jx{display:inline-flex;align-items:center;gap:2px;height:18px;padding:0 6px;border-radius:6px;background:linear-gradient(135deg,#FFB547,#F77B3A);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.5px}
.badge-jx svg{width:10px;height:10px}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:99px;background:var(--peach);color:#D9583C;font-size:11px;font-weight:700;white-space:nowrap}
.tag.t-g{background:#EAF3E3;color:#5D8B47}.tag.t-p{background:#F0EAFB;color:#7A5FCB}.tag.t-b{background:#E8F0FA;color:#4E7CB7}.tag.t-y{background:#FFF3D6;color:#B9831C}
.meta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.meta span{display:inline-flex;align-items:center;gap:3px}
.meta .ic{width:14px;height:14px}
.btn-main{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 20px;border-radius:99px;background:var(--btn);color:#fff;font-weight:800;font-size:14.5px;box-shadow:0 6px 14px rgba(238,90,62,.25);white-space:nowrap}
.btn-main .ic{width:15px;height:15px}
.nav{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px}
.nav h1{flex:1;margin:0;font-size:17px;font-weight:800;text-align:center}
.nav .nb{width:auto;min-width:60px;white-space:nowrap;display:flex;align-items:center;gap:3px;font-size:13px;color:var(--ink-2)}
.nav .nb.r{justify-content:flex-end}
.nav .nb .ic{width:20px;height:20px}
.card{background:#fff;border-radius:var(--r-md);box-shadow:var(--sh)}
.glass{position:relative;border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.9);box-shadow:0 10px 30px rgba(196,120,96,.12);
background:radial-gradient(260px 170px at 100% 0,rgba(255,190,205,.30),rgba(255,190,205,0) 72%),
radial-gradient(280px 200px at 0 100%,rgba(255,210,170,.30),rgba(255,210,170,0) 72%),
linear-gradient(180deg,rgba(255,243,237,.96),rgba(255,248,244,.92))}
/* ================= 01 首页 ================= */
.hm-hero{height:58px;margin-bottom:-26px;background:linear-gradient(180deg,#EF7B55,#F2A184);position:relative}
.hm-hero span{position:absolute;left:16px;top:10px;font-size:11px;color:rgba(255,255,255,.85);letter-spacing:.5px}
.dock{margin:0 0 0;padding:20px 18px 14px;border-radius:24px 24px 24px 24px}
.dock-h{display:flex;align-items:center;gap:8px}
.dock-h h2{margin:0;font-size:19px;font-weight:900;letter-spacing:.5px}
.dock-h .more{margin-left:auto;height:26px;padding:0 10px;border-radius:99px;background:#fff;border:1px solid #F2E2DA;font-size:12px;font-weight:700;color:#8A6458;display:inline-flex;align-items:center}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}
.tl{display:flex;flex-direction:column;align-items:center;gap:5px}
.tl i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;box-shadow:0 6px 12px -4px rgba(200,100,80,.35)}
.tl i svg{width:24px;height:24px}
.tl b{font-size:12.5px;font-weight:700}
.tl small{height:20px;padding:0 8px;border-radius:99px;background:#F7EFEB;color:#8A6458;font-size:11px;line-height:20px;font-weight:600}
.tl-ellip{text-align:center;font-size:10.5px;color:#C2ABA4;margin-top:6px;letter-spacing:2px}
/* 压缩后的此刻:两行 */
.now{margin-top:12px;padding-top:12px;border-top:1px solid rgba(232,208,198,.7)}
.now-r1{display:flex;align-items:center;gap:7px;min-width:0}
.live{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--brand)}
.live i{position:relative;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.live i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--brand);opacity:.5}
.live::after{content:"";width:1px;height:11px;background:rgba(160,120,100,.3);margin-left:2px}
.now-t{flex:1;min-width:0;font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-t b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.avs{flex:none;display:flex}
.avs img{width:20px;height:20px;border-radius:50%;object-fit:cover;border:1.5px solid #fff;margin-left:-6px;background:#FFE3D3}
.avs img:first-child{margin-left:0}
.now-r2{display:flex;align-items:center;gap:7px;height:30px;margin-top:8px;padding:0 10px 0 5px;border-radius:99px;background:rgba(255,255,255,.75)}
.now-r2 .av{width:20px;height:20px}
.now-r2 .w{flex:none;font-size:11.5px;color:var(--muted)}
.now-r2 .d{flex:1;min-width:0;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-r2 .dots{flex:none;display:flex;gap:3px}
.now-r2 .dots i{width:4px;height:4px;border-radius:2px;background:#E9D3CB}
.now-r2 .dots i.on{width:10px;background:#F29A7F}
/* 孕妈故事卡 */
.sec{margin:14px 0 0;padding:18px 16px 16px}
.st-h{display:flex;align-items:center;gap:8px}
.st-h h2{margin:0;font-size:21px;font-weight:900;letter-spacing:.5px}
.st-h h2 span{background:linear-gradient(transparent 60%,#FFD3C2 60%,#FFD3C2 92%,transparent 92%);padding:0 3px}
.st-h .cnt{margin-left:auto;font-size:11.5px;color:var(--muted)}
.topic{display:flex;align-items:center;gap:6px;margin-top:10px;padding:7px 10px 7px 8px;border-radius:12px;background:linear-gradient(100deg,#FFE2D6,#FFEFE6 70%);color:#B4492F;font-size:12.5px}
.topic em{flex:none;font-style:normal;height:19px;padding:0 6px;border-radius:6px;background:#F4593C;color:#fff;font-size:10.5px;font-weight:800;line-height:19px;letter-spacing:.5px}
.topic strong{flex:1;min-width:0;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topic small{flex:none;font-size:11px;color:#C47D6B}
.sc{position:relative;display:block;margin-top:10px;padding:14px 14px 12px;border-radius:16px;background:#fff;box-shadow:0 4px 14px rgba(196,130,106,.09);overflow:hidden}
.sc .jx{position:absolute;left:0;top:0;border-radius:16px 0 10px 0;height:20px}
.sc-b{flex:1;min-width:0}
.sc-top{display:flex;gap:10px}
.sc-top .sc-th{width:72px;height:72px;margin-top:12px}
.sc-top h3{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sc h3{margin:10px 0 4px;font-size:15.5px;font-weight:800;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-f{display:flex;align-items:center;gap:6px;margin-top:9px}
.sc-f .who{flex:1;min-width:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-f .av{width:20px;height:20px}
.sc-th{flex:none;width:76px;height:76px;align-self:center;border-radius:12px;overflow:hidden}
.sc-th svg{display:block;width:100%;height:100%}
.wh-mini{position:relative;display:flex;align-items:center;gap:9px;width:100%;margin-top:10px;padding:8px 10px;border-radius:13px;text-align:left;color:#fff;overflow:hidden;
background:linear-gradient(100deg,#2A2550 0%,#3E2F5E 60%,#53365F 100%);box-shadow:0 6px 16px -8px rgba(52,36,92,.55)}
.wh-mini::before{content:"";position:absolute;inset:0;opacity:.8;pointer-events:none;
background:radial-gradient(1px 1px at 22% 30%,#fff,transparent),radial-gradient(1px 1px at 61% 72%,#fff,transparent),radial-gradient(1.2px 1.2px at 84% 22%,#fff,transparent),radial-gradient(1px 1px at 44% 14%,rgba(255,255,255,.7),transparent),radial-gradient(1.2px 1.2px at 93% 80%,#fff,transparent)}
.wh-mini .wi{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.12);color:#FFD9A8}
.wh-mini .wi svg{width:16px;height:16px}
.wh-mini .wt{flex:1;min-width:0;display:flex;flex-direction:column}
.wh-mini .wt b{font-size:10.5px;font-weight:600;letter-spacing:1px;color:rgba(255,255,255,.6)}
.wh-mini .wt span{font-size:12.5px;font-weight:600;color:#FFF4E8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh-mini .wg{flex:none;font-size:11.5px;color:rgba(255,255,255,.72)}
.st-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.link{display:inline-flex;align-items:center;gap:2px;font-size:13.5px;font-weight:700;color:#8A6458}
/* 其他妈妈也在搜(示意) */
.ms{margin-top:14px;padding:18px 16px 10px;opacity:.92}
.ms-h{display:flex;align-items:center;gap:8px}
.ms-h h2{margin:0;font-size:21px;font-weight:900}
.ms-h h2 span{background:linear-gradient(transparent 58%,#FFE066 58%,#FFE066 92%,transparent 92%);padding:0 3px}
.ms-live{display:inline-flex;align-items:center;gap:2px;height:20px;padding:0 7px;border-radius:99px;background:linear-gradient(135deg,#FF7A45,#F4433C);color:#fff;font-size:10.5px;font-weight:800}
.ms-live svg{width:11px;height:11px}
.ms-it{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px dashed #F1DDD6;font-size:14px}
.ms-it:last-child{border-bottom:0}
.ms-no{flex:none;width:20px;height:20px;border-radius:6px;font-size:12.5px;font-weight:900;line-height:20px;text-align:center;color:#fff}
.ms-it .hot{margin-left:auto;flex:none;font-size:10.5px;font-weight:800;color:#F4433C}
/* ================= 02 故事广场 ================= */
.banner{position:relative;margin:4px 16px 0;padding:16px 16px 14px;border-radius:20px;overflow:hidden;color:#fff;
background:radial-gradient(180px 120px at 100% 0,rgba(255,220,190,.5),transparent 70%),linear-gradient(135deg,#F2734F 0%,#F48A63 55%,#F7A781 100%);box-shadow:0 12px 24px -12px rgba(230,90,60,.6)}
.banner .bt{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:99px;background:rgba(255,255,255,.22);font-size:11px;font-weight:700;letter-spacing:.5px}
.banner h2{margin:8px 0 4px;font-size:20px;font-weight:900;letter-spacing:.5px;max-width:230px;line-height:1.35}
.banner p{margin:0;font-size:12px;opacity:.9}
.banner .row{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.banner .avs img{border-color:#F48A63;width:22px;height:22px}
.banner .go{height:32px;padding:0 16px;border-radius:99px;background:#fff;color:#E2553A;font-size:13.5px;font-weight:800;display:inline-flex;align-items:center;gap:4px;box-shadow:0 4px 10px rgba(160,60,40,.2)}
.banner .deco{position:absolute;right:10px;top:12px;width:92px;height:76px;opacity:.95}
.past{display:flex;justify-content:flex-end;margin:6px 18px 0;font-size:11.5px;color:var(--muted)}
.ctabs{display:flex;gap:16px;margin:8px 0 0;padding:0 16px;border-bottom:1px solid #EEE2DB}
.ctabs button{position:relative;height:38px;font-size:14px;font-weight:600;color:#8A746E;white-space:nowrap}
.ctabs button.on{color:var(--ink);font-weight:900;font-size:15px}
.ctabs button.on::after{content:"";position:absolute;left:50%;bottom:4px;width:18px;height:4px;margin-left:-9px;border-radius:2px;background:var(--brand)}
.sort{display:flex;align-items:center;gap:8px;padding:10px 16px 2px}
.sort .sg{display:flex;padding:2px;border-radius:99px;background:#EFE4DD}
.sort .sg button{height:26px;padding:0 12px;border-radius:99px;font-size:12.5px;font-weight:700;color:#8A746E}
.sort .sg button.on{background:#fff;color:var(--brand-dk);box-shadow:0 1px 4px rgba(190,120,96,.18)}
.sort .same{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-2)}
.sw{position:relative;width:30px;height:18px;border-radius:9px;background:#E3D6CF;flex:none}
.sw::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.sw.on{background:#F4593C}.sw.on::after{left:14px}
.feed{padding:4px 16px 0}
.fc{position:relative;margin-top:12px;padding:14px 14px 12px;border-radius:18px;background:#fff;box-shadow:var(--sh)}
.fc-a{display:flex;align-items:center;gap:8px}
.fc-a .av{width:32px;height:32px}
.fc-a .nm{display:flex;flex-direction:column;min-width:0;flex:1}
.fc-a .nm b{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-a .nm small{font-size:11.5px;color:var(--muted)}
.fc h3{margin:10px 0 4px;font-size:16px;font-weight:800;line-height:1.45}
.fc p{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fc-img{margin-top:10px;height:150px;border-radius:12px;overflow:hidden}
.fc-img svg{display:block;width:100%;height:100%}
.fc-f{display:flex;align-items:center;gap:8px;margin-top:10px}
.fc-f .meta{margin-left:auto;gap:14px}
.fc .meta .liked{color:#F0563C}
.fc-side{display:flex;gap:10px}
.fc-side .sc-th{width:88px;height:88px;margin-top:10px}
.fc-q{background:linear-gradient(135deg,#2E2754,#4A3463);color:#FFF4E8;box-shadow:0 10px 22px -12px rgba(52,36,92,.7);overflow:hidden}
.fc-q::before{content:"";position:absolute;inset:0;border-radius:18px;opacity:.7;pointer-events:none;
background:radial-gradient(1px 1px at 18% 24%,#fff,transparent),radial-gradient(1.2px 1.2px at 78% 18%,#fff,transparent),radial-gradient(1px 1px at 58% 78%,#fff,transparent),radial-gradient(1px 1px at 90% 60%,#fff,transparent)}
.fc-q .qh{display:flex;align-items:center;gap:6px;font-size:11.5px;color:rgba(255,255,255,.65)}
.fc-q .qh .tag{background:rgba(255,255,255,.14);color:#FFD9A8}
.fc-q blockquote{position:relative;margin:10px 0 0;font-size:16px;font-weight:700;line-height:1.6;letter-spacing:.3px}
.fc-q .qf{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:12px;color:rgba(255,255,255,.65)}
.fc-q .hug{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:99px;background:rgba(255,255,255,.14);color:#FFE3C2;font-weight:700}
.fab-row{position:sticky;bottom:22px;z-index:20;display:flex;justify-content:flex-end;padding:14px 16px 0;pointer-events:none}
.fab{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 20px 0 16px;border-radius:99px;background:var(--btn);color:#fff;font-size:15px;font-weight:800;box-shadow:0 10px 22px rgba(238,90,62,.38),0 0 0 4px rgba(255,255,255,.7)}
.fab .ic{width:18px;height:18px}
.end{margin:16px 0 0;text-align:center;font-size:11.5px;color:#C2ABA4}
/* ================= 03 故事详情 ================= */
.dt{padding:0 18px}
.dt-tags{display:flex;align-items:center;gap:6px;margin-top:4px}
.dt h2{margin:10px 0 0;font-size:22px;font-weight:900;line-height:1.4;letter-spacing:.3px}
.dt-a{display:flex;align-items:center;gap:10px;margin-top:14px}
.dt-a .av{width:40px;height:40px}
.dt-a .nm{flex:1;display:flex;flex-direction:column}
.dt-a .nm b{font-size:14.5px}
.dt-a .nm small{font-size:12px;color:var(--muted)}
.wk{display:inline-flex;align-items:center;height:18px;padding:0 6px;margin-left:6px;border-radius:5px;background:var(--peach);color:#D9583C;font-size:10.5px;font-weight:800;vertical-align:2px}
.anon-eg{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border-radius:12px;border:1px dashed #DCCDEB;background:#FBF8FE;font-size:12px;color:#7D6B9C}
.anon-eg .av{width:26px;height:26px}
.anon-eg b{color:#5C4A80}
.anon-eg em{margin-left:auto;font-style:normal;font-size:10.5px;color:#A898C4}
.dt-body{margin-top:16px;font-size:15.5px;line-height:1.9;color:#3A302C;letter-spacing:.2px}
.dt-body p{margin:0 0 12px}
.dt-pic{margin:4px 0 6px;height:200px;border-radius:16px;overflow:hidden}
.dt-pic svg{display:block;width:100%;height:100%}
.cap{font-size:12px;color:var(--muted);text-align:center;margin-bottom:12px}
.dt-time{font-size:12px;color:#B8A49E;margin-top:2px}
.award{display:flex;align-items:center;gap:8px;margin:14px 0 0;padding:9px 12px;border-radius:14px;background:linear-gradient(100deg,#FFF3D2,#FFF8E8);color:#9A6A12;font-size:12.5px}
.award img{width:24px;height:24px;flex:none}
.award b{color:#C27C08}
.award span{flex:1}
.award a{flex:none;font-size:12px;color:#B8860B;text-decoration:none}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.acts button{display:flex;align-items:center;justify-content:center;gap:6px;height:42px;border-radius:14px;background:#fff;box-shadow:0 3px 10px rgba(196,130,106,.10);font-size:13.5px;font-weight:700;color:var(--ink-2)}
.acts button .ic{width:19px;height:19px}
.acts button.on{background:#FFEDE8;color:#EC4D33}
.cm{margin-top:20px;padding:16px 16px 6px;border-radius:22px 22px 0 0;background:#fff}
.cm-h{display:flex;align-items:center;gap:8px}
.cm-h b{font-size:16px;font-weight:900}
.cm-h small{font-size:13px;color:var(--muted)}
.cm-h .sg{margin-left:auto;display:flex;gap:12px;font-size:12.5px;color:var(--muted)}
.cm-h .sg span.on{color:var(--ink);font-weight:800}
.ci{display:flex;gap:10px;padding:14px 0 12px;border-bottom:1px solid #F5EDE8}
.ci:last-child{border-bottom:0}
.ci .av{width:32px;height:32px}
.ci-b{flex:1;min-width:0}
.ci-n{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.ci-n b{color:#7A6A64;font-weight:700}
.hot{display:inline-flex;align-items:center;height:16px;padding:0 5px;border-radius:4px;background:#FFE7E0;color:#EC4D33;font-size:10px;font-weight:800}
.au{display:inline-flex;align-items:center;height:16px;padding:0 5px;border-radius:4px;background:#F4593C;color:#fff;font-size:10px;font-weight:800}
.ci-like{margin-left:auto;display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--muted)}
.ci-like .ic{width:14px;height:14px}
.ci-like.on{color:#EC4D33}
.ci-t{margin:4px 0 0;font-size:14.5px;line-height:1.65}
.ci-s{margin-top:4px;font-size:11.5px;color:#B8A49E}
.ci-s span{margin-left:12px;color:#8A746E;font-weight:600}
.rp{margin-top:8px;padding:8px 10px;border-radius:10px;background:#F8F3EF;font-size:13px;line-height:1.65}
.rp p{margin:0 0 4px}
.rp p:last-of-type{margin-bottom:0}
.rp b{font-weight:700;color:#7A6A64}
.rp .more{display:block;margin-top:4px;font-size:12px;font-weight:700;color:#5E7FB0}
.cbar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 14px 14px;background:rgba(255,255,255,.96);border-top:1px solid #F1E7E1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cbar .ip{flex:1;display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:99px;background:#F5EEEA;font-size:13.5px;color:#B3A19B}
.cbar .ip .ic{width:15px;height:15px}
.cbar .ib{display:flex;flex-direction:column;align-items:center;font-size:10.5px;color:var(--muted);line-height:1.2}
.cbar .ib .ic{width:21px;height:21px}
.cbar .ib.on{color:#EC4D33}
.report{display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 9px;border-radius:99px;background:#fff;border:1px solid #EFE2DC;font-size:12px;color:#8A746E}
.report .ic{width:13px;height:13px}
/* ================= 04 写故事 ================= */
.wr{padding:0 16px}
.wr-topic{display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:12px;background:linear-gradient(100deg,#FFE2D6,#FFF1EA);font-size:12.5px;color:#B4492F}
.wr-topic strong{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wr-topic .x{flex:none;color:#D08E7C}
.fg{margin-top:12px;padding:14px;border-radius:18px;background:#fff;box-shadow:0 4px 14px rgba(196,130,106,.08)}
.fg-l{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:800}
.fg-l small{font-weight:500;font-size:11.5px;color:var(--muted)}
.fg-l .r{margin-left:auto;font-weight:500;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips span{height:32px;padding:0 14px;border-radius:99px;background:#F7F1ED;font-size:13px;font-weight:600;color:#7A6663;display:inline-flex;align-items:center;gap:4px;border:1.5px solid transparent}
.chips span.on{background:#FFF0EA;color:#E2553A;border-color:#F7A68E}
.chips span .ic{width:13px;height:13px}
.inp{margin-top:10px;padding:10px 0 8px;border-bottom:1px solid #F1E7E1;font-size:16px;font-weight:700;display:flex;align-items:center}
.inp span{flex:1}
.inp i{font-style:normal;font-size:12px;font-weight:500;color:var(--muted)}
.ta{position:relative;margin-top:10px;min-height:178px;padding:12px;border-radius:12px;background:#FBF8F6;font-size:14px;line-height:1.8;color:#B9A8A2}
.ta .cur{display:inline-block;width:1.5px;height:17px;background:var(--brand);vertical-align:-3px;margin-right:2px}
.ta ul{margin:6px 0 0;padding-left:16px}
.ta .cnt{position:absolute;right:12px;bottom:8px;font-size:12px;color:#B9A8A2}
.pics{display:flex;gap:10px;margin-top:10px}
.pics .pc{position:relative;width:92px;height:92px;border-radius:14px;overflow:hidden}
.pics .pc svg{display:block;width:100%;height:100%}
.pics .pc .del{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;background:rgba(40,30,28,.55);display:grid;place-items:center;color:#fff}
.pics .pc .del svg{width:10px;height:10px}
.pics .add{width:92px;height:92px;border-radius:14px;border:1.5px dashed #E5C7BB;background:#FFF8F4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#D9785E;font-size:11.5px}
.pics .add .ic{width:24px;height:24px}
.row-sw{display:flex;align-items:center;gap:10px}
.row-sw .t{flex:1;min-width:0}
.row-sw .t b{display:block;font-size:14px;font-weight:800}
.row-sw .t small{display:block;font-size:12px;color:var(--muted);line-height:1.5;margin-top:2px}
.sw.big{width:44px;height:26px;border-radius:13px}
.sw.big::after{width:22px;height:22px}
.sw.big.on::after{left:20px}
.anon-pv{display:flex;align-items:center;gap:6px;margin-top:10px;padding:7px 10px;border-radius:10px;background:#FBF8FE;font-size:12px;color:#7D6B9C}
.anon-pv .av{width:22px;height:22px}
.ck{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid #DCC9C1;display:grid;place-items:center;background:#fff}
.ck.on{background:#F4593C;border-color:#F4593C;color:#fff}
.ck svg{width:12px;height:12px}
.ck.round{border-radius:50%}
.jx-box{margin-top:10px;padding:10px 12px;border-radius:12px;background:linear-gradient(100deg,#FFF5DA,#FFFAEE);font-size:12.5px;line-height:1.7;color:#8C6418}
.jx-box div{display:flex;align-items:center;gap:6px}
.jx-box img{width:18px;height:18px;flex:none}
.jx-box b{color:#C27C08}
.jx-box a{display:inline-block;margin-top:4px;color:#B8860B;font-weight:700;text-decoration:none}
.agree{display:flex;align-items:center;gap:8px;margin:16px 4px 0;font-size:12.5px;color:var(--ink-2)}
.agree a{color:#E2553A;text-decoration:none;font-weight:700}
.submit{display:flex;width:100%;height:48px;margin-top:14px;font-size:16px}
.sub-tip{margin-top:8px;text-align:center;font-size:11.5px;color:var(--muted)}
.after{margin-top:18px;padding:16px;border-radius:20px;background:#fff;box-shadow:var(--sh);border:1.5px solid #FBE3D9}
.after-h{display:flex;align-items:center;gap:10px}
.after-h .ck2{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#FFF0E6;color:#F08A3C}
.after-h .ck2 svg{width:22px;height:22px}
.after-h b{display:block;font-size:16px;font-weight:900}
.after-h small{display:block;font-size:12px;color:var(--muted)}
.steps{display:flex;align-items:center;gap:0;margin:14px 2px 0}
.steps .s{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:#B8A49E;flex:none;width:60px}
.steps .s i{width:20px;height:20px;border-radius:50%;background:#F1E8E3;display:grid;place-items:center;color:#fff;font-style:normal;font-size:11px;font-weight:800}
.steps .s.done i{background:#F4593C}.steps .s.cur i{background:#fff;border:2px solid #F4593C;color:#F4593C}
.steps .s.done,.steps .s.cur{color:var(--ink-2);font-weight:700}
.steps .ln{flex:1;height:2px;background:#F1E8E3;margin-top:-18px}
.steps .ln.done{background:#F4593C}
.pv{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px;border-radius:12px;background:#FBF8F6}
.pv .t{flex:1;min-width:0}
.pv .t b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv .t small{font-size:11.5px;color:var(--muted)}
.pv .st{flex:none;height:22px;padding:0 8px;border-radius:99px;background:#FFF0E0;color:#E0862E;font-size:11px;font-weight:800;line-height:22px}
.pv .sc-th{width:44px;height:44px;border-radius:8px}
/* ================= 05 投稿精选说明 ================= */
.rh{position:relative;margin:0 16px;padding:22px 18px 20px;border-radius:22px;overflow:hidden;color:#fff;
background:radial-gradient(200px 140px at 100% 0,rgba(255,230,170,.55),transparent 70%),linear-gradient(140deg,#F06A48,#F48D62 60%,#F9B489)}
.rh small{font-size:11.5px;letter-spacing:1.5px;opacity:.85}
.rh h2{margin:6px 0 6px;font-size:24px;font-weight:900;letter-spacing:1px}
.rh p{margin:0;font-size:13px;opacity:.92;max-width:220px;line-height:1.6}
.rh img{position:absolute;right:14px;bottom:14px;width:78px;height:78px;filter:drop-shadow(0 6px 10px rgba(150,70,20,.35))}
.rb{margin:14px 16px 0;padding:16px;border-radius:20px;background:#fff;box-shadow:0 4px 14px rgba(196,130,106,.08)}
.rb-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:16px;font-weight:900}
.rb-h i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff}
.rb-h i svg{width:15px;height:15px}
.rw{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed #F1E2DA}
.rw:last-child{border-bottom:0;padding-bottom:2px}
.rw .k{flex:1;min-width:0}
.rw .k b{display:block;font-size:14px;font-weight:800}
.rw .k small{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.rw .v{flex:none;display:flex;align-items:center;gap:4px;font-size:17px;font-weight:900;color:#D88A0B;font-variant-numeric:tabular-nums}
.rw .v img{width:18px;height:18px}
.rw .v small{font-size:11px;font-weight:700}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:relative;margin-top:4px}
.flow::before{content:"";position:absolute;left:12.5%;right:12.5%;top:17px;height:2px;background:repeating-linear-gradient(90deg,#F7B9A6 0 5px,transparent 5px 9px)}
.flow div{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.flow i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#FFF0EA;color:#E2553A;font-style:normal;font-size:15px;font-weight:900;border:2px solid #fff;box-shadow:0 3px 8px rgba(220,120,90,.2)}
.flow b{font-size:12.5px;font-weight:800}
.flow small{font-size:11px;color:var(--muted);line-height:1.45}
.crit{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.crit span{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:99px;background:#F7F1ED;font-size:12px;color:#7A6663;font-weight:600}
.crit span .ic{width:12px;height:12px;color:#5D9B5F}
.li{display:flex;gap:10px;padding:7px 0;font-size:13.5px;line-height:1.65;color:var(--ink-2)}
.li i{flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:#EEF4FB;color:#4E7CB7;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800}
.li b{color:var(--ink)}
.rules3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rules3 div{padding:12px 6px 10px;border-radius:14px;background:#FFF6F3;text-align:center}
.rules3 .no{position:relative;width:38px;height:38px;margin:0 auto 6px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#E2553A;box-shadow:0 3px 8px rgba(220,120,90,.15)}
.rules3 .no svg{width:20px;height:20px}
.rules3 b{display:block;font-size:13px;font-weight:800}
.rules3 small{display:block;margin-top:2px;font-size:11px;color:var(--muted);line-height:1.45}
.med{display:flex;gap:8px;margin-top:10px;padding:9px 11px;border-radius:12px;background:#F2F7EE;font-size:12px;line-height:1.6;color:#5C7A4C}
.med .ic{width:16px;height:16px;margin-top:1px}
.soon{position:relative;margin:14px 16px 0;padding:16px;border-radius:20px;border:1.5px dashed #E2CFC6;background:repeating-linear-gradient(135deg,#FBF6F3 0 10px,#F8F1ED 10px 20px)}
.soon .sh{display:flex;align-items:center;gap:8px}
.soon .sh em{font-style:normal;height:20px;padding:0 7px;border-radius:6px;background:#E9DCD5;color:#8A746E;font-size:11px;font-weight:800;line-height:20px}
.soon .sh b{font-size:15.5px;font-weight:900;color:#5C4E49}
.soon .sh span{margin-left:auto;height:22px;padding:0 9px;border-radius:99px;background:#2B2320;color:#FFE7C8;font-size:11px;font-weight:800;line-height:22px}
.soon p{margin:8px 0 0;font-size:12.5px;line-height:1.7;color:#8A7A74}
.soon .notify{display:inline-flex;align-items:center;gap:4px;margin-top:10px;height:30px;padding:0 14px;border-radius:99px;background:#fff;border:1px solid #E7D6CD;font-size:12.5px;font-weight:700;color:#7A6663}
.soon .notify .ic{width:14px;height:14px}
.r-cta{margin:18px 16px 0}
.r-cta .btn-main{width:100%;height:46px;font-size:15.5px}
</style>
</head>
<body>
<!-- 图标:手写 SVG -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<symbol id="i-heart" viewBox="0 0 24 24"><path d="M12 20.2s-7.6-4.6-7.6-10.1A4.3 4.3 0 0112 7.4a4.3 4.3 0 017.6 2.7c0 5.5-7.6 10.1-7.6 10.1z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></symbol>
<symbol id="i-heart-f" viewBox="0 0 24 24"><path d="M12 20.2s-7.6-4.6-7.6-10.1A4.3 4.3 0 0112 7.4a4.3 4.3 0 017.6 2.7c0 5.5-7.6 10.1-7.6 10.1z" fill="currentColor" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></symbol>
<symbol id="i-cmt" viewBox="0 0 24 24"><path d="M4.5 18.8V7.6A2.6 2.6 0 017.1 5h9.8a2.6 2.6 0 012.6 2.6v6.2a2.6 2.6 0 01-2.6 2.6H8.4z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/><circle cx="9" cy="10.8" r="1" fill="currentColor"/><circle cx="12" cy="10.8" r="1" fill="currentColor"/><circle cx="15" cy="10.8" r="1" fill="currentColor"/></symbol>
<symbol id="i-share" viewBox="0 0 24 24"><path d="M13.5 5.5l6 5.6-6 5.6v-3.3c-4.6 0-7.4 1.3-9 4.6.5-5.2 3.3-8.7 9-9.1z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></symbol>
<symbol id="i-star" viewBox="0 0 24 24"><path d="M12 4.2l2.3 4.8 5.2.7-3.8 3.6.9 5.2L12 16l-4.6 2.5.9-5.2-3.8-3.6 5.2-.7z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></symbol>
<symbol id="i-pen" viewBox="0 0 24 24"><path d="M5 19l1-4.2L15.6 5.2a1.9 1.9 0 012.7 0l.5.5a1.9 1.9 0 010 2.7L9.2 18z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M13.8 7l3.2 3.2" stroke="currentColor" stroke-width="2"/><path d="M13 19h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
<symbol id="i-chev" viewBox="0 0 24 24"><path d="M9.5 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
<symbol id="i-back" viewBox="0 0 24 24"><path d="M14.5 5.5L8 12l6.5 6.5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="6" fill="none" stroke="currentColor" stroke-width="2"/><path d="M15.5 15.5l4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
<symbol id="i-flag" viewBox="0 0 24 24"><path d="M6 20V4.5M6 5h10.5l-2 3.6 2 3.6H6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
<symbol id="i-more" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1.7" fill="currentColor"/><circle cx="12" cy="12" r="1.7" fill="currentColor"/><circle cx="18" cy="12" r="1.7" fill="currentColor"/></symbol>
<symbol id="i-check" viewBox="0 0 24 24"><path d="M5.5 12.5l4.2 4.2 8.8-9" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></symbol>
<symbol id="i-x" viewBox="0 0 24 24"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></symbol>
<symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
<symbol id="i-img" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="3" fill="none" stroke="currentColor" stroke-width="1.9"/><circle cx="9" cy="10" r="1.6" fill="currentColor"/><path d="M5 17l4.5-4 3 2.6 2.5-2 4 3.4" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></symbol>
<symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 7.5V12l3 2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
<symbol id="i-fire" viewBox="0 0 24 24"><path d="M12.6 2.5c.4 3-1.6 4.6-3 6.2C8 10.4 7 12 7 14.3A5 5 0 0012 19.5a5 5 0 005-5.2c0-2-1-3.6-1.9-4.6-.2 1.3-.9 2.2-1.9 2.6.6-3.4-.2-7-.6-9.8z" fill="currentColor"/></symbol>
<symbol id="i-spark" viewBox="0 0 24 24"><path d="M11 2.6l1.9 5.2 5.2 1.9-5.2 1.9L11 16.8l-1.9-5.2L3.9 9.7l5.2-1.9L11 2.6z" fill="currentColor"/><path d="M18.4 14.6l.8 2.1 2.2.8-2.2.8-.8 2.1-.8-2.1-2.2-.8 2.2-.8.8-2.1z" fill="currentColor" opacity=".6"/></symbol>
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3.5l7 2.6v5.4c0 4.4-3 7.7-7 9-4-1.3-7-4.6-7-9V6.1z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M8.8 12l2.3 2.3 4.2-4.4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
<symbol id="i-book" viewBox="0 0 24 24"><path d="M12 6.5C10.3 5.2 8 4.7 4.5 5v12.6c3.5-.3 5.8.2 7.5 1.5 1.7-1.3 4-1.8 7.5-1.5V5c-3.5-.3-5.8.2-7.5 1.5zM12 6.5v12.6" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></symbol>
<symbol id="i-msg" viewBox="0 0 24 24"><path d="M5 18.5V7.8A2.8 2.8 0 017.8 5h8.4A2.8 2.8 0 0119 7.8v5.4a2.8 2.8 0 01-2.8 2.8H9.2z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/><path d="M9 10.5h6" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></symbol>
<symbol id="i-hug" viewBox="0 0 24 24"><path d="M12 19.5s-6.5-3.9-6.5-8.6A3.7 3.7 0 0112 8.6a3.7 3.7 0 016.5 2.3c0 4.7-6.5 8.6-6.5 8.6z" fill="currentColor" opacity=".9"/><path d="M3 9.5c1.2 3 3 5 5 6M21 9.5c-1.2 3-3 5-5 6" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></symbol>
<symbol id="i-anon" viewBox="0 0 24 24"><circle cx="12" cy="9" r="3.6" fill="currentColor"/><path d="M5.2 20c.7-3.6 3.4-5.7 6.8-5.7s6.1 2.1 6.8 5.7z" fill="currentColor"/><path d="M7.5 8.2c1.4-.9 2.9-1.3 4.5-1.3s3.1.4 4.5 1.3" fill="none" stroke="#fff" stroke-width="1.4" stroke-linecap="round"/></symbol>
<symbol id="i-bell" viewBox="0 0 24 24"><path d="M6.5 16.5V11a5.5 5.5 0 0111 0v5.5l1.5 1.5H5z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/><path d="M10 20h4" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></symbol>
<symbol id="i-leaf" viewBox="0 0 24 24"><path d="M5 19c0-8 5-13 14-14-1 9-6 14-14 14zM5 19l7-7" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round" stroke-linecap="round"/></symbol>
<symbol id="i-person" viewBox="0 0 24 24"><circle cx="12" cy="8.5" r="3.5" fill="none" stroke="currentColor" stroke-width="2"/><path d="M5 20c.6-3.8 3.4-6 7-6s6.4 2.2 7 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
<symbol id="i-lock" viewBox="0 0 24 24"><rect x="5.5" y="10.5" width="13" height="9.5" rx="2.5" fill="none" stroke="currentColor" stroke-width="2"/><path d="M8.5 10.5V8a3.5 3.5 0 017 0v2.5" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
<symbol id="i-mega" viewBox="0 0 24 24"><path d="M4.5 10v4h3l7 4V6l-7 4zM18 9.5a3.5 3.5 0 010 5" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round" stroke-linecap="round"/></symbol>
</svg>
<div class="phone">
<div class="seg-wrap">
<div class="seg-cap"><b>孕妈故事 · 设计稿</b><span>静态假数据 · 2026-11-01</span></div>
<nav class="seg" id="seg">
<button data-s="home" class="on">首页</button>
<button data-s="square">故事广场</button>
<button data-s="detail">故事详情</button>
<button data-s="write">写故事</button>
<button data-s="rules">投稿精选说明</button>
</nav>
</div>
<!-- ===================================================== 01 首页 -->
<section class="screen on" id="s-home">
<div class="hm-hero"><span>首页顶部宝宝区域 · 不变</span></div>
<div class="glass dock">
<div class="dock-h"><h2>我的孕期工具</h2><span class="more">全部 ›</span></div>
<div class="tools">
<div class="tl"><i style="background:linear-gradient(145deg,#F7845E,#E3573A)"><svg viewBox="0 0 24 24"><ellipse cx="12.5" cy="15" rx="4.6" ry="5.6" fill="#fff"/><circle cx="7.2" cy="7.6" r="1.4" fill="#fff"/><circle cx="10" cy="5.6" r="1.5" fill="#fff"/><circle cx="13.4" cy="5" r="1.6" fill="#fff"/><circle cx="16.6" cy="6.2" r="1.5" fill="#fff"/></svg></i><b>数胎动</b><small>今天 22 次</small></div>
<div class="tl"><i style="background:linear-gradient(145deg,#FBC2B0,#F19C86)"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="4" fill="none" stroke="#fff" stroke-width="2"/><circle cx="12" cy="10.5" r="3.4" fill="none" stroke="#fff" stroke-width="1.8"/><path d="M12 10.5l1.6-1.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/></svg></i><b>孕期体重</b><small>58.4 kg</small></div>
<div class="tl"><i style="background:linear-gradient(145deg,#6C9550,#4B7438)"><svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14" rx="3" fill="none" stroke="#fff" stroke-width="2"/><path d="M8.5 4v4M15.5 4v4M4 10.5h16" stroke="#fff" stroke-width="2" stroke-linecap="round"/><path d="M12 18.2s-2.6-1.5-2.6-3.3a1.4 1.4 0 012.6-.7 1.4 1.4 0 012.6.7c0 1.8-2.6 3.3-2.6 3.3z" fill="#FFD27A"/></svg></i><b>孕检日历</b><small>11月9日</small></div>
<div class="tl"><i style="background:linear-gradient(145deg,#A189EA,#7656D2)"><svg viewBox="0 0 24 24"><path d="M3.5 15.5c2-6 3.4-8 4.6-8s2 3.6 3.9 3.6 2.4-3.6 3.9-3.6 2.6 2.4 4.6 8" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="19" r="1.3" fill="#FFB86B"/></svg></i><b>数宫缩</b><small>孕 20 周</small></div>
</div>
<div class="tl-ellip">工具宫格 · 数据卡 照旧(此处简化为一行)</div>
<!-- a) 压缩后的此刻 -->
<div class="now">
<div class="now-r1">
<span class="live"><i></i>此刻</span>
<span class="now-t"><b>20,637</b> 位孕 21 周妈妈和你同一周</span>
<span class="avs"><img src="../../assets/img/mom/m03.jpg" alt=""><img src="../../assets/img/mom/m07.jpg" alt=""><img src="../../assets/img/mom/m12.jpg" alt=""><img src="../../assets/img/mom/m16.jpg" alt=""><img src="../../assets/img/mom/m20.jpg" alt=""></span>
</div>
<div class="now-r2">
<img class="av" src="../../assets/img/mom/m09.jpg" alt="">
<span class="w">孕 21 周的妈妈</span>
<span class="d">数完胎动,宝宝动了 22 次</span>
<span class="dots"><i class="on"></i><i></i><i></i></span>
</div>
</div>
</div>
<div class="note"><em>a</em>此刻从 3 行动态 + 悄悄话条,压成 2 行;动态每 3 秒轮播一条</div>
<!-- b) 孕妈故事 -->
<div class="glass sec">
<div class="st-h">
<h2><span>孕妈故事</span></h2>
<span class="cnt">今天新增 312 篇</span>
</div>
<div class="topic">
<em>本周话题</em><strong>老公做过最暖的一件事</strong><small>1,286 人在讲</small>
</div>
<article class="sc">
<span class="badge-jx jx"><svg><use href="#i-spark"/></svg>精选</span>
<div class="sc-top"><div class="sc-b">
<h3>他把每张产检单都贴进了一个本子</h3>
<p>前天收拾书架,翻到一个牛皮纸本子。从建档那天的验血单,到上周的四维彩超,他全都按日期贴好,旁边还用铅笔写着“这次宝宝 1.2 斤”。</p>
</div>
<div class="sc-th"><svg viewBox="0 0 80 80"><defs><linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFE3CF"/><stop offset="1" stop-color="#F9BFA4"/></linearGradient></defs><rect width="80" height="80" fill="url(#g1)"/><rect x="20" y="16" width="40" height="50" rx="4" fill="#C98A5E"/><rect x="24" y="16" width="36" height="50" rx="3" fill="#E6B08A"/><rect x="30" y="24" width="24" height="16" rx="2" fill="#fff" opacity=".9"/><path d="M33 29h18M33 33h12" stroke="#E3A288" stroke-width="2" stroke-linecap="round"/><path d="M42 54s-5-3-5-6.3a2.6 2.6 0 015-1.2 2.6 2.6 0 015 1.2C47 51 42 54 42 54z" fill="#F4593C"/></svg></div>
</div>
<div class="sc-f">
<img class="av" src="../../assets/img/mom/m05.jpg" alt="">
<span class="who">孕 24 周 · 小橙子妈妈</span>
<span class="meta"><span><svg class="ic"><use href="#i-heart"/></svg>1,024</span><span><svg class="ic"><use href="#i-cmt"/></svg>86</span></span>
</div>
</article>
<article class="sc">
<span class="badge-jx jx"><svg><use href="#i-spark"/></svg>精选</span>
<div class="sc-b">
<h3>抽筋的夜里,他学会了闭着眼按小腿</h3>
<p>孕晚期几乎每晚都抽筋。有一次我疼醒还没出声,他已经迷迷糊糊坐起来,一只手托住我的脚掌往回扳,另一只手在小腿上慢慢揉,嘴里念叨“不疼不疼”。</p>
<div class="sc-f">
<span class="av av-anon"><svg><use href="#i-anon"/></svg></span>
<span class="who">匿名妈妈 · 孕 31 周</span>
<span class="meta"><span><svg class="ic"><use href="#i-heart"/></svg>862</span><span><svg class="ic"><use href="#i-cmt"/></svg>57</span></span>
</div>
</div>
</article>
<button class="wh-mini" type="button">
<span class="wi"><svg><use href="#i-msg"/></svg></span>
<span class="wt"><b>一句话悄悄话</b><span>今天在地铁上第一次感觉到它踢我,偷偷笑了一路</span></span>
<span class="wg">386 句 ›</span>
</button>
<div class="st-foot">
<span class="link">看更多故事<svg class="ic" style="width:15px;height:15px"><use href="#i-chev"/></svg></span>
<button class="btn-main"><svg class="ic"><use href="#i-pen"/></svg>我也来讲</button>
</div>
</div>
<div class="note"><em>b</em>悄悄话并入故事,作为「一句话」分类;入口保留星空识别</div>
<!-- c) 其他妈妈也在搜(示意) -->
<div class="glass ms">
<div class="ms-h"><h2><span>其他妈妈也在搜</span></h2><span class="ms-live"><svg><use href="#i-fire"/></svg>实时热搜</span></div>
<div class="ms-it"><span class="ms-no" style="background:#F4433C">1</span>孕 21 周大排畸要憋尿吗?<span class="hot">爆</span></div>
<div class="ms-it"><span class="ms-no" style="background:#FF7A45">2</span>晚上睡觉总是腿抽筋怎么办<span class="hot">热</span></div>
<div class="ms-it"><span class="ms-no" style="background:#FFA940">3</span>胎动一天多少次算正常</div>
</div>
<div class="note"><em>c</em>「其他妈妈也在搜」整体下移到故事模块下面,内容不变</div>
</section>
<!-- ===================================================== 02 故事广场 -->
<section class="screen" id="s-square">
<div class="nav">
<span class="nb"><svg class="ic"><use href="#i-back"/></svg></span>
<h1>孕妈故事</h1>
<span class="nb r"><svg class="ic"><use href="#i-search"/></svg></span>
</div>
<div class="banner">
<span class="bt"><svg class="ic" style="width:11px;height:11px"><use href="#i-fire"/></svg>本周话题 · 第 6 期</span>
<h2>老公做过最暖的一件事</h2>
<p>1,286 位妈妈参与 · 还剩 3 天</p>
<div class="row">
<span class="avs"><img src="../../assets/img/mom/m02.jpg" alt=""><img src="../../assets/img/mom/m08.jpg" alt=""><img src="../../assets/img/mom/m11.jpg" alt=""><img src="../../assets/img/mom/m14.jpg" alt=""><img src="../../assets/img/mom/m18.jpg" alt=""></span>
<button class="go"><svg class="ic" style="width:14px;height:14px"><use href="#i-pen"/></svg>去讲讲</button>
</div>
<svg class="deco" viewBox="0 0 92 76" aria-hidden="true"><path d="M46 70s-26-15.5-26-34A14 14 0 0146 27a14 14 0 0126 9c0 18.5-26 34-26 34z" fill="#fff" opacity=".22"/><path d="M58 44s-10-6-10-13a5.4 5.4 0 0110-3 5.4 5.4 0 0110 3c0 7-10 13-10 13z" fill="#fff" opacity=".85"/><circle cx="22" cy="14" r="2.4" fill="#fff" opacity=".8"/><circle cx="80" cy="12" r="1.8" fill="#fff" opacity=".7"/><path d="M14 40l1.2 3 3 1.2-3 1.2L14 48.4l-1.2-3-3-1.2 3-1.2z" fill="#fff" opacity=".8"/></svg>
</div>
<div class="past">往期话题:婆婆让我破防的瞬间 · 第一次胎动 ›</div>
<div class="ctabs">
<button class="on">全部</button><button>老公</button><button>婆婆家人</button><button>我自己</button><button>孕期日常</button><button>一句话</button>
</div>
<div class="sort">
<div class="sg"><button class="on">精选</button><button>最热</button><button>最新</button></div>
<span class="same">只看同孕周<span class="sw"></span></span>
</div>
<div class="feed">
<article class="fc">
<div class="fc-a">
<img class="av" src="../../assets/img/mom/m06.jpg" alt="">
<span class="nm"><b>糯米团妈妈</b><small>孕 28 周 · 2 小时前</small></span>
<span class="badge-jx"><svg><use href="#i-spark"/></svg>精选</span>
</div>
<h3>凌晨两点,婆婆端来一碗汤</h3>
<p>孕吐最厉害那阵,我什么都吃不下。那天半夜饿醒,听见厨房有动静,推门一看,婆婆正守着那只旧砂锅,说“我睡不着,给你炖了点清汤,不油”。</p>
<div class="fc-img"><svg viewBox="0 0 330 150" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="g2" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3B3458"/><stop offset="1" stop-color="#6C4B62"/></linearGradient><radialGradient id="g2l" cx=".72" cy=".2" r=".6"><stop offset="0" stop-color="#FFD9A0" stop-opacity=".7"/><stop offset="1" stop-color="#FFD9A0" stop-opacity="0"/></radialGradient></defs><rect width="330" height="150" fill="url(#g2)"/><rect width="330" height="150" fill="url(#g2l)"/><rect x="0" y="112" width="330" height="38" fill="#2A2238" opacity=".6"/><ellipse cx="165" cy="114" rx="62" ry="10" fill="#1E1828" opacity=".5"/><path d="M110 88h110c0 22-22 30-55 30s-55-8-55-30z" fill="#C9805A"/><path d="M110 88h110" stroke="#E6A47C" stroke-width="6" stroke-linecap="round"/><path d="M100 92h12M218 92h12" stroke="#A9653F" stroke-width="7" stroke-linecap="round"/><path d="M148 74c-6-8 6-12 0-22M166 72c-6-9 7-13 0-24M184 74c-6-8 6-12 0-22" fill="none" stroke="#fff" stroke-opacity=".6" stroke-width="3" stroke-linecap="round"/><circle cx="270" cy="30" r="12" fill="#FFE8B8"/><circle cx="276" cy="26" r="11" fill="#45395F"/><circle cx="40" cy="26" r="1.6" fill="#fff"/><circle cx="80" cy="44" r="1.2" fill="#fff"/><circle cx="230" cy="18" r="1.3" fill="#fff"/></svg></div>
<div class="fc-f"><span class="tag">婆婆家人</span><span class="meta"><span class="liked"><svg class="ic"><use href="#i-heart-f"/></svg>2,318</span><span><svg class="ic"><use href="#i-cmt"/></svg>186</span><span><svg class="ic"><use href="#i-share"/></svg></span></span></div>
</article>
<article class="fc">
<div class="fc-a">
<span class="av av-anon"><svg><use href="#i-anon"/></svg></span>
<span class="nm"><b>匿名妈妈</b><small>孕 19 周 · 5 小时前</small></span>
</div>
<h3>原来“我不需要你”是一句谎话</h3>
<p>我一直觉得自己很要强,怀孕也照样挤地铁上班。直到那天在站台上突然眼前发黑,蹲在柱子边给他打电话,第一句话竟然是哭着说“你能不能来接我”。</p>
<div class="fc-f"><span class="tag t-p">我自己</span><span class="meta"><span><svg class="ic"><use href="#i-heart"/></svg>734</span><span><svg class="ic"><use href="#i-cmt"/></svg>92</span><span><svg class="ic"><use href="#i-share"/></svg></span></span></div>
</article>
<article class="fc fc-q">
<div class="qh"><span class="tag">一句话</span>孕 22 周的妈妈 · 刚刚</div>
<blockquote>今天产检,医生说宝宝在比耶。我拍了下来,设成了手机壁纸。</blockquote>
<div class="qf"><span>收到 128 个抱抱</span><span class="hug"><svg class="ic" style="width:14px;height:14px"><use href="#i-hug"/></svg>抱抱</span></div>
</article>
<article class="fc">
<div class="fc-a">
<img class="av" src="../../assets/img/mom/m13.jpg" alt="">
<span class="nm"><b>栗子妈妈</b><small>孕 33 周 · 昨天</small></span>
<span class="badge-jx"><svg><use href="#i-spark"/></svg>精选</span>
</div>
<div class="fc-side">
<div style="flex:1;min-width:0">
<h3>他偷偷学会了给我编辫子</h3>
<p>肚子大了弯不下腰,头发总是乱糟糟。上周他拿着手机看了一晚上教程,第二天早上很严肃地说:坐好,我试试。</p>
</div>
<div class="sc-th"><svg viewBox="0 0 88 88"><defs><linearGradient id="g3" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFE9D9"/><stop offset="1" stop-color="#FFC9B5"/></linearGradient></defs><rect width="88" height="88" fill="url(#g3)"/><circle cx="44" cy="36" r="17" fill="#5A3A30"/><path d="M44 50c-3 6 3 9 0 15s3 9 0 14" fill="none" stroke="#5A3A30" stroke-width="7" stroke-linecap="round"/><path d="M41 54l6 3M41 62l6 3M41 70l6 3" stroke="#7E564A" stroke-width="2" stroke-linecap="round"/><circle cx="44" cy="80" r="4" fill="#F4593C"/></svg></div>
</div>
<div class="fc-f"><span class="tag">老公</span><span class="meta"><span><svg class="ic"><use href="#i-heart"/></svg>1,507</span><span><svg class="ic"><use href="#i-cmt"/></svg>143</span><span><svg class="ic"><use href="#i-share"/></svg></span></span></div>
</article>
<article class="fc">
<div class="fc-a">
<img class="av" src="../../assets/img/mom/m17.jpg" alt="">
<span class="nm"><b>豆豆妈</b><small>孕 25 周 · 昨天</small></span>
</div>
<h3>给宝宝织的第一顶小帽子,织了拆、拆了织</h3>
<p>我是那种连扣子都缝不好的人。看着视频学了一周,第七次终于织出一个像样的帽檐,比我手掌还小。拍给我妈看,她说“你小时候那顶也是我这样织的”。</p>
<div class="fc-f"><span class="tag t-g">孕期日常</span><span class="meta"><span><svg class="ic"><use href="#i-heart"/></svg>468</span><span><svg class="ic"><use href="#i-cmt"/></svg>39</span><span><svg class="ic"><use href="#i-share"/></svg></span></span></div>
</article>
</div>
<div class="end">— 继续上滑加载更多故事 —</div>
<div class="fab-row"><button class="fab"><svg class="ic"><use href="#i-pen"/></svg>写故事</button></div>
</section>
<!-- ===================================================== 03 故事详情 -->
<section class="screen" id="s-detail">
<div class="nav">
<span class="nb"><svg class="ic"><use href="#i-back"/></svg></span>
<h1>故事详情</h1>
<span class="nb r"><span class="report"><svg class="ic"><use href="#i-flag"/></svg>举报</span></span>
</div>
<div class="dt">
<div class="dt-tags"><span class="badge-jx"><svg><use href="#i-spark"/></svg>本周精选</span><span class="tag">婆婆家人</span></div>
<h2>凌晨两点,婆婆端来一碗汤</h2>
<div class="dt-a">
<img class="av" src="../../assets/img/mom/m06.jpg" alt="">
<span class="nm"><b>糯米团妈妈<span class="wk">孕 28 周</span></b><small>10月29日 · 写于孕 27 周</small></span>
</div>
<div class="anon-eg">
<span class="av av-anon"><svg><use href="#i-anon"/></svg></span>
<span>匿名发布时显示为 <b>匿名妈妈 · 孕 28 周</b></span>
<em>样式示例</em>
</div>
<div class="dt-body">
<p>孕吐最厉害的那一个月,我几乎什么都吃不下,喝口水都要吐。老公出差,婆婆从老家过来陪我。</p>
<p>有天半夜两点我饿醒了,胃里空得发慌,又怕吃了再吐。迷迷糊糊听见厨房有声音,推门一看,婆婆披着外套,守着她从老家带来的那只旧砂锅,灶上的火开得很小。</p>
<p>她看见我有点不好意思,说:“我睡不着,想着你白天一口没吃,给你炖了点清汤,没放油,你闻闻能不能受得了。”</p>
<div class="dt-pic"><svg viewBox="0 0 354 200" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="g4" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFE4CC"/><stop offset="1" stop-color="#F6B996"/></linearGradient><radialGradient id="g4l" cx=".5" cy=".35" r=".5"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs><rect width="354" height="200" fill="url(#g4)"/><rect width="354" height="200" fill="url(#g4l)"/><rect y="146" width="354" height="54" fill="#E49C76" opacity=".55"/><ellipse cx="177" cy="150" rx="78" ry="12" fill="#B9694A" opacity=".35"/><path d="M112 112h130c0 26-26 38-65 38s-65-12-65-38z" fill="#9C5B3E"/><path d="M112 112h130" stroke="#C47A55" stroke-width="7" stroke-linecap="round"/><path d="M100 116h14M240 116h14" stroke="#7F452D" stroke-width="8" stroke-linecap="round"/><ellipse cx="177" cy="112" rx="58" ry="7" fill="#F7E1B5"/><circle cx="160" cy="111" r="4" fill="#7FB069"/><circle cx="190" cy="112" r="3.4" fill="#F29E5C"/><path d="M155 94c-7-10 7-14 0-26M177 92c-7-11 8-15 0-28M199 94c-7-10 7-14 0-26" fill="none" stroke="#fff" stroke-opacity=".85" stroke-width="3.4" stroke-linecap="round"/></svg></div>
<div class="cap">婆婆的那只旧砂锅,她说是我老公小时候喝汤用的</div>
<p>那碗汤我小口小口喝完了,一点没吐。她坐在旁边看着我,说:“能吃下去就好,我那时候怀他也这样,熬过这阵就好了。”</p>
<p>后来那一个月,砂锅几乎每天都在灶上。我以前总觉得婆媳之间隔着点什么,那天夜里才明白,她只是不太会说好听的话。</p>
<p class="dt-time">写给也在孕吐的你:会好的,真的会好的。</p>
</div>
<div class="award">
<img src="../../assets/img/dou-coin.svg" alt="">
<span>这篇被选为精选,作者获得 <b>300 兜豆</b></span>
<a>怎么入选 ›</a>
</div>
<div class="acts">
<button class="on"><svg class="ic"><use href="#i-heart-f"/></svg>2,318</button>
<button><svg class="ic"><use href="#i-star"/></svg>收藏 412</button>
<button><svg class="ic"><use href="#i-share"/></svg>分享</button>
</div>
</div>
<div class="cm">
<div class="cm-h"><b>评论</b><small>186</small><span class="sg"><span class="on">最热</span><span>最新</span></span></div>
<div class="ci">
<img class="av" src="../../assets/img/mom/m10.jpg" alt="">
<div class="ci-b">
<div class="ci-n"><b>阿圆妈妈</b><span class="hot">热评</span>孕 26 周<span class="ci-like on"><svg class="ic"><use href="#i-heart-f"/></svg>486</span></div>
<p class="ci-t">“她只是不太会说好听的话”这句看哭了。我婆婆也是,嘴上说着“哪有那么娇气”,转身就把我爱吃的橘子剥好放床头。</p>
<div class="ci-s">10月29日<span>回复</span></div>
<div class="rp">
<p><b>糯米团妈妈</b> <span class="au">作者</span>:对对对!她们的爱都藏在动作里。</p>
<p><b>七七</b> 回复 <b>阿圆妈妈</b>:橘子那个太有画面了,我婆婆是每天早上一个剥好的鸡蛋。</p>
<span class="more">展开 12 条回复 ›</span>
</div>
</div>
</div>
<div class="ci">
<span class="av av-anon"><svg><use href="#i-anon"/></svg></span>
<div class="ci-b">
<div class="ci-n"><b>匿名妈妈</b><span class="hot">热评</span>孕 9 周<span class="ci-like"><svg class="ic"><use href="#i-heart"/></svg>301</span></div>
<p class="ci-t">现在正吐得昏天黑地,看到最后一句突然有了点力气。谢谢你写下来。</p>
<div class="ci-s">10月30日<span>回复</span></div>
<div class="rp">
<p><b>糯米团妈妈</b> <span class="au">作者</span>:抱抱你,少食多餐,苏打饼干放床头,一定会过去的。</p>
</div>
</div>
</div>
<div class="ci">
<img class="av" src="../../assets/img/mom/m19.jpg" alt="">
<div class="ci-b">
<div class="ci-n"><b>小鹿妈妈</b>孕 31 周<span class="ci-like"><svg class="ic"><use href="#i-heart"/></svg>58</span></div>
<p class="ci-t">截图发给我老公了,让他也学学怎么照顾人。</p>
<div class="ci-s">昨天<span>回复</span></div>
</div>
</div>
</div>
<div class="cbar">
<span class="ip"><svg class="ic"><use href="#i-pen"/></svg>说点暖心的话…</span>
<span class="ib on"><svg class="ic"><use href="#i-heart-f"/></svg>2,318</span>
<span class="ib"><svg class="ic"><use href="#i-star"/></svg>412</span>
</div>
</section>
<!-- ===================================================== 04 写故事 -->
<section class="screen" id="s-write">
<div class="nav">
<span class="nb">取消</span>
<h1>讲讲我的故事</h1>
<span class="nb r">存草稿</span>
</div>
<div class="wr">
<div class="wr-topic"><svg class="ic" style="width:14px;height:14px"><use href="#i-fire"/></svg>参与话题<strong># 老公做过最暖的一件事</strong><svg class="ic x" style="width:14px;height:14px"><use href="#i-x"/></svg></div>
<div class="fg">
<div class="fg-l">选择分类</div>
<div class="chips">
<span class="on"><svg class="ic"><use href="#i-check"/></svg>老公</span><span>婆婆家人</span><span>我自己</span><span>孕期日常</span><span>一句话</span>
</div>
</div>
<div class="fg">
<div class="fg-l">标题<span class="r">15/30</span></div>
<div class="inp"><span>他把每张产检单都贴进了一个本子</span></div>
<div class="ta">
<span class="cur"></span>从哪里讲起都可以,比如:
<ul><li>那天发生了什么?</li><li>当时你心里在想什么?</li><li>现在回头看,最想对谁说一句话?</li></ul>
<span class="cnt">0/2000</span>
</div>
</div>
<div class="fg">
<div class="fg-l">加图<small>最多 3 张,选填</small><span class="r">1/3</span></div>
<div class="pics">
<div class="pc"><svg viewBox="0 0 92 92"><defs><linearGradient id="g5" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFE3CF"/><stop offset="1" stop-color="#F9BFA4"/></linearGradient></defs><rect width="92" height="92" fill="url(#g5)"/><rect x="24" y="18" width="44" height="58" rx="4" fill="#C98A5E"/><rect x="28" y="18" width="40" height="58" rx="3" fill="#E6B08A"/><rect x="34" y="27" width="28" height="18" rx="2" fill="#fff" opacity=".9"/><path d="M38 33h20M38 38h13" stroke="#E3A288" stroke-width="2" stroke-linecap="round"/><path d="M48 64s-5-3-5-6.3a2.6 2.6 0 015-1.2 2.6 2.6 0 015 1.2C53 61 48 64 48 64z" fill="#F4593C"/></svg><span class="del"><svg><use href="#i-x"/></svg></span></div>
<div class="add"><svg class="ic"><use href="#i-img"/></svg>添加图片</div>
</div>
</div>
<div class="fg">
<div class="row-sw">
<div class="t"><b>匿名发布</b><small>不显示昵称和头像,只显示孕周</small></div>
<span class="sw big on"></span>
</div>
<div class="anon-pv"><span class="av av-anon"><svg><use href="#i-anon"/></svg></span>别人看到的是:<b style="color:#5C4A80">匿名妈妈 · 孕 21 周</b></div>
</div>
<div class="fg">
<div class="row-sw">
<span class="ck on"><svg><use href="#i-check"/></svg></span>
<div class="t"><b>投稿精选</b><small>编辑部每周挑选,入选会加「精选」标</small></div>
</div>
<div class="jx-box">
<div><img src="../../assets/img/dou-coin.svg" alt="">被选中奖励 <b>200~500 兜豆</b></div>
<div><img src="../../assets/img/dou-coin.svg" alt="">之后每满 100 赞,再奖 <b>50 兜豆</b></div>
<a>投稿精选说明 ›</a>
</div>
</div>
<label class="agree"><span class="ck round on"><svg><use href="#i-check"/></svg></span>我已阅读并同意<a>《孕妈故事社区公约》</a></label>
<button class="btn-main submit">发布故事</button>
<div class="sub-tip">所有故事先审核再公开,通常 2 小时内完成</div>
<div class="note" style="margin:22px 0 0"><em>提交后</em>状态示意</div>
<div class="after">
<div class="after-h">
<span class="ck2"><svg><use href="#i-clock"/></svg></span>
<div><b>已提交,审核中</b><small>通过后公开在故事广场,结果会在消息里告诉你</small></div>
</div>
<div class="steps">
<div class="s done"><i><svg width="12" height="12"><use href="#i-check"/></svg></i>已提交</div>
<div class="ln done"></div>
<div class="s cur"><i>2</i>审核中</div>
<div class="ln"></div>
<div class="s"><i>3</i>公开</div>
<div class="ln"></div>
<div class="s"><i>4</i>精选评选</div>
</div>
<div class="pv">
<div class="sc-th"><svg viewBox="0 0 80 80"><rect width="80" height="80" fill="#FAD0BB"/><rect x="22" y="16" width="36" height="48" rx="3" fill="#E6B08A"/><rect x="28" y="24" width="24" height="14" rx="2" fill="#fff" opacity=".9"/></svg></div>
<div class="t"><b>他把每张产检单都贴进了一个本子</b><small>老公 · 匿名 · 已投稿精选</small></div>
<span class="st">审核中</span>
</div>
</div>
</div>
</section>
<!-- ===================================================== 05 投稿精选说明 -->
<section class="screen" id="s-rules">
<div class="nav">
<span class="nb"><svg class="ic"><use href="#i-back"/></svg></span>
<h1>投稿精选说明</h1>
<span class="nb r"></span>
</div>
<div class="rh">
<small>孕妈故事 · 精选计划</small>
<h2>你的故事,值得被看见</h2>
<p>认真讲出来的经历,会陪伴正在经历同样时刻的妈妈</p>
<img src="../../assets/img/dou-coin.svg" alt="">
</div>
<div class="rb">
<div class="rb-h"><i style="background:linear-gradient(135deg,#FFC24A,#F29A1F)"><svg><use href="#i-spark"/></svg></i>奖励规则</div>
<div class="rw"><div class="k"><b>入选精选</b><small>按故事完整度和打动程度定档</small></div><span class="v"><img src="../../assets/img/dou-coin.svg" alt="">200~500<small>兜豆</small></span></div>
<div class="rw"><div class="k"><b>每满 100 赞</b><small>精选故事持续累计,单篇上限 500 兜豆</small></div><span class="v"><img src="../../assets/img/dou-coin.svg" alt="">+50<small>兜豆</small></span></div>
<div class="rw"><div class="k"><b>本周话题最佳</b><small>每期话题选 3 篇,额外加奖</small></div><span class="v"><img src="../../assets/img/dou-coin.svg" alt="">+100<small>兜豆</small></span></div>
</div>
<div class="rb">
<div class="rb-h"><i style="background:linear-gradient(135deg,#F77B55,#EE5A3E)"><svg><use href="#i-star"/></svg></i>怎么被选中</div>
<div class="flow">
<div><i>1</i><b>勾选投稿</b><small>发布时勾选</small></div>
<div><i>2</i><b>编辑挑选</b><small>每周一、四</small></div>
<div><i>3</i><b>加精选标</b><small>首页优先展示</small></div>
<div><i>4</i><b>兜豆到账</b><small>自动发放</small></div>
</div>
<div class="crit">
<span><svg class="ic"><use href="#i-check"/></svg>真实发生过</span>
<span><svg class="ic"><use href="#i-check"/></svg>有细节、有画面</span>
<span><svg class="ic"><use href="#i-check"/></svg>原创首发</span>
<span><svg class="ic"><use href="#i-check"/></svg>300 字以上更容易入选</span>
</div>
</div>
<div class="rb">
<div class="rb-h"><i style="background:linear-gradient(135deg,#6E9CD8,#4E7CB7)"><svg><use href="#i-shield"/></svg></i>审核规则</div>
<div class="li"><i>1</i><span>所有故事和评论<b>先审核、后公开</b>,机器初审 + 人工复核,通常 2 小时内完成。</span></div>
<div class="li"><i>2</i><span>没通过会告诉你原因,<b>修改后可以重新提交</b>,不影响投稿精选。</span></div>
<div class="li"><i>3</i><span>被多人举报的内容会<b>先隐藏再复核</b>,确认违规的删除并通知作者。</span></div>
</div>
<div class="rb">
<div class="rb-h"><i style="background:linear-gradient(135deg,#9E87E8,#7656D2)"><svg><use href="#i-book"/></svg></i>社区公约要点</div>
<div class="rules3">
<div><span class="no"><svg><use href="#i-mega"/></svg></span><b>不人身攻击</b><small>可以吐槽事,不骂人、不地域黑</small></div>
<div><span class="no"><svg><use href="#i-lock"/></svg></span><b>不晒隐私</b><small>病历、住址、他人照片要打码</small></div>
<div><span class="no"><svg><use href="#i-share"/></svg></span><b>不发广告</b><small>不留联系方式、不带货引流</small></div>
</div>
<div class="med"><svg class="ic"><use href="#i-leaf"/></svg><span>故事是个人经历分享。涉及用药、症状和检查结果,请以医生意见为准。</span></div>
</div>
<div class="soon">
<div class="sh"><em>第二期</em><b>月度优秀故事 · 现金稿费</b><span>即将开放</span></div>
<p>每月从精选故事里评出优秀作品,发放现金稿费。评选标准和稿费档位会在开放前公布,已入选的精选故事也会参与。</p>
<span class="notify"><svg class="ic"><use href="#i-bell"/></svg>开放时提醒我</span>
</div>
<div class="r-cta"><button class="btn-main"><svg class="ic"><use href="#i-pen"/></svg>去讲我的故事</button></div>
</section>
</div>
<script>
(function(){
var seg=document.getElementById('seg');
function show(k){
if(!document.getElementById('s-'+k)) k='home';
[].forEach.call(document.querySelectorAll('.screen'),function(s){s.classList.toggle('on',s.id==='s-'+k)});
[].forEach.call(seg.children,function(b){b.classList.toggle('on',b.dataset.s===k)});
}
seg.addEventListener('click',function(e){
var b=e.target.closest('button'); if(!b) return;
history.replaceState(null,'','#'+b.dataset.s); show(b.dataset.s); window.scrollTo(0,0);
});
window.addEventListener('hashchange',function(){show(location.hash.slice(1))});
show(location.hash.slice(1));
})();
</script>
</body>
</html>