孕妈故事模块设计稿(静态,mock/story/,不接入首页)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
854
mock/story/index.html
Normal file
854
mock/story/index.html
Normal file
@@ -0,0 +1,854 @@
|
|||||||
|
<!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>
|
||||||
BIN
mock/story/shots/01-home.png
Normal file
BIN
mock/story/shots/01-home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 720 KiB |
BIN
mock/story/shots/02-square.png
Normal file
BIN
mock/story/shots/02-square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 688 KiB |
BIN
mock/story/shots/03-detail.png
Normal file
BIN
mock/story/shots/03-detail.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 574 KiB |
BIN
mock/story/shots/04-write.png
Normal file
BIN
mock/story/shots/04-write.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 361 KiB |
BIN
mock/story/shots/05-rules.png
Normal file
BIN
mock/story/shots/05-rules.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 526 KiB |
Reference in New Issue
Block a user