/* v5 指令式原型：只补 V4 没有的新部件；颜色全部取 V4 / 设计规范色板（暖白 + 炭黑 + 酒红，金色只做细线） */ :root { --deep:#2A2522; --on-deep:#F2EDE4; --on-deep-muted:#B3A99C; } .bottom-nav { grid-template-columns: repeat(5,1fr); } /* WARD-12：底栏 5 入口，正中间「衣橱」= 凸起圆形酒红按钮（衣架图标），比两边大一圈；点击跳 /wardrobe/（逻辑在 v5/app.js 的 goWardrobe） */ .bottom-nav .wd-entry { position:relative; justify-content:flex-end; padding-bottom:3px; color:var(--wine); font-weight:700; } .bottom-nav .wd-entry .nav-icon { position:absolute; top:-26px; left:50%; transform:translateX(-50%); width:54px; height:54px; border-radius:50% !important; background:var(--wine) !important; color:#fff; display:flex; align-items:center; justify-content:center; border:3px solid var(--paper,#F7F4EF); box-shadow:0 6px 14px rgba(122,38,50,.35); } .bottom-nav .wd-entry .nav-icon .ic { width:26px; height:26px; } .bottom-nav .wd-entry:active .nav-icon { background:var(--wine-d,#64202A) !important; } /* 型仔头像 */ .xz-av { flex:none; width:40px; height:40px; border-radius:50%; display:block; } .xz-av.sm { width:30px; height:30px; } .xz-av.md { width:52px; height:52px; } .xz-av.lg { width:64px; height:64px; box-shadow:0 0 0 3px rgba(196,162,106,.35); } /* 首页 · 未开始 */ .xz-start { margin-top:6px; padding:26px 22px 22px; border-radius:22px; background:var(--deep); color:var(--on-deep); } .xz-start-top { display:flex; align-items:center; gap:14px; } .xz-start .eyebrow.light { color:var(--gold); letter-spacing:1.2px; } .xz-start h1 { margin:6px 0 0; font-family:"Noto Serif SC","Songti SC",serif; font-size:28px; white-space:nowrap; line-height:1.15; letter-spacing:-.5px; } .xz-start p { margin:18px 0 22px; color:var(--on-deep-muted); font-size:14px; line-height:1.7; } .xz-go { width:100%; height:60px; border-radius:16px; background:var(--wine); color:#fff; font-size:20px; font-weight:800; letter-spacing:4px; } .xz-go:active { background:#64202A; } .xz-start small { display:block; margin-top:10px; text-align:center; color:var(--on-deep-muted); font-size:12px; } /* 首页 · 型仔说一句 */ .xz-say { display:flex; align-items:flex-start; gap:10px; margin:4px 0 18px; } .xz-bubble { flex:1; padding:11px 14px; border:1px solid var(--line); border-radius:4px 16px 16px 16px; background:#fff; } .xz-bubble b { display:block; font-size:11px; color:var(--muted); font-weight:700; } .xz-bubble p { margin:2px 0 0; font-size:15px; line-height:1.55; } .cmd-head { display:flex; justify-content:space-between; align-items:baseline; margin:0 2px 8px; } .cmd-head span { font-size:17px; font-weight:800; letter-spacing:-.3px; } .cmd-head b { font-size:13px; color:var(--wine); } .cmd-list { display:grid; gap:9px; } .task-card.cmd { width:100%; padding:14px 13px; } .task-card.cmd .task-check i { font-style:normal; font-size:12px; font-weight:800; color:var(--muted); } .task-card.cmd .cmd-no { display:block; margin-bottom:2px; font-style:normal; font-size:10.5px; letter-spacing:.8px; color:var(--wine); font-weight:800; } .task-card.cmd strong { font-size:15px; line-height:1.4; } .task-card.cmd small { font-size:12px; line-height:1.45; } .task-card.cmd.done { background:var(--surface); } .task-card.cmd.done strong { color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(110,103,95,.45); } .task-card.cmd.done .cmd-no { color:var(--muted); } .cmd-foot { margin:12px 2px 0; color:var(--muted); font-size:12px; text-align:center; } .cmd-dir { margin:22px 2px 0; color:var(--muted); font-size:12px; text-align:center; line-height:1.7; } /* 首页 · 今天结束 */ .xz-done { margin:4px 0 18px; padding:26px 20px 20px; border-radius:20px; background:var(--deep); color:var(--on-deep); text-align:center; } .xz-done .xz-av { margin:0 auto; } .xz-done h2 { margin:14px 0 4px; font-family:"Noto Serif SC","Songti SC",serif; font-size:26px; } .xz-done p { margin:0; color:var(--on-deep-muted); font-size:14px; } .xz-next { margin-top:18px; padding:12px 14px; border-top:1px solid rgba(196,162,106,.35); text-align:left; } .xz-next small { display:block; color:var(--gold); font-size:11px; letter-spacing:.6px; } .xz-next b { display:block; margin-top:3px; font-size:14px; line-height:1.5; } /* 引导对话 */ .flow-layer .page-body { background:var(--paper); } .flow-chat { display:grid; gap:10px; padding-bottom:8px; } .msg { display:flex; align-items:flex-end; gap:8px; } .msg .bub { margin:0; max-width:78%; padding:11px 14px; font-size:15px; line-height:1.6; } .msg.bot .bub { border:1px solid var(--line); border-radius:16px 16px 16px 4px; background:#fff; } .msg.me { justify-content:flex-end; } .msg.me .bub { border-radius:16px 16px 4px 16px; background:var(--blue-soft); } .msg.new { opacity:0; animation:msgIn .35s ease forwards; animation-delay:var(--d, 0s); } @keyframes msgIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } .flow-layer .page-foot { max-height:58vh; overflow-y:auto; padding:12px 14px calc(14px + env(safe-area-inset-bottom)); } .flow-layer .page-foot.in { opacity:0; animation:msgIn .3s ease forwards; animation-delay:var(--fd, .3s); } .primary.big { min-height:54px; font-size:16px; } .opt-list { display:grid; gap:8px; } .opt { display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:#fff; text-align:left; } .opt:active { border-color:var(--wine); background:#fbf3f4; } .opt b { display:block; font-size:15px; } .opt small { display:block; margin-top:1px; color:var(--muted); font-size:12px; } .opt-ic { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--paper-2); color:var(--wine); } .opt-ic .ic { width:19px; height:19px; } .opt-list.tight .opt { padding:13px 14px; } .opt.other { gap:8px; padding:6px 6px 6px 14px; } .opt.other input { flex:1; min-width:0; border:0; outline:0; font:inherit; font-size:15px; background:transparent; } .age-row { display:flex; flex-wrap:wrap; gap:8px; } .chip-opt { flex:1 1 calc(33% - 8px); min-height:46px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:14px; font-weight:700; } .chip-opt:active { border-color:var(--wine); color:var(--wine); } /* 攻略 */ .gd-newbie .line-list, .ch-list { margin:0; } .line-lv { font:inherit; } .line-lv > .ic { flex:none; color:var(--muted); } .line-lv.locked { opacity:.55; } .line-lv.locked .lv-ic { background:var(--paper-2); color:var(--muted); } .rec-tag { font-style:normal; color:var(--wine); font-weight:700; } .unlock-card { margin:16px 0 4px; padding:16px; border:1.5px dashed var(--line-accent); border-radius:16px; background:var(--surface); } .unlock-card b { display:flex; align-items:center; gap:6px; font-size:15px; } .unlock-card b .ic { color:var(--wine); } .unlock-card p { margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.65; } .unlock-card .primary { margin-top:14px; } .unlock-card.ready, .unlock-card.rejected { border-style:solid; border-color:var(--wine); background:#fbf3f4; } .unlock-card.pending { border-style:solid; border-color:var(--line); } .unlock-card.locked-art { margin-top:20px; } .unlocked-note { display:flex; align-items:center; gap:6px; margin:14px 2px 0; color:var(--green); font-size:13px; font-weight:700; } .gd-line { margin-top:8px; } .gd-line h2 { display:flex; align-items:center; gap:6px; } .lock-mini { display:inline-grid; color:var(--muted); } .ch-head { display:flex; align-items:center; gap:10px; width:100%; margin-top:8px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:#fff; text-align:left; font:inherit; color:inherit; } .ch-head > span { flex:1; min-width:0; } .ch-head em { display:block; font-style:normal; font-size:11px; color:var(--muted); } .ch-head b { display:block; font-size:14.5px; line-height:1.4; } .ch-head small { color:var(--muted); font-size:12px; } .ch-head .ch-arrow { color:var(--muted); transition:transform .2s; } .ch-head.open { border-color:var(--line-accent); } .ch-head.open .ch-arrow { transform:rotate(180deg); } .ch-head.soon { background:transparent; border-style:dashed; } .ch-head.soon b { color:var(--muted); } .ch-list { padding:8px 0 4px 10px; border-left:2px solid var(--line); margin-left:14px !important; } /* 文章 */ .read-chip { display:inline-flex; align-items:center; gap:3px; color:var(--green); font-weight:700; } .read-end { margin:22px 0 0; padding:14px 12px 12px; border-top:1px dashed var(--line); color:var(--muted); font-size:12px; text-align:center; } .read-end.on { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:4px 7px; } .read-end .re-check { display:inline-flex; align-items:center; gap:4px; color:var(--green); font-weight:800; letter-spacing:.2px; } .read-end .re-meta { color:var(--muted); font-size:11.5px; font-weight:400; } .back-home { margin-top:10px; } .art-task textarea { width:100%; min-height:72px; margin:10px 0 12px; padding:11px; border:1px solid var(--line); border-radius:11px; font:inherit; font-size:15px; background:#fff; } /* 文章末尾「下一篇」：沿用 1.0 的白卡 + 酒红左边线，小字位置 + 衬线标题 + 右侧箭头（型爷 10-20） */ .next-card { display:block; width:100%; margin:14px 0 6px; padding:0; border:1px solid var(--line); border-left:3px solid var(--wine); border-radius:16px; background:var(--surface); color:var(--ink); text-align:left; font:inherit; overflow:hidden; -webkit-tap-highlight-color:transparent; } .next-card .nc-in { display:flex; align-items:center; gap:12px; padding:15px 14px 15px 16px; } .next-card .nc-body { flex:1; min-width:0; } .next-card .nc-top { display:flex; align-items:center; justify-content:space-between; gap:10px; } .next-card .nc-kicker { flex:none; font-size:11px; font-weight:800; letter-spacing:1.2px; color:var(--wine); } .next-card .nc-pos { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--muted); } .next-card.locked .nc-top { flex-wrap:wrap; row-gap:2px; } .next-card.locked .nc-pos { flex:1 0 100%; } .next-card .nc-title { display:block; margin-top:6px; font-family:"Noto Serif SC","Songti SC",serif; font-size:17.5px; line-height:1.45; letter-spacing:-.2px; } .next-card .nc-go { flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--deep); color:var(--on-deep); } .next-card .nc-go .ic { width:16px; height:16px; } .next-card:active { background:var(--surface-sunken); } .next-card.done .nc-kicker { color:var(--green); } .next-card.end { border-left-color:var(--deep); } .next-card.end .nc-kicker { color:var(--muted); } .c-av { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--paper-2); font-size:11px; font-weight:800; } /* 上传起点照 */ .up-intro h1 { margin:6px 0 6px; font-size:24px; letter-spacing:-.6px; } .up-intro p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; } .up-rules { list-style:none; margin:16px 0; padding:14px; border:1px solid var(--line); border-radius:14px; background:#fff; display:grid; gap:8px; font-size:14px; } .up-rules li { display:flex; align-items:center; gap:8px; } .up-rules .ic { color:var(--wine); } .up-pick { display:grid; place-content:center; justify-items:center; gap:8px; width:100%; min-height:220px; margin-bottom:14px; border:1.5px dashed var(--line-accent); border-radius:16px; background:var(--surface); color:var(--muted); font-size:13px; overflow:hidden; } .up-pick .ic { width:28px; height:28px; color:var(--wine); } .up-pick img { width:100%; max-height:380px; object-fit:contain; display:block; } .up-pick.small { min-height:130px; } /* 福利 */ .perk-big { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px; } .perk-card { position:relative; height:176px; overflow:hidden; border-radius:18px; text-align:left; color:#fff; padding:0; background:var(--deep); } .perk-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; } .perk-shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(31,28,26,.05) 0%, rgba(42,37,34,.88) 72%); } .perk-copy { position:absolute; left:14px; right:12px; bottom:14px; display:grid; gap:2px; } .perk-copy em { font-style:normal; font-size:10px; letter-spacing:1.4px; color:var(--gold); font-weight:800; } .perk-copy b { font-size:19px; letter-spacing:-.3px; } .perk-copy small { font-size:11.5px; color:var(--on-deep-muted); } .perk-chip { justify-self:start; margin-top:8px; padding:4px 9px; border:1px solid rgba(214,195,160,.55); border-radius:999px; font-style:normal; font-size:11px; color:#F3DFA8; } .perk-crown { position:absolute; right:14px; top:16px; width:54px; height:40px; fill:none; stroke:var(--gold); stroke-width:1.2; stroke-linejoin:round; opacity:.9; } .checkin-card .reward-strip { margin-top:0; } .checkin-card .primary { margin-top:12px; } .checkin-card .days-hint { margin:10px 0 0; text-align:center; } .ext-pill { margin-left:auto; display:inline-flex; align-items:center; gap:3px; padding:5px 10px; border:1px solid var(--line-accent); border-radius:999px; font-style:normal; font-size:11.5px; color:var(--ink); white-space:nowrap; } .row-card > span:nth-child(2) b { display:block; font-size:14px; } .row-card > span:nth-child(2) small { display:block; margin-top:2px; color:var(--muted); font-size:12px; } /* 我的 */ .mr-hint { flex:1 0 200px; align-self:center; padding:0 6px; color:var(--muted); font-size:12.5px; line-height:1.6; } .plaza-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .pz-tile { position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:14px; background:var(--paper-2); padding:0; text-align:left; } .pz-tile img { width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block; } .pz-txt { display:block; padding:16px 14px; font-family:"Noto Serif SC","Songti SC",serif; font-size:15px; line-height:1.6; color:var(--ink); } .pz-cap { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:center; padding:20px 10px 8px; background:linear-gradient(180deg, transparent, rgba(31,28,26,.6)); color:#fff; font-size:12px; } .pz-cap small { display:inline-flex; align-items:center; gap:3px; font-size:11px; } .honor-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .honor { display:grid; justify-items:center; gap:3px; padding:14px 6px 12px; border:1px solid var(--line); border-radius:14px; background:#fff; text-align:center; } .honor img, .honor-art { width:44px; height:44px; filter:grayscale(1); opacity:.45; } .honor-art { display:grid; place-items:center; border-radius:50%; background:var(--deep); color:var(--gold); } .honor.on img, .honor.on .honor-art { filter:none; opacity:1; } .honor b { font-size:12.5px; margin-top:4px; } .honor small { font-size:10.5px; color:var(--muted); } .menu-list { margin-top:18px; } /* 小互动 */ .choice-grid.quiz { grid-template-columns:1fr; margin-top:12px; } .choice.right { border-color:var(--green); background:#eef6f1; } .choice.wrong { border-color:var(--wine); background:#fbf3f4; } .sheet-buttons.tools { display:grid; gap:8px; } .sheet-buttons .danger { color:var(--wine); } .bottom-sheet .task-label input { width:100%; margin-top:6px; padding:12px; border:1px solid var(--line); border-radius:11px; font:inherit; background:#fff; } .bottom-sheet .rec-text, .page-body .rec-text { width:100%; min-height:90px; margin:10px 0 12px; padding:11px; border:1px solid var(--line); border-radius:11px; font:inherit; font-size:15px; background:#fff; } .page-body .vis-seg { margin-bottom:14px; } /* ===================== 第二版（型爷 10-18 走查） ===================== */ /* 首页 · 全勤奖励卡（V4 .all-done 基础上加一枚金币） */ .all-done.ready { margin-top:14px; padding:20px 16px 18px; } .ad-coin { display:block; width:46px; height:46px; margin:0 auto 6px; animation:ad-float 2.2s ease-in-out infinite; } .ad-coin img { width:100%; height:100%; } @keyframes ad-float { 50% { transform:translateY(-4px) rotate(-6deg); } } .all-done.pop { animation:ad-pop .5s ease; } @keyframes ad-pop { 40% { transform:scale(1.04); } } .all-done.claimed { margin-top:14px; display:flex; align-items:center; justify-content:center; gap:6px; background:var(--surface); border:1px solid var(--line); color:var(--muted); font-weight:700; } /* 攻略 · 1.0 排版 */ .g-intro { position:relative; display:block; width:100%; min-height:148px; margin:0 0 4px; padding:0; overflow:hidden; border-radius:16px; background:#1d2526; color:#fff; text-align:left; } .g-intro img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; } .g-intro-body { position:relative; z-index:1; display:block; padding:20px; } .g-intro .tag { font-size:11px; padding:3px 8px; border-radius:4px; background:rgba(42,37,34,.85); color:#F3DFA8; letter-spacing:.5px; } .g-intro b { display:block; margin:12px 0 6px; font-family:"Noto Serif SC","Songti SC",serif; font-size:19px; line-height:1.4; } .g-intro small { color:#F2EDE4; font-size:12.5px; } .g-line { margin:16px 0 0; padding:10px; border:1px solid var(--line); border-radius:16px; background:var(--paper-2); } .g-line-head { display:flex; align-items:center; gap:12px; padding:6px 6px 12px; } .g-mark { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--deep); color:#F3DFA8; font-size:15px; font-weight:800; } .g-line-head > div { flex:1; min-width:0; } .g-line-head small { display:block; font-size:11px; color:var(--muted); line-height:1.4; } .g-line-head h3 { margin:1px 0 0; font-size:19px; letter-spacing:-.3px; display:flex; align-items:center; gap:6px; } .g-count { font-size:11px; color:var(--muted); white-space:nowrap; } .g-line.outro .g-mark { background:var(--wine); color:#fff; } .g-chapters { overflow:hidden; border:1px solid var(--line); border-radius:13px; background:#fff; } .g-ch + .g-ch { border-top:1px solid var(--line); } .g-ch summary { list-style:none; display:flex; align-items:center; gap:12px; padding:16px 14px; cursor:pointer; } .g-ch summary::-webkit-details-marker { display:none; } .g-chno { flex:none; min-width:30px; font-size:13px; font-weight:800; color:#a39a8e; font-variant-numeric:tabular-nums; } .g-sum { flex:1; min-width:0; } .g-sum b { display:block; font-size:15px; line-height:1.45; } .g-sum small { display:block; margin-top:2px; font-size:11.5px; color:var(--muted); } .g-chev { font-size:20px; color:var(--muted); transition:transform .2s; } .g-ch[open] .g-chev { transform:rotate(90deg); } .g-ch.soon summary { cursor:pointer; } .g-ch.soon .g-sum b { color:var(--muted); font-weight:600; } .g-ch.soon .g-chev { visibility:visible; } .g-theme { margin:0; padding:0 14px 12px 56px; font-size:12px; line-height:1.6; color:var(--muted); } .g-lesson { display:flex; align-items:baseline; gap:10px; width:100%; padding:13px 14px; border:0; border-top:1px solid #EFE9E1; background:#fff; text-align:left; font:inherit; color:var(--ink); } .g-lesson:active { background:var(--paper-2); } .g-no { flex:0 0 38px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; } .g-lesson b { flex:1; min-width:0; font-size:14px; font-weight:500; line-height:1.5; } .g-lesson .rec-tag { display:inline-block; margin-left:6px; } .g-st { flex:none; display:inline-flex; align-items:center; gap:3px; padding:3px 7px; border:1px solid var(--line); border-radius:6px; background:var(--paper-2); font-size:11px; color:var(--ink); white-space:nowrap; } .g-lesson.done .g-st { color:#2f6a52; background:#eef6f1; border-color:#d3e7dc; } .g-lesson.locked { color:var(--muted); } .g-lesson.locked b { color:#8d867c; } /* v5fix3：内容准备中的章节也能展开看目录（型爷 10-18） */ .g-lesson.soon { cursor:default; background:#FCFAF7; } .g-lesson.soon:active { background:#FCFAF7; } .g-lesson-copy { flex:1; min-width:0; } .g-lesson-copy b { display:block; font-size:14px; font-weight:500; line-height:1.5; color:#5f584f; } .g-lesson-copy small { display:block; margin-top:3px; font-size:12px; line-height:1.55; color:var(--muted); } .g-lesson.soon .g-st { background:#F6ECE9; border-color:#EAD6D1; color:var(--wine); } .g-ch.soon[open] summary { border-bottom:1px solid var(--line); } .g-lines-label { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:22px 0 0; padding:11px 16px; border-left:4px solid var(--wine); border-radius:0 10px 10px 0; background:var(--deep); color:#fff; } .g-lines-label b { font-size:16px; } .g-lines-label span { font-size:11px; color:var(--on-deep-muted); } .unlock-card { margin-top:14px; } /* 文章 · 篇末任务头 */ .art-task-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line); } .art-task-head h2 { margin:3px 0 0; font-size:17px; letter-spacing:-.3px; } .art-task-gain { flex:none; text-align:right; font-size:12px; font-weight:800; line-height:1.5; color:var(--wine); } .art-task .tf-label b { font-weight:700; } .art-task .live-task { margin-top:14px; } /* 福利 · 两张大卡统一纯色 */ .perk-card.lucky, .perk-card.rank { background:var(--deep); } .perk-gift { width:40px; height:40px; stroke-width:1.1; } .ext-pill.solid { border-color:var(--deep); background:var(--deep); color:#F2EDE4; padding:7px 13px; font-weight:700; font-size:12px; } .row-card.clinic { align-items:center; } /* 变帅天数 · 7 天奖励阶梯 */ .days-ladder { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin:12px 0 16px; } .days-ladder div { display:grid; justify-items:center; gap:1px; padding:8px 2px; border:1px solid var(--line); border-radius:10px; background:#fff; } .days-ladder small { font-size:10px; color:var(--muted); } .days-ladder b { font-size:14px; color:var(--ink); } .days-ladder em { font-style:normal; font-size:9px; color:#8E6A33; text-align:center; line-height:1.2; } .days-ladder .now { border-color:var(--wine); background:#fbf3f4; } .days-ladder .now b { color:var(--wine); } /* 排行榜 · 经验规则入口 */ .xp-rule-link { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin:14px 0 4px; padding:12px; border:1px dashed var(--line-accent); border-radius:12px; background:transparent; color:var(--ink); font-size:13px; font-weight:700; } /* 懒人套装 · 卡片缩小，一屏看完一整套 */ .outfits-list.v5 { gap:18px; } .outfits-list.v5 .outfit-card { width:80%; margin:0 auto; } .outfits-list.v5 .outfit-visual { aspect-ratio:2/3; max-height:calc(100vh - 330px); } .outfits-list.v5 .outfit-views button { min-height:34px; } .outfits-list.v5 .outfit-buy { min-width:72px; } /* 我的 · 记录广场一排横滑 */ .pz-row { display:flex; gap:8px; overflow-x:auto; margin:0 -18px; padding:0 18px 4px; scroll-snap-type:x mandatory; scrollbar-width:none; } .pz-row::-webkit-scrollbar { display:none; } .pz-row .pz-tile { flex:0 0 38%; scroll-snap-align:start; } /* 型爷本爷详情 */ .master-hero { display:grid; justify-items:center; gap:4px; padding:28px 20px 24px; border-radius:20px; background:radial-gradient(ellipse at 50% 0%,#3A3431,transparent 60%),var(--deep); color:var(--on-deep); text-align:center; } .master-hero .master-badge.big { width:120px; margin-bottom:10px; } .master-hero .eyebrow.light { color:#F3DFA8; } .master-hero h1 { margin:2px 0; font-family:"Noto Serif SC","Songti SC",serif; font-size:28px; } .master-hero p { margin:4px 0 0; color:var(--on-deep-muted); font-size:13px; } .master-prog { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0; } .master-prog div { padding:12px 6px; border:1px solid var(--line); border-radius:12px; background:#fff; text-align:center; } .master-prog b { display:block; font-size:22px; } .master-prog small { font-size:11px; color:var(--muted); } /* 经验飘字 */ .xp-float { position:fixed; z-index:96; transform:translateX(-50%); padding:4px 10px; border-radius:999px; background:var(--deep); color:#F3DFA8; font-size:13px; font-weight:800; pointer-events:none; animation:xp-up 1.2s ease-out forwards; } @keyframes xp-up { 0% { opacity:0; transform:translate(-50%,6px) scale(.8); } 20% { opacity:1; transform:translate(-50%,0) scale(1.05); } 100% { opacity:0; transform:translate(-50%,-46px) scale(1); } } /* 金币飞进右上角（型爷 2026-10-24）：left/top 给的是金币中心，靠负 margin 自己居中； 弧线由 app.js 的 Web Animations 动画算，这里只管大小、层次和投影。 */ .fly-coin { position:fixed; z-index:130; width:30px; height:30px; margin:-15px 0 0 -15px; pointer-events:none; transition:none; will-change:transform,opacity; filter:drop-shadow(0 5px 9px rgba(58,28,28,.38)); } .fly-coin.fly-coin-sm { width:15px; height:15px; margin:-7.5px 0 0 -7.5px; filter:drop-shadow(0 3px 6px rgba(58,28,28,.3)); } /* 到账卡片（1.0 型币弹窗：上面大图标，下面 +多少 + 内容） */ .rc-wrap { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:18px; background:rgba(42,37,34,.7); backdrop-filter:blur(5px); animation:rc-bg .2s ease; } .rc-wrap.out { opacity:0; transition:opacity .18s; } @keyframes rc-bg { from { opacity:0; } } .rc-card { position:relative; width:min(360px,100%); max-height:calc(100vh - 36px); overflow:auto; padding:28px 24px 20px; border:1px solid #4a423d; border-radius:26px; background:radial-gradient(ellipse at 50% 5%,#3A3431,transparent 55%),var(--deep); color:var(--on-deep); text-align:center; box-shadow:0 28px 80px rgba(0,0,0,.4); animation:rc-in .38s cubic-bezier(.2,1.3,.4,1); } @keyframes rc-in { from { opacity:0; transform:translateY(16px) scale(.92); } } .rc-x { position:absolute; right:10px; top:6px; width:40px; height:40px; background:transparent; color:var(--on-deep-muted); font-size:26px; } .rc-halo { display:grid; place-items:center; width:124px; height:124px; margin:0 auto 14px; border-radius:50%; background:radial-gradient(circle,rgba(243,223,168,.28),transparent 70%); } .rc-coin { width:96px; height:96px; animation:rc-coin .7s cubic-bezier(.2,1.4,.4,1); } @keyframes rc-coin { from { opacity:0; transform:translateY(14px) scale(.6) rotateY(180deg); } } .rc-prize { width:84px; height:84px; fill:none; stroke:#F3DFA8; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; animation:rc-coin .7s cubic-bezier(.2,1.4,.4,1); } .rc-eyebrow { font-size:11px; letter-spacing:2px; color:#C9A464; font-weight:800; } .rc-card h2 { margin:8px 0 2px; font-size:22px; } .rc-amount { font-size:52px; font-weight:850; line-height:1.25; color:#F3DFA8; letter-spacing:-1px; } .rc-amount small { margin-left:6px; font-size:16px; letter-spacing:0; } .rc-amount .rc-name { font-size:26px; letter-spacing:0; } .rc-xp { display:inline-block; margin-top:2px; padding:3px 10px; border:1px solid rgba(243,223,168,.4); border-radius:999px; font-size:12px; font-weight:800; color:#F3DFA8; } .rc-card p { margin:12px 0 16px; font-size:13px; line-height:1.75; color:var(--on-deep-muted); } .rc-card .dl-result-ticket { margin:0 0 14px; background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); text-align:center; } .rc-card .dl-result-ticket b { color:var(--on-deep); } .rc-card .dl-result-ticket dt, .rc-card .dl-result-ticket small { color:var(--on-deep-muted); } .rc-card .dl-result-ticket dd { color:#F3DFA8; } .rc-balance { margin-bottom:16px; padding:11px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.04); font-size:12.5px; color:var(--on-deep-muted); } .rc-balance b { color:var(--on-deep); } .rc-actions { display:grid; gap:8px; } .rc-btn { min-height:48px; border-radius:12px; background:var(--wine); color:#fff; font-size:15px; font-weight:800; } .rc-btn.ghost { background:transparent; border:1px solid rgba(243,223,168,.45); color:#F3DFA8; } .rc-link { margin-top:12px; background:transparent; color:var(--on-deep-muted); font-size:12px; } @media (prefers-reduced-motion: reduce) { .rc-card, .rc-coin, .rc-prize, .ad-coin, .xp-float { animation:none; } } /* ===================== v5 线上（2026-10-18） ===================== */ /* 底栏图标 / 顶栏头像：沿用 V4 位置，只保证 v5 的图标能撑满 */ .bottom-nav .nav-icon .ic { width: 22px; height: 22px; } .topbar .avatar img:not(.face-badge):not(.corner-badge) { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* v5fix1 复核修复（型爷 10-18）：顶栏头像里的队长徽章不能被上面那条「铺满」规则拉成 16×34 */ .topbar .avatar .face-badge { width: 16px; height: auto; right: -6px; bottom: -5px; } /* v5fix1 复核修复（型爷 10-18）：终章整块深色，不要黑底里再套白卡 */ .g-line.outro .g-chapters { background: transparent; border-color: #4A423D; } .g-line.outro .g-ch { border-color: #4A423D; } .g-line.outro .g-ch + .g-ch { border-top-color: #4A423D; } .g-line.outro .g-sum b { color: var(--on-deep); } .g-line.outro .g-sum small, .g-line.outro .g-chno, .g-line.outro .g-chev, .g-line.outro .g-theme { color: var(--on-deep-muted); } .g-line.outro .g-lesson { background: transparent; color: var(--on-deep); border-top-color: rgba(255,255,255,.12); } .g-line.outro .g-lesson:active { background: rgba(255,255,255,.06); } .g-line.outro .g-lesson b { color: var(--on-deep); } .g-line.outro .g-lesson.locked b { color: var(--on-deep-muted); } .g-line.outro .g-st { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: var(--on-deep); } .g-line.outro .g-lesson.done .g-st { background: rgba(47,106,82,.35); border-color: rgba(120,190,150,.4); color: #BFE3CF; } .g-line.outro .g-ch.soon .g-sum b { color: var(--on-deep-muted); } #main { min-height: 60vh; } /* 首页空状态 / 登录提示 */ .v5-login-hint { margin: 18px 2px 0; padding: 16px; border: 1px dashed var(--line-accent); border-radius: 16px; background: var(--surface); color: var(--muted); font-size: 13px; line-height: 1.7; text-align: center; } .v5-login-hint .primary { margin-top: 12px; } /* 文章页 */ .page-article h1 { margin: 8px 0 10px; font-family: "Noto Serif SC","Songti SC",serif; font-size: 23px; line-height: 1.35; letter-spacing: -.4px; } .rp-meta { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--muted); font-size: 12.5px; } .rp-meta b { color: var(--ink); font-size: 13px; } .rp-meta .au-av { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--deep); color: #F3DFA8; font-size: 12px; font-weight: 800; } .art-task-head { margin-top: 4px; } .art-task .live-task { margin-top: 0; } .art-task .tf-pick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .art-task .tf-imgs { display: flex; gap: 8px; margin-top: 8px; } .tf-img, .tf-img img { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; display: block; } .art-next { margin: 14px 0 6px; } .read-end { scroll-margin-bottom: 40px; } /* 篇末任务 / 表单小修 */ .tf textarea, .sheet-copy textarea { width: 100%; } .choice-grid .choice { min-height: 44px; } /* 我的一排横滑 / 广场 */ .sq-list { display: grid; gap: 12px; } .sq-list .post-card { margin: 0; } .mr-strip .mr-add { display: grid; place-items: center; gap: 4px; } .mr-strip .mr-add .ic { width: 22px; height: 22px; } /* 首页指令卡里的强调 */ .task-card.cmd .task-arrow { color: var(--muted); } .task-card.cmd:disabled { opacity: .7; } /* 到账卡片里的说明行 */ .rc-card .rc-note { margin: 0 0 12px; font-size: 12px; color: var(--on-deep-muted); } /* 审核中 / 驳回的提示条 */ .v5-state { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--surface); color: var(--muted); font-size: 13px; line-height: 1.6; } .v5-state b { color: var(--ink); } .v5-state.ok { background: #eef6f1; color: #2f6a52; } /* 底部安全区 */ .bottom-nav { padding-bottom: env(safe-area-inset-bottom); } .page-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); } /* ===================== v5fix1（型爷 10-18 上线后走查） ===================== */ /* 底栏：没选中线稿、选中实心；选中态颜色 = 炭黑，下面一颗酒红小点（V4 沿用） */ .bottom-nav .nav-icon .nv { width:24px; height:24px; } .bottom-nav .nav-icon .nv-on { display:none; } .bottom-nav button.active .nav-icon .nv-off { display:none; } .bottom-nav button.active .nav-icon .nv-on { display:block; animation:nv-pop .22s ease; } @keyframes nv-pop { from { transform:scale(.82); } } @media (prefers-reduced-motion: reduce) { .bottom-nav button.active .nav-icon .nv-on { animation:none; } } /* 今日任务：完成后的对号小一号、酒红（不用绿色） */ .task-card.cmd.done .task-check { width:20px; height:20px; margin:0 3px; border-color:var(--wine); background:var(--wine); color:#fff; } .task-card.cmd.done .task-check .ic { width:12px; height:12px; stroke-width:2.6; } /* 攻略：01/02/03… 圆角编号块改酒红底；终章做成深色 banner 底 */ .g-mark { background:var(--wine); color:#fff; } .g-line.outro { border-color:#3A3330; background:radial-gradient(ellipse at 100% 0%, rgba(196,162,106,.22), transparent 55%), var(--deep); color:var(--on-deep); } .g-line.outro .g-line-head h3 { color:var(--on-deep); } .g-line.outro .g-line-head small, .g-line.outro .g-count { color:var(--on-deep-muted); } .g-line.outro .g-mark { background:var(--wine); color:#fff; box-shadow:0 0 0 1px rgba(243,223,168,.55); } .g-line.outro .lock-mini { color:#F3DFA8; } .g-line.outro .g-chapters { border-color:#3A3330; } /* 浮层右上角的型币余额（变帅天数 / 每日送衣服） */ .page-top.has-coin { grid-template-columns:44px 1fr auto; } .page-coin { justify-self:end; display:inline-flex; align-items:center; gap:4px; height:30px; padding:0 10px 0 5px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font:inherit; font-size:13px; } .page-coin .coin-img { width:20px; height:20px; } .page-coin b { font-variant-numeric:tabular-nums; } .page-coin.bump { animation:pc-bump .5s ease; } @keyframes pc-bump { 40% { transform:scale(1.12); } } .reward-strip .rw.claimed b { font-size:12px; opacity:.75; } .reward-strip .rw.claimed small { display:inline-flex; align-items:center; gap:2px; } /* 往期中奖头像（带小帅认证环 / 兄弟队长徽章） */ .dl-winners .face-wrap { margin-right:6px; vertical-align:middle; } .dl-winners .w-av { margin-right:0; } /* 「记一条」：右侧悬浮圆形加号，不占版面（我的 + 记录广场） */ .fab-post.v5fab { width:52px; height:52px; right:max(16px, calc((100% - 520px)/2 + 16px)); } .fab-post.v5fab .ic { width:26px; height:26px; stroke-width:2; } .page-layer.with-fab .page { position:relative; } .page-layer.with-fab .fab-post.v5fab { position:absolute; right:16px; bottom:calc(24px + env(safe-area-inset-bottom)); } .page-layer.with-fab .page-body { padding-bottom:calc(96px + env(safe-area-inset-bottom)); } /* 我的记录 / 记录广场横滑：左边和正文对齐留白，右边一直顶到屏幕边（滑动时贴边吸附也不吃掉左边距） */ .mr-strip, .pz-row { margin:0 -18px 0 0; padding:2px 18px 8px 0; scroll-padding-left:0; } .mr-strip > :first-child, .pz-row > :first-child { margin-left:0; } @media (max-width: 360px) { .mr-strip, .pz-row { margin-right:-14px; padding-right:14px; } } /* ===================== v5fix2（型爷 10-18 第三轮：游客 + 登录后走查） ===================== */ /* 首页：型仔说的话换成浅酒红底，和下面白色任务卡区分开 */ .xz-bubble { background:#F6ECE9; border-color:#EAD6D1; } .xz-bubble b { color:var(--wine); } /* 登录：邀请码和上面的验证码分开 */ .login-sheet .lg-invite { margin-top:18px; padding-top:14px; border-top:1px dashed var(--line); } .login-sheet .sheet-buttons { margin-top:18px; } .login-hint { margin:8px 0 0; padding:10px 12px; border-radius:10px; background:#F6ECE9; color:var(--wine); font-size:13px; line-height:1.6; } /* 攻略：和福利 / 我的同一种排版——小标题 + 一张白卡 */ .g-head { display:flex; align-items:center; gap:10px; margin:22px 2px 10px; } .g-head h2 { margin:0; flex:1; font-size:18px; letter-spacing:-.3px; } .g-head .g-mark { width:30px; height:30px; border-radius:9px; font-size:12.5px; } .g-head .g-right { display:inline-flex; align-items:center; gap:3px; font-size:12px; color:var(--muted); } .g-chapters { border-radius:14px; } .g-ch summary { padding:15px 14px; } .g-sum b { font-size:14.5px; font-weight:700; } .g-intro { margin-top:2px; } .unlock-card.slim { margin-top:12px; padding:14px; } .unlock-card.slim p { margin:4px 0 0; font-size:13px; } .unlock-card.slim .primary { margin-top:10px; } .unlock-card.locked-art .sheet-buttons { margin-top:12px; } /* 终章 = 结语：深色 banner（和最上面的《序》呼应） */ .g-outro { display:block; width:100%; margin:22px 0 4px; padding:22px 20px; border-radius:16px; text-align:left; color:var(--on-deep); background:radial-gradient(ellipse at 100% 0%, rgba(196,162,106,.28), transparent 55%), var(--deep); } .g-outro .tag { font-size:11px; padding:3px 8px; border-radius:4px; background:var(--wine); color:#fff; letter-spacing:.5px; } .g-outro b { display:block; margin:12px 0 6px; font-family:"Noto Serif SC","Songti SC",serif; font-size:19px; line-height:1.45; color:#F3DFA8; } .g-outro small { color:var(--on-deep-muted); font-size:12.5px; } .g-outro:disabled { opacity:1; } /* 福利：皇冠和礼物一样大（都是 24 栅格画的方形图标） */ .perk-crown.perk-king { width:40px; height:40px; stroke-width:1.1; } /* 文章：只许上下滑，不许左右晃 */ .page-body { overflow-x:hidden; overscroll-behavior-x:none; overscroll-behavior-y:contain; } .art-layer .page-body { touch-action:pan-y pinch-zoom; } html, body { overflow-x:hidden; } .page-article .reading { overflow-wrap:anywhere; } .page-article .reading img, .page-article .reading video, .page-article .reading iframe { max-width:100%; height:auto; } .page-article .reading img { cursor:zoom-in; } .page-article .reading a img { cursor:pointer; } .page-article .reading table { display:block; max-width:100%; overflow-x:auto; } /* 篇末任务：文章里只放一张卡，点了进单独的任务页 */ .art-task-card { display:block; margin:18px 0 6px; padding:16px; border:1px solid var(--wine); border-radius:16px; background:#FBF3F4; } .art-task-card b { display:block; margin-top:2px; font-size:15.5px; } .art-task-card small { display:block; margin-top:3px; color:var(--muted); font-size:12px; line-height:1.5; } .art-task-card button { display:block; width:100%; min-height:46px; margin-top:12px; border-radius:12px; } .art-task-card.done { border-color:var(--line); background:#fff; } .task-layer { z-index:47; background:transparent; } .task-page-head h1 { margin:6px 0 4px; font-family:"Noto Serif SC","Songti SC",serif; font-size:21px; line-height:1.4; } .task-page-head p { margin:0 0 6px; color:var(--muted); font-size:13px; } .cmt-guest { margin:4px 0 0; } .comment .cmt-likes { display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:12px; } .comment .cmt-likes svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; } /* 我的：「我的记录」第一格是发布方框（有没有记录都一样）；悬浮加号只在记录广场 */ .mr-strip .mr-add { border:1.5px dashed var(--line-accent); background:#fff; color:var(--wine); font-size:12px; font-weight:700; } .sq-more { margin-top:14px; } /* 个人资料 */ .pf-box { display:grid; justify-items:center; gap:8px; margin:8px 0 6px; } .pf-avatar { position:relative; padding:0; background:none; } .pf-avatar .avatar.big { width:88px; height:88px; font-size:30px; } .pf-avatar .avatar.big img { width:100%; height:100%; object-fit:cover; border-radius:50%; } .pf-cam { position:absolute; right:-2px; bottom:-2px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--wine); color:#fff; border:2px solid var(--paper); } .pf-box small { color:var(--muted); font-size:12px; } .page-body .task-label input { width:100%; margin-top:6px; padding:12px; border:1px solid var(--line); border-radius:11px; font:inherit; background:#fff; } /* 建议与反馈 */ .fb-imgs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; } .fb-send { margin-top:14px; } .fb-list { display:grid; gap:10px; } .fb-item { padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; } .fb-item small { color:var(--muted); font-size:11.5px; } .fb-item p { margin:6px 0 0; font-size:14px; line-height:1.6; white-space:pre-wrap; } .fb-reply { padding:8px 10px; border-radius:8px; background:#F6ECE9; } /* 篇末任务「选填」标签别吃到型仔引导选项 .opt 的样式（整行宽、带边框） */ .tf-label em.opt { display:inline; width:auto; min-height:0; padding:1px 6px; border:0; border-radius:999px; box-shadow:none; } /* ===================== v5fix4（型爷 10-18 第四轮） ===================== */ /* 留言：回复 / 赞放回大家习惯的右边；管理员「隐藏」不再把别人挤到左边 */ .comment .row { justify-content:flex-end; } .comment .cmt-hide { margin-left:8px; } .reply-line { padding:10px 0; border-top:1px solid var(--line); font-size:14px; line-height:1.7; } .reply-line:first-of-type { border-top:0; } .reply-line b { margin-right:6px; color:var(--wine); } /* 多图发布：缩略图上的左右箭头 / 删除 */ .rec-move { position:absolute; bottom:4px; z-index:2; width:24px; height:24px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:rgba(31,28,26,.62); color:#fff; font-size:15px; line-height:1; } .rec-move.left { left:4px; } .rec-move.right { right:4px; } /* 公开 / 仅自己：做小、做轻 */ .vis-seg.mini { display:flex; align-items:center; gap:6px; margin:10px 0 2px; } .vis-seg.mini .vis-label { margin-right:auto; color:var(--muted); font-size:12px; } .vis-seg.mini button { padding:4px 10px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font:inherit; font-size:12px; } .vis-seg.mini button[aria-checked="true"] { border-color:var(--line-accent, #d6c3a0); color:var(--ink); background:#fff; } .vis-seg.mini button[aria-checked="true"]:first-of-type { color:var(--ink); } /* 记录详情 */ .post-card.detail { padding:2px 0 8px; } .pm-img { display:block; padding:0; border:0; background:#eee8df; border-radius:10px; overflow:hidden; } .own-actions { display:flex; gap:14px; padding:10px 0 2px; } .text-button.danger { color:#9a392f; } /* 我的记录 · 时间轴 */ .tl-day { margin:16px 0 8px; color:var(--muted); font-size:12.5px; } .tl-card { display:flex; align-items:center; gap:10px; width:100%; padding:10px; margin-bottom:8px; border:1px solid var(--line); border-radius:12px; background:#fff; text-align:left; font:inherit; color:var(--ink); } .tl-thumbs { flex:none; display:flex; gap:3px; } .tl-thumbs img { width:54px; height:54px; border-radius:8px; object-fit:cover; } .tl-copy { flex:1; min-width:0; } .tl-copy b { display:block; font-size:13.5px; font-weight:500; line-height:1.5; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .tl-copy small { display:block; margin-top:3px; color:var(--muted); font-size:11.5px; } /* 短信与隐私 */ .privacy h2 { margin:6px 0 4px; font-size:20px; } .privacy h3 { margin:18px 0 6px; font-size:14.5px; } .privacy p { margin:6px 0; font-size:13.5px; line-height:1.8; color:var(--ink); } .privacy .sms-pref { margin:14px 0 4px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; } .privacy .sms-pref label { display:flex; align-items:center; gap:12px; } .privacy .sms-pref span { flex:1; } .privacy .sms-pref b { display:block; font-size:14px; } .privacy .sms-pref small { display:block; margin-top:2px; color:var(--muted); font-size:12px; line-height:1.5; } /* 记录广场：瀑布流自动加载（v5fix4） */ .sq-end { padding:26px 0 8px; text-align:center; color:var(--muted); font-size:12px; } .sq-end span { display:inline-block; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); } /* ===================== v5fix5（型爷 10-18 第五轮） ===================== */ /* 攻略留言：头像和名字别挤在一起 */ .comment-head { gap:12px; min-height:38px; align-items:center; } .comment-head .face-wrap { width:36px; height:36px; } .comment-head .c-av, .comment-head .avatar-mini { width:36px; height:36px; font-size:15px; } .comment-head > b { font-size:15px; line-height:1.35; } .comment-head .member-no { margin-left:2px; } .comment-head .cmt-author { margin-left:2px; } .comment > p { margin:10px 0 8px; line-height:1.75; } .reply { line-height:1.7; } /* 记录广场：点赞名单 + 留言预览（朋友圈） */ .pc-likes { display:flex; align-items:center; gap:5px; margin:8px 0 0; padding:8px 12px; border-radius:10px; background:#F7F3EE; color:var(--ink); font-size:12.5px; line-height:1.6; } .pc-likes .ic { color:var(--wine); flex:none; } .pc-cmts { margin-top:6px; padding:8px 12px; border-radius:10px; background:#F7F3EE; } .pc-cmt { font-size:13.5px; line-height:1.7; color:var(--ink); } .pc-cmt + .pc-cmt { margin-top:2px; } .pc-cmt b { color:var(--wine); font-weight:600; } .pc-more { display:block; margin-top:4px; padding:2px 0; border:0; background:none; color:#7A6A5A; font:inherit; font-size:12.5px; } /* 留言弹层：朋友圈式底部输入 */ .bottom-sheet.comment-sheet { padding:0; border-radius:18px 18px 0 0; overflow:hidden; } .cmt-sheet-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 8px; } .cmt-sheet-head b { font-size:16px; } .cmt-sheet-head span { color:var(--muted); font-size:12px; } .cmt-sheet-list { max-height:44vh; overflow:auto; padding:2px 18px 10px; } .cmt-row { padding:9px 0; font-size:14px; line-height:1.7; border-top:1px solid var(--line); } .cmt-row:first-child { border-top:0; } .cmt-row b { color:var(--wine); font-weight:600; margin-right:5px; } .cmt-row .member-no { margin-right:6px; } .cmt-sheet-input { display:flex; gap:8px; align-items:center; padding:10px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#fff; } .cmt-sheet-input input { flex:1; min-width:0; height:42px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:#FBFAF7; font:inherit; font-size:15px; } .cmt-sheet-input .primary { flex:none; width:auto; min-height:42px; padding:0 20px; border-radius:999px; } /* 记一条 / 修改记录：排版收紧，照片格别撑满一屏 */ .rec-grid.empty { grid-template-columns:1fr; } .rec-grid.empty .rec-add { aspect-ratio:auto; min-height:132px; max-height:160px; } .page-body .rec-text { min-height:118px; max-height:220px; margin:12px 0 4px; padding:13px 14px; font-size:15px; line-height:1.7; } .page-body .rec-grid { margin:12px 0 4px; } .vis-seg.mini { margin:12px 0 4px; } .page-body [data-act="rec-send"] { margin-top:16px; } /* 记录详情：内容留白 + 操作行做成三个小按钮 */ .post-card.detail { padding:4px 0 10px; } .post-card.detail .post-text { margin:10px 0 12px; } .own-actions { display:flex; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); } .own-actions .text-button { flex:1; min-height:38px; display:grid; place-items:center; padding:0 8px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:13px; color:var(--ink); } .own-actions .text-button.danger { color:#9a392f; border-color:#E7CFCB; background:#FCF4F3; } .section-title + .reply-line { margin-top:2px; } /* 攻略留言：头像和名字改成两列（名字在上、日期在下），不再挤在一起 */ .comment-head { align-items:flex-start; gap:12px; min-height:0; } .comment-head .face-wrap { margin-top:1px; } .comment-head .c-meta { flex:1; min-width:0; } .comment-head .c-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:22px; } .comment-head .c-line > b { font-size:15px; line-height:1.4; } .comment-head .c-line .member-no { margin-left:0; } .comment-head time { display:block; margin-top:3px; font-size:12px; color:var(--muted); } .cmt-sheet-input input:focus { outline:none; border-color:var(--wine); box-shadow:0 0 0 2px rgba(122,38,50,.12); } /* ===================== v5fix6（型爷 10-18 第六轮） ===================== */ /* 详情：不要外面那层白框，图片铺满、没有灰底 */ .post-card.detail { background:transparent; border:0; border-radius:0; box-shadow:none; padding:0; } .post-card.detail .pm-grid.one img { width:100%; max-width:100%; height:auto; max-height:72vh; } .pm-grid img { background:transparent; } .pm-grid.one img { background:transparent; } .pm-img { background:transparent; } .pm-grid:not(.one) { width:100%; max-width:420px; } /* 留言头像的字居中 */ .comment-head .c-av { line-height:1; } .comment-head .face-badge { right:-3px; bottom:-2px; width:14px; } /* 兄弟队长徽章别贴到名字上 */ .my-avatar .captain-corner { right:-10px; bottom:4px; width:28px; } .me-slogan { margin-top:8px; } /* v5fix6 补：单图铺满（广场和详情都不留右边空白） */ .pm-grid.one img { width:100%; max-width:100%; height:auto; max-height:72vh; border-radius:10px; } .pm-grid.two { width:100%; max-width:420px; } /* 留言头像和两行名字/日期整体居中 */ .comment-head { align-items:center; } .comment-head .c-meta { padding-top:1px; } /* 徽章再小一点、贴着头像边 */ .my-avatar .captain-corner { right:-6px; bottom:8px; width:24px; } /* ===================== v5fix7（型爷 10-19） ===================== */ /* 叠在上面的一层（记录详情 / 修改记录）：盖住下面的页面，但下面的页面不动 */ .stack-layer { z-index:48; background:transparent; } .stack-layer .page { animation:stack-in .18s ease; } @keyframes stack-in { from { transform:translateX(24px); opacity:.6; } } @media (prefers-reduced-motion: reduce) { .stack-layer .page { animation:none; } } /* 记录广场 = 朋友圈：单图小一点（不再铺满），多图九宫格 */ .mo-card .pm-grid.one img { width:auto; max-width:62%; max-height:220px; height:auto; border-radius:6px; object-fit:cover; cursor:zoom-in; } .mo-card .pm-grid:not(.one) { width:min(100%, 276px); } .mo-card .pm-grid.two { width:min(66%, 184px); } .mo-card .pm-grid img, .post-card.detail .pm-grid img { cursor:zoom-in; } .mo-card .post-actions { margin-top:8px; } .mo-card .pc-likes { margin-top:6px; } .mo-card .pc-cmts { margin-top:4px; } .pc-cmt { padding:2px 4px; margin:0 -4px; border-radius:6px; cursor:pointer; } .pc-cmt:active { background:#EAE2D8; } .pc-more { margin:0 0 2px; } .cmt-row { cursor:pointer; } .cmt-row:active { background:#F3EEE7; } .cmt-row .to { margin:0 4px 0 -1px; color:var(--muted); } /* 图片原地放大：黑底全屏，左右滑看同一条的其他图，轻点缩回 */ .lbx { position:fixed; inset:0; z-index:130; background:rgba(0,0,0,0); transition:background .22s; } .lbx.in { background:rgba(0,0,0,.94); } .lbx.out { background:rgba(0,0,0,0); } .lbx-strip { display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; } .lbx-strip::-webkit-scrollbar { display:none; } .lbx-cell { flex:0 0 100%; height:100%; display:grid; place-items:center; scroll-snap-align:center; } .lbx-cell img { max-width:100%; max-height:100%; object-fit:contain; will-change:transform; } .lbx-dots { position:absolute; left:0; right:0; bottom:calc(24px + env(safe-area-inset-bottom)); display:flex; justify-content:center; gap:6px; } .lbx-dots i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.35); } .lbx-dots i.on { background:#fff; } /* 朋友圈式留言输入条：贴在键盘上面 */ .mo-bar-wrap { position:fixed; inset:0; z-index:125; } .mo-mask { position:absolute; inset:0; background:transparent; } .mo-bar { position:absolute; left:0; right:0; bottom:var(--kb, 0px); width:min(100%, 520px); margin:0 auto; display:flex; gap:8px; align-items:center; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#F7F4EF; box-shadow:0 -6px 18px rgba(31,28,26,.08); } .mo-bar input { flex:1; min-width:0; height:40px; padding:0 14px; border:1px solid var(--line); border-radius:8px; background:#fff; font:inherit; font-size:16px; } .mo-bar input:focus { outline:none; border-color:var(--wine); } .mo-send { flex:none; height:40px; padding:0 16px; border:0; border-radius:8px; background:var(--wine); color:#fff; font:inherit; font-size:14px; font-weight:700; } .mo-send:disabled { background:#CDBFB6; } /* 攻略留言：字母头像看得清、居中；回复行改成一行一行排（头像 + 名字 / 徽章不再叠在一起） */ .comment-head .c-av, .reply .c-av { display:grid; place-items:center; background:var(--deep); color:#F3DFA8; line-height:1; text-align:center; } .comment-head .face-wrap { flex:none; align-self:center; margin-top:0; } .comment-head { align-items:center; } .reply { display:flex; align-items:flex-start; gap:10px; } .reply > .face-wrap { flex:none; margin-top:1px; } .reply .c-av { width:24px; height:24px; font-size:11px; margin:0; } .reply .face-badge { right:-4px; bottom:-3px; width:12px; } .reply .r-body { flex:1; min-width:0; line-height:1.7; overflow-wrap:anywhere; } .reply .r-body .member-no, .reply .r-body .cmt-author { margin:0 2px; vertical-align:1px; } .comment-head .face-badge { right:-4px; bottom:-3px; width:14px; } .comment-head .c-line { gap:6px; } /* 我的起点照 */ .bl-box { display:grid; justify-items:center; gap:10px; margin:6px 0 12px; } .bl-photo { padding:0; border:0; background:none; } .bl-photo img { display:block; max-width:70vw; max-height:52vh; border-radius:12px; object-fit:contain; background:#EEE8DF; } .bl-box small { color:var(--muted); font-size:12px; } .bl-tag { padding:4px 12px; border-radius:999px; font-size:12.5px; font-weight:700; } .bl-tag.ok { background:#EEF6F1; color:#2F6A52; } .bl-tag.wait { background:#F6ECE9; color:var(--wine); } .bl-tag.no { background:#FCF4F3; color:#9A392F; } .sheet-buttons .secondary.danger { color:#9A392F; } /* ===================== 备案号页脚（2026-10-19） ===================== 法规：《非经营性互联网信息服务备案管理办法》第十三条 —— 网站开通时在主页底部 中央位置标明备案编号，并链接到备案管理系统；《互联网信息服务管理办法》第二十二条 对未标明的可处 5000～5 万元罚款。 号：粤ICP备2023093281号-6（型爷俱乐部 waooo.vip，广州市衣型科技有限公司） 页面结构：