[data-template="portal"]{ /* ★配色采用东南亚 SEA「neon noir」令牌(老板 2026-07-15:portal 与 cinema 撞成暖黑+橙 → 换 SEA 那套 token)。中性冷深灰底 + 霓虹品红 primary + 电紫 accent + 金(VIP/金币),与 cinema 暖金影院彻底拉开;保留密集布局+Saira 窄体字身份。 */ --po-bg:#17171C; --po-bg-deep:#101014; --po-surface:#1E1E25; --po-surface-2:#2A2A31; --po-surface-3:#33333C; --po-line:rgba(255,255,255,.09); --po-line-2:rgba(255,255,255,.16); --po-text:#F7F7FA; --po-dim:#BCBCC7; --po-mute:#85858F; --po-primary:#FF2E88; --po-primary-2:#FF4F9C; --po-ink:#FFFFFF; --po-accent:#7C4DFF; --po-gold:#FFC24B; --po-gold-deep:#D99A2F; --po-new:#2FD08A; --po-r-xs:0.1875rem; --po-r-sm:0.3125rem; --po-r-md:0.5rem; --po-r-lg:0.75rem; --po-pill:999px; --po-disp:"Saira Condensed","Noto Sans SC",sans-serif; --po-ui:"Noto Sans SC",system-ui,sans-serif; --po-mono:"Spline Sans Mono",ui-monospace,monospace; /* 通用语义令牌 --cn-*:让共用 SEA 基元(Button/Chip/StateView…)贯穿本模板色; SEA 无 [data-template],故这些 var 在 SEA 恒未定义 → 走基元里的兜底(=SEA 原色)= 零回归。 */ --cn-primary:#FF2E88; --cn-primary-ink:#FFFFFF; --cn-bg:#17171C; --cn-bg-deep:#101014; --cn-surface:#1E1E25; --cn-surface-2:#2A2A31; --cn-text:#F7F7FA; --cn-text-dim:#BCBCC7; --cn-text-faint:#85858F; --cn-line:rgba(255,255,255,.09); --cn-line-2:rgba(255,255,255,.16); --cn-accent:#7C4DFF; --cn-coin:#FFC24B; --cn-danger:#FB5779; --cn-ok:#2FD08A; --cn-radius:0.5rem; --cn-radius-lg:0.75rem; --cn-pill:999px; --cn-nav-active:#FF2E88; /* ★令牌作用域根治(与 candy 同法):重映 SEA 语义 --color-*(通道 RGB)→ 本模板(现即 SEA neon-noir), 让**未令牌化**的共用 SEA 基元/页(AgeGate 18+ 徽标 / VideoCard / StateView / Pager…)在 portal 作用域内解析为本模板色。SEA 无 [data-template] → --color-* 保持 themeCss 兜底(逐字节零回归)。通道类为空格 RGB(供 rgb(var(--color-x)));glass/overlay 为 rgba 直接量。 */ --color-bg:23 23 28; --color-bg-deep:16 16 20; --color-surface:30 30 37; --color-surface-raised:42 42 49; --color-text:247 247 250; --color-text-muted:188 188 199; --color-text-faint:133 133 143; --color-border:36 36 41; --color-skeleton:46 46 56; --color-primary:255 46 136; --color-primary-text:255 255 255; --color-gold:255 194 75; --color-success:47 208 138; --color-warning:251 191 36; --color-danger:251 87 121; --color-info:77 163 255; --color-glass:rgba(28,28,34,.82); --color-overlay:rgba(0,0,0,.78); color:var(--po-text); font-family:var(--po-ui); } /* 占位媒体(密集网格,暖调渐变) */ /* 空封面占位:门户暖调渐变 + 柔光聚光 + 底部压暗(读作"栏目占位"而非网格线) */ [data-template="portal"] .po-ph{ position:relative; overflow:hidden; border-radius:var(--po-r-sm); background:var(--po-surface-2); } [data-template="portal"] .po-ph::before{ content:""; position:absolute; inset:0; background:linear-gradient(150deg,#2b2740,#1f1f29 58%,#17171c); } [data-template="portal"] .po-ph::after{ content:""; position:absolute; inset:0; background:radial-gradient(58% 44% at 50% 36%,color-mix(in srgb,var(--po-primary) 14%,transparent),transparent 60%),linear-gradient(180deg,transparent 60%,rgba(0,0,0,.3)); } [data-template="portal"] .po-ph-mark{ position:absolute; inset:0; z-index:0; display:grid; place-items:center; pointer-events:none; font-family:var(--po-mono); font-weight:800; font-size:2rem; line-height:1; color:color-mix(in srgb,var(--po-primary) 20%,transparent); } /* 有声占位:音频主题渐变 + 声波耳机图标(替代重复品牌首字空壳观感) */ [data-template="portal"] .po-ph-audio{ background:linear-gradient(150deg,color-mix(in srgb,var(--po-accent) 30%,var(--po-surface-2)),var(--po-bg-deep)); } [data-template="portal"] .po-ph-audio-mark{ position:absolute; inset:0; z-index:0; display:grid; place-items:center; pointer-events:none; color:color-mix(in srgb,var(--po-accent) 55%,transparent); } [data-template="portal"] .po-ph-audio-mark svg{ width:38%; max-width:2.75rem; height:auto; } [data-template="portal"] .po-cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; opacity:0; transition:opacity .3s; } [data-template="portal"] .po-cover[data-loaded="1"]{ opacity:1; } /* 密集卡 */ [data-template="portal"] .po-card{ display:block; color:inherit; text-decoration:none; } [data-template="portal"] .po-card .media{ position:relative; height:8.25rem; border-radius:var(--po-r-sm); border:1px solid var(--po-line); overflow:hidden; } [data-template="portal"] .po-card .t{ font-size:0.78125rem; margin-top:0.375rem; font-weight:600; line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } [data-template="portal"] .po-card .m{ font-family:var(--po-mono); font-size:0.625rem; color:var(--po-mute); margin-top:0.25rem; display:flex; align-items:center; gap:0.3125rem; } [data-template="portal"] .po-lock{ position:absolute; z-index:2; bottom:0.3125rem; left:0.3125rem; display:flex; align-items:center; gap:0.1875rem; font-family:var(--po-mono); font-size:0.5625rem; color:var(--po-gold); background:rgba(10,10,14,.66); padding:2px 0.3125rem; border-radius:var(--po-r-xs); } [data-template="portal"] .po-lock svg{ width:0.5rem; height:0.5rem; stroke:var(--po-gold); fill:none; } [data-template="portal"] .po-coin{ color:var(--po-gold); font-weight:600; } [data-template="portal"] .po-free{ color:var(--po-new); font-weight:600; } /* 外壳:响应式(移动=窄体 masthead+底栏 / 桌面=全宽 masthead+side-cards+主区,对 index-pc .masthead + .shell) */ /* flex 列 + body flex:1 撑满:短内容(空态)时 sticky 底栏不再浮在视口中部,恒定到视口底(老板 2026-07-16 H5 整改)。 */ [data-template="portal"] .po-shell{ min-height:100dvh; display:flex; flex-direction:column; background:var(--po-bg); } /* shell 主体(masthead 下方):移动单列;桌面 grid 200px side-cards + main(对 index-pc .shell 窄屏回退列宽, .rail 归 HomeView 自身编排,Shell 通用壳不重造)。移动端由 padding-top 让开 fixed masthead。 */ [data-template="portal"] .po-shell-body{ flex:1 1 auto; padding-top:3.125rem; } /* H5 masthead:fixed 固定滞顶,高度 50px(老板 2026-07-14:44 太矮);内容区由 shell-body padding-top:3.125rem 让开 */ [data-template="portal"] .po-topbar{ position:fixed; top:0; left:0; right:0; z-index:41; box-sizing:border-box; height:3.125rem; display:flex; align-items:center; gap:0.625rem; padding:0 0.875rem; background:rgba(23,23,28,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--po-line); } /* #11 2026-07-20 / 再放大 2026-07-21:移动端 logo/wordmark 仍偏小(老板在 portal 实测反复提),显著放大。 */ [data-template="portal"] .po-topbar .po-brand{ font-size:1.9375rem; } /* gap:0 —— 概念稿 masthead 品牌须显示为整词「NOVA」;flex gap 会把文本节点 "NO" 与 VA 拆成两个 flex item 中间插 6px → 误显「NO VA」。改 gap:0 让字母紧贴,副标(.cn)自带左间距。 */ [data-template="portal"] .po-brand{ display:flex; align-items:baseline; gap:0; font-family:var(--po-disp); font-weight:700; letter-spacing:.02em; font-size:1.375rem; line-height:1; text-decoration:none; color:inherit; flex:0 0 auto; } [data-template="portal"] .po-brand b{ color:var(--po-primary); } [data-template="portal"] .po-brand .cn{ margin-left:0.375rem; font-family:var(--po-ui); font-weight:900; font-size:0.75rem; color:var(--po-dim); letter-spacing:.06em; } /* 主导航(masthead,对 index-pc .topnav)——移动隐,桌面显(见下方 @media 块) */ [data-template="portal"] .po-topnav{ display:none; } /* #17/#18 2026-07-20:移动端容器横向 padding 系统性收紧(16px→12px),更贴边、卡片更饱满。 */ [data-template="portal"] .po-main{ flex:1 1 auto; padding-left:0.75rem; padding-right:0.75rem; min-width:0; } /* 模板自管边距页(首页/列表)满宽回吐;SEA 共用页(搜索/金库/我的)吃两侧留白 */ [data-template="portal"] .po-main > .po-home, [data-template="portal"] .po-main > .po-list, [data-template="portal"] .po-main > .po-detail, [data-template="portal"] .po-main > .po-profile{ margin-left:-0.75rem; margin-right:-0.75rem; } /* ★CN 二级页收窄(老板 2026-07-16:我的/已购/收藏等共用 SEA 组件套进 masthead+侧栏壳后, 表单/列表类窄内容(历史·订单·设置)在宽 main 里被拉成全宽,行内容/表单输入框显得空、不协调)。 .cn-panel-body(MeView 详情面板内容)收进舒适阅读宽度并居中;卡片网格(收藏/已购内的 VideoCard grid) 不套此类、仍走 po-main 全宽多列,不受影响。 */ [data-template="portal"] .cn-panel-body{ max-width:40rem; margin-left:auto; margin-right:auto; } /* min-height 2.5rem(40px):触控目标下限,padding 不够撑高时仍保底部点击热区(视觉胶囊形状不变)。 */ /* #16 2026-07-20 / 再压 2026-07-21:顶部「开通会员」胶囊仍偏大(老板反复提),进一步压高度/内距/字号。 */ [data-template="portal"] .po-loginpill{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-height:1.75rem; box-sizing:border-box; font-size:0.6875rem; font-weight:700; text-decoration:none; font-family:inherit; border:0; cursor:pointer; color:var(--po-ink); background:var(--po-primary); padding:0.1875rem 0.625rem; border-radius:var(--po-pill); } [data-template="portal"] .po-iconbtn{ width:2.75rem; height:2.75rem; border-radius:var(--po-r-md); display:grid; place-items:center; color:var(--po-dim); background:transparent; border:0; flex:0 0 auto; } [data-template="portal"] .po-iconbtn:hover{ color:var(--po-text); background:var(--po-surface-2); } [data-template="portal"] .po-coinpill{ display:inline-flex; align-items:center; gap:0.3125rem; flex:0 0 auto; font-family:var(--po-mono); font-size:0.78125rem; font-weight:600; color:var(--po-gold); background:var(--po-surface-2); border:1px solid var(--po-line-2); padding:0.3125rem 0.625rem 0.3125rem 0.4375rem; border-radius:var(--po-pill); } [data-template="portal"] .po-coinpill .disc{ width:0.8125rem; height:0.8125rem; border-radius:50%; background:radial-gradient(circle at 35% 30%,#F3DA9A,var(--po-gold) 60%,var(--po-gold-deep)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); } /* 头像/我的入口(masthead 右侧,对 index-pc .avatar)——移动隐(底 tab 已有「我的」),桌面显 */ [data-template="portal"] .po-avatar{ display:none; } /* 移动隐:侧栏(桌面 side-cards 见 @media 块) */ [data-template="portal"] .po-sidebar{ display:none; } [data-template="portal"] .po-search-bar{ display:none; } /* 底栏(密集网格) */ /* H5 底栏:固定滞底,高度 50px(老板 2026-07-14:44 太矮)。 align-items:stretch(非 center)让 .po-tab 撑满整条 50px 高,而非按内容折叠成约 31px 的点击热区 (移动端触控目标 §建议 ≥40px;.po-tab 自身 justify-content:center 仍保持图标/文字视觉居中)。 */ [data-template="portal"] .po-tabbar{ position:sticky; bottom:0; z-index:40; display:grid; grid-template-columns:repeat(5,1fr); align-items:stretch; box-sizing:content-box; height:3.125rem; padding-bottom:env(safe-area-inset-bottom); background:var(--po-surface); border-top:1px solid var(--po-line); } [data-template="portal"] .po-tab{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:0; color:var(--po-mute); background:none; border:0; text-decoration:none; } [data-template="portal"] .po-tab svg{ width:1.125rem; height:1.125rem; stroke:currentColor; fill:none; stroke-width:1.7; } [data-template="portal"] .po-tab span{ font-size:0.75rem; font-weight:500; line-height:1; } [data-template="portal"] .po-tab[aria-current="page"]{ color:var(--po-primary); } /* 解锁弹层 */ [data-template="portal"] .po-scrim{ position:fixed; inset:0; z-index:60; background:rgba(10,10,14,.72); } [data-template="portal"] .po-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:61; margin:0 auto; max-width:35rem; background:var(--po-surface); border-top:1px solid var(--po-line-2); border-radius:0.875rem 0.875rem 0 0; padding:0.625rem 1rem calc(1.125rem + env(safe-area-inset-bottom)); } [data-template="portal"] .po-sheet .grip{ width:2.375rem; height:0.25rem; border-radius:2px; background:var(--po-line-2); margin:0 auto 0.75rem; } [data-template="portal"] .po-sheet h3{ font-family:var(--po-disp); font-weight:700; font-size:1.25rem; } [data-template="portal"] .po-sheet .sub{ color:var(--po-dim); font-size:0.78125rem; margin-top:0.1875rem; } [data-template="portal"] .po-bal{ display:flex; align-items:center; justify-content:space-between; padding:0.75rem 2px; border-top:1px dashed var(--po-line-2); border-bottom:1px dashed var(--po-line-2); margin:0.875rem 0; } [data-template="portal"] .po-bal .l{ color:var(--po-dim); font-size:0.78125rem; } [data-template="portal"] .po-bal b{ font-family:var(--po-mono); color:var(--po-gold); font-size:1.0625rem; font-weight:600; } /* 按钮 */ [data-template="portal"] .po-cta{ display:flex; gap:0.5rem; } [data-template="portal"] .po-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:0.375rem; font-size:0.875rem; font-weight:700; height:2.875rem; min-height:2.875rem; border:0; border-radius:var(--po-r-md); cursor:pointer; transition:background .16s,transform .1s; } /* #17 2026-07-21:登录 modal「登录」按钮曾比输入框矮——.po-btn{flex:1} 在列向表单里 flex-basis 压 0、 height 被覆盖塌成内容高。min-height 不受 flex-basis 压缩 → 按钮恒 = 输入框高。 */ [data-template="portal"] .po-btn:active{ transform:scale(.98); } /* #46 2026-07-21:键盘焦点环统一本模板**品红**(禁浏览器默认蓝)——modal 关闭X/返回、tab、按钮、链接、输入框全覆盖;cnx-* 内容卡自带贴合焦点环,排除避免双环。 */ [data-template="portal"] button:focus-visible, [data-template="portal"] a:not(.cnx-card):focus-visible, [data-template="portal"] input:focus-visible, [data-template="portal"] select:focus-visible, [data-template="portal"] textarea:focus-visible{ outline:2px solid var(--po-primary); outline-offset:2px; } [data-template="portal"] .po-btn-primary{ background:var(--po-primary); color:var(--po-ink); } [data-template="portal"] .po-btn-primary:hover{ background:var(--po-primary-2); } [data-template="portal"] .po-btn-ghost{ flex:0 0 auto; padding:0 1rem; background:var(--po-surface-2); color:var(--po-text); border:1px solid var(--po-line-2); } /* 三态 */ [data-template="portal"] .po-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.625rem; padding:3rem 1.25rem; text-align:center; } /* 列表页空/错态撑满可视高度(减去 masthead+底栏),避免空态文案挤在顶部、底栏浮中间(老板 2026-07-16 H5 整改)。 */ [data-template="portal"] .po-list > .po-state{ min-height:calc(100dvh - 14rem); } [data-template="portal"] .po-state .ttl{ font-family:var(--po-disp); font-weight:700; font-size:1.125rem; } [data-template="portal"] .po-state .sub{ color:var(--po-dim); font-size:0.78125rem; max-width:16.25rem; } [data-template="portal"] .po-state .retry{ font-family:var(--po-mono); font-size:0.75rem; color:var(--po-primary); border:1px solid var(--po-line-2); border-radius:var(--po-r-md); padding:0.4375rem 1rem; background:none; cursor:pointer; } [data-template="portal"] .po-spin{ width:1.875rem; height:1.875rem; border-radius:50%; border:2px solid var(--po-line-2); border-top-color:var(--po-primary); animation:po-spin .8s linear infinite; } @keyframes po-spin{ to{ transform:rotate(360deg); } } /* 占位比例(应用于 .po-ph;.po-cover 绝对定位填充) */ [data-template="portal"] .ratio-169{ aspect-ratio:16/9; } [data-template="portal"] .ratio-1610{ aspect-ratio:16/10; } [data-template="portal"] .ratio-34{ aspect-ratio:3/4; } /* 占位叠加层:类型角标 / 时长 / 播放键(概念 B .ph 内叠层) */ [data-template="portal"] .po-tagc{ position:absolute; z-index:2; top:0.3125rem; left:0.3125rem; font-family:var(--po-mono); font-size:0.5625rem; font-weight:600; letter-spacing:.06em; padding:2px 0.3125rem; border-radius:var(--po-r-xs); background:rgba(16,16,20,.72); color:var(--po-dim); } /* ===== 首页(概念 B 门户密集「情报站」)===== */ [data-template="portal"] .po-home{ padding-bottom:1.125rem; } /* 首页 Hero(R-020:顶部主视觉 16:9 精选大图 + 金色 kicker + 窄体标题 + 品红 CTA 胶囊; 替换原「孤零内容类型入口框」占顶位;门户密集语汇,与 cinema/candy 各自独立)。 */ [data-template="portal"] .po-hero{ position:relative; display:block; margin:0.75rem 0.75rem 0; color:inherit; text-decoration:none; } [data-template="portal"] .po-hero .po-ph{ border-radius:var(--po-r-lg); border:1px solid var(--po-line-2); } [data-template="portal"] .po-hero-scrim{ position:absolute; z-index:2; inset:0; border-radius:var(--po-r-lg); background:linear-gradient(180deg,rgba(16,16,20,0) 30%,rgba(16,16,20,.5) 62%,rgba(16,16,20,.92)); } [data-template="portal"] .po-hero-body{ position:absolute; z-index:3; left:1rem; right:1rem; bottom:0.9375rem; } [data-template="portal"] .po-hero-kicker{ display:inline-flex; align-items:center; gap:0.375rem; font-family:var(--po-mono); font-size:0.625rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--po-gold); } [data-template="portal"] .po-hero-kicker .dot{ width:0.375rem; height:0.375rem; border-radius:50%; background:var(--po-gold); box-shadow:0 0 0 3px rgba(255,194,75,.2); } [data-template="portal"] .po-hero-title{ font-family:var(--po-disp); font-weight:700; font-size:clamp(1.25rem,5.6vw,1.625rem); letter-spacing:.01em; line-height:1.18; margin-top:0.4375rem; color:var(--po-text); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } [data-template="portal"] .po-hero-row{ display:flex; align-items:center; gap:0.5rem; margin-top:0.6875rem; flex-wrap:wrap; } [data-template="portal"] .po-hero-tag{ font-family:var(--po-mono); font-size:0.59375rem; font-weight:600; letter-spacing:.06em; padding:0.15625rem 0.4375rem; border-radius:var(--po-r-xs); color:var(--po-primary); background:rgba(255,46,136,.14); border:1px solid rgba(255,46,136,.34); } [data-template="portal"] .po-hero-views{ font-family:var(--po-mono); font-size:0.625rem; color:var(--po-dim); } [data-template="portal"] .po-hero-cta{ margin-left:auto; display:inline-flex; align-items:center; gap:0.25rem; font-size:0.8125rem; font-weight:700; color:var(--po-ink); background:var(--po-primary); border-radius:var(--po-pill); padding:0.4375rem 0.9375rem; } [data-template="portal"] .po-hero-cta svg{ width:0.75rem; height:0.75rem; stroke:currentColor; } [data-template="portal"] .po-hero-play{ position:absolute; z-index:3; inset:0; margin:auto; width:3.25rem; height:3.25rem; border-radius:50%; background:rgba(23,23,28,.5); border:1px solid var(--po-line-2); display:grid; place-items:center; color:#fff; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } [data-template="portal"] .po-hero-play svg{ width:1.375rem; height:1.375rem; margin-left:2px; } [data-template="portal"] .po-hero-lockbadge{ position:absolute; z-index:3; top:0.625rem; right:0.625rem; display:inline-flex; align-items:center; gap:0.25rem; font-family:var(--po-mono); font-size:0.59375rem; color:var(--po-gold); background:rgba(10,10,14,.66); border:1px solid rgba(255,194,75,.3); padding:0.25rem 0.5rem; border-radius:var(--po-pill); } [data-template="portal"] .po-hero-lockbadge svg{ width:0.6875rem; height:0.6875rem; stroke:var(--po-gold); fill:none; } /* Hero 轮播(R-028:最热门视频 ≥5 张;wrapper 持外边距+圆角+裁剪,slide 复用 .po-hero;圆点 top-center 不压 body)。 */ [data-template="portal"] .po-hero-carousel{ position:relative; margin:0.75rem 0.75rem 0; border-radius:var(--po-r-lg); overflow:hidden; border:1px solid var(--po-line-2); } [data-template="portal"] .po-hero-track{ display:flex; transition:transform .5s cubic-bezier(.22,1,.36,1); } [data-template="portal"] .po-hero-track .po-hero{ flex:0 0 100%; min-width:0; margin:0; } [data-template="portal"] .po-hero-track .po-hero .po-ph{ border-radius:0; border:0; } [data-template="portal"] .po-hero-dots{ position:absolute; z-index:4; left:0; right:0; top:0.625rem; display:flex; align-items:center; justify-content:center; gap:0.375rem; pointer-events:none; } [data-template="portal"] .po-hero-dot{ position:relative; pointer-events:auto; width:0.4375rem; height:0.4375rem; padding:0; border:0; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.4); box-shadow:0 0 0 1px rgba(0,0,0,.3); transition:width .2s,background .2s; } /* ★无障碍(WCAG 2.2 2.5.8 Target Size Minimum):可视圆点仅 7×7px,远低于 24×24 最小触控目标——用 ::before 伪元素在原地扩出 ≥24×24 的透明命中区(伪元素落在按钮盒内的点击天然算作按钮被点), 视觉大小不变(不破坏原设计密度),只扩大可点/可触区。 */ [data-template="portal"] .po-hero-dot::before{ content:''; position:absolute; inset:50%; width:1.5rem; height:1.5rem; transform:translate(-50%,-50%); } [data-template="portal"] .po-hero-dot.on{ width:1.125rem; border-radius:var(--po-pill); background:var(--po-primary); } [data-template="portal"] .po-hero-dot:focus-visible{ outline:1.5px solid var(--po-primary); outline-offset:2px; } /* 内容类型入口(老板 2026-07-18:视频/漫画/有声三入口等宽并排;3 列网格,H5/PC 均三格; minmax(0,1fr) 防长文案撑爆列宽)。 */ [data-template="portal"] .po-entries{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.5rem; padding:0.75rem; border-bottom:1px solid var(--po-line); } /* #37 2026-07-20:首页视频/漫画/有声快捷入口卡偏高,压扁到合理高度。 */ [data-template="portal"] .po-entry{ position:relative; width:auto; display:flex; align-items:center; gap:0.4375rem; padding:0.5rem 0.625rem; background:var(--po-surface); border:1px solid var(--po-line); border-radius:var(--po-r-md); color:var(--po-text); text-decoration:none; transition:border-color .15s, background .15s; } [data-template="portal"] .po-entry:hover{ border-color:var(--po-primary); background:var(--po-surface-2); } [data-template="portal"] .po-entry-ic{ flex:0 0 auto; display:grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:var(--po-r-sm); background:rgba(124,77,255,.12); color:var(--po-primary); } [data-template="portal"] .po-entry-ic svg{ width:0.9375rem; height:0.9375rem; } [data-template="portal"] .po-entry-t{ flex:1; min-width:0; font-size:0.84375rem; font-weight:700; letter-spacing:.02em; white-space:nowrap; } [data-template="portal"] .po-entry-go{ flex:0 0 auto; display:flex; color:var(--po-mute); } [data-template="portal"] .po-entry-go svg{ width:0.75rem; height:0.75rem; } /* 实时情报条 ticker */ [data-template="portal"] .po-ticker{ display:flex; align-items:center; gap:0.5rem; background:var(--po-surface); border-bottom:1px solid var(--po-line); padding:0.3125rem 0.625rem; overflow:hidden; } [data-template="portal"] .po-ticker .lab{ flex:0 0 auto; font-family:var(--po-mono); font-size:0.59375rem; letter-spacing:.12em; color:var(--po-accent); border:1px solid rgba(124,77,255,.5); border-radius:var(--po-r-xs); padding:2px 0.3125rem; font-weight:600; } [data-template="portal"] .po-ticker .track{ flex:1; min-width:0; overflow:hidden; white-space:nowrap; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 92%,transparent); } [data-template="portal"] .po-ticker .track span{ display:inline-block; font-family:var(--po-mono); font-size:0.6875rem; color:var(--po-dim); padding-left:100%; animation:po-marq 24s linear infinite; } @keyframes po-marq{ to{ transform:translateX(-100%); } } /* 编号栏目头 */ [data-template="portal"] .po-sec{ padding:0.875rem 0.75rem 0.25rem; } [data-template="portal"] .po-sec-hd{ display:flex; align-items:center; gap:0.5625rem; margin-bottom:0.625rem; } [data-template="portal"] .po-sec-idx{ font-family:var(--po-mono); font-size:0.6875rem; font-weight:600; letter-spacing:.05em; color:var(--po-primary); } [data-template="portal"] .po-sec-ttl{ font-weight:900; font-size:1rem; letter-spacing:.02em; } [data-template="portal"] .po-sec-rule{ flex:1; height:1px; background:var(--po-line-2); } /* 实时热榜 rank 列表 */ [data-template="portal"] .po-rank{ display:flex; flex-direction:column; gap:1px; background:var(--po-line); border-radius:var(--po-r-md); overflow:hidden; } [data-template="portal"] .po-rk{ display:flex; align-items:center; gap:0.5625rem; padding:0.5rem 0.5625rem; background:var(--po-surface); color:inherit; text-decoration:none; } [data-template="portal"] .po-rk:hover{ background:var(--po-surface-2); } [data-template="portal"] .po-rk-no{ flex:0 0 auto; width:1.375rem; text-align:center; font-family:var(--po-disp); font-weight:700; font-size:1.1875rem; line-height:1; color:var(--po-mute); } [data-template="portal"] .po-rk.top .po-rk-no{ color:var(--po-accent); } [data-template="portal"] .po-rk-th{ flex:0 0 auto; width:3.75rem; } [data-template="portal"] .po-rk-th .po-ph{ border-radius:var(--po-r-xs); } [data-template="portal"] .po-rk-body{ flex:1; min-width:0; } [data-template="portal"] .po-rk-t{ font-size:0.78125rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } [data-template="portal"] .po-rk-m{ display:flex; align-items:center; gap:0.375rem; margin-top:0.25rem; font-family:var(--po-mono); font-size:0.59375rem; color:var(--po-mute); white-space:nowrap; overflow:hidden; } /* 热度分(对概念B .rk .rm .hot——真 views 派生,非伪造涨幅,见 HomeView heatScore) */ [data-template="portal"] .po-rk-m .hot{ color:var(--po-accent); font-weight:600; flex:0 0 auto; } [data-template="portal"] .po-rk-badge{ flex:0 0 auto; font-family:var(--po-mono); font-size:0.5625rem; font-weight:600; padding:2px 0.3125rem; border-radius:var(--po-r-xs); } [data-template="portal"] .po-rk-badge.b-vip{ color:var(--po-gold); background:rgba(255,194,75,.12); border:1px solid rgba(255,194,75,.3); } [data-template="portal"] .po-rk-badge.b-hot{ color:var(--po-accent); background:rgba(124,77,255,.12); border:1px solid rgba(124,77,255,.32); } /* 大类列表页(标题 + mono 频道 kicker + 分段筛选) */ [data-template="portal"] .po-list{ padding:0.875rem 0.75rem 1.375rem; } [data-template="portal"] .po-list-head{ display:flex; flex-direction:column; gap:0.6875rem; margin-bottom:0.8125rem; } [data-template="portal"] .po-list-heading{ display:flex; align-items:baseline; gap:0.5rem; min-width:0; } [data-template="portal"] .po-list-title{ font-size:1.25rem; font-weight:900; letter-spacing:.01em; color:var(--po-text); line-height:1.2; } [data-template="portal"] .po-list-kicker{ font-family:var(--po-mono); font-size:0.625rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--po-mute); white-space:nowrap; } /* 分段筛选(对 index-pc .filterrow .seg:暗底 mono 分段,而非撞色 pill——门户「情报台」签名) */ [data-template="portal"] .po-list-filters{ display:inline-flex; align-items:center; gap:2px; padding:2px; max-width:100%; background:var(--po-bg-deep); border:1px solid var(--po-line); border-radius:var(--po-r-md); overflow-x:auto; scrollbar-width:none; } [data-template="portal"] .po-list-filters::-webkit-scrollbar{ display:none; } [data-template="portal"] .po-fseg{ flex:0 0 auto; font-family:var(--po-mono); font-size:0.6875rem; font-weight:500; letter-spacing:.02em; white-space:nowrap; padding:0.3125rem 0.625rem; border-radius:calc(var(--po-r-md) - 2px); color:var(--po-mute); background:none; border:0; cursor:pointer; transition:color .15s,background .15s; } [data-template="portal"] .po-fseg:hover{ color:var(--po-text); } [data-template="portal"] .po-fseg.on{ color:var(--po-primary); background:var(--po-surface-3); font-weight:700; } [data-template="portal"] .po-fseg:focus-visible{ outline:1.5px solid var(--po-primary); outline-offset:1px; } /* 真实子分类 chips(R-024,老板 2026-07-16:手机端 grid 每行 5 个等宽,不留参差残行;PC 见 @media 恢复 flex 自适应)。等宽格内 flex 居中,长名换行仍列对齐;圆形 pill,对 index-pc side-chip 手法但独立命名。 */ /* 子分类 chips(可达 ~130 条)折叠为**单行横滑**——禁多行平铺把内容顶到几屏外(R-P4-05,老板 2026-07-17)。 nowrap + overflow-x 单行滑动;chip 不收缩(flex:0 0 auto)保原宽,长名不换行不截断;隐藏滚动条(移动/桌面同)。 */ [data-template="portal"] .po-list-cats{ display:flex; flex-wrap:nowrap; gap:0.375rem; margin:-0.25rem 0 0.9375rem; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } [data-template="portal"] .po-list-cats::-webkit-scrollbar{ display:none; } [data-template="portal"] .po-catchip{ display:flex; align-items:center; justify-content:center; text-align:center; flex:0 0 auto; white-space:nowrap; font-family:var(--po-ui); font-size:0.75rem; font-weight:600; color:var(--po-dim); background:var(--po-surface-2); border:1px solid var(--po-line); border-radius:var(--po-pill); padding:0.375rem 0.75rem; cursor:pointer; transition:border-color .15s,color .15s,background .15s; } [data-template="portal"] .po-catchip:hover{ border-color:var(--po-line-2); color:var(--po-text); } [data-template="portal"] .po-catchip.on{ color:var(--po-ink); background:var(--po-primary); border-color:var(--po-primary); font-weight:700; } [data-template="portal"] .po-catchip:focus-visible{ outline:1.5px solid var(--po-primary); outline-offset:1px; } /* 加载更多(后端分页,对 CnPagedGrid UX 但样式走 portal 自己的 po-* 语汇) */ [data-template="portal"] .po-loadmore{ display:flex; justify-content:center; padding:1.375rem 0 0.25rem; } [data-template="portal"] .po-loadmore-btn{ font-family:var(--po-mono); font-size:0.75rem; font-weight:700; letter-spacing:.02em; color:var(--po-text); background:var(--po-surface-2); border:1px solid var(--po-line-2); border-radius:var(--po-pill); padding:0.5625rem 1.625rem; cursor:pointer; transition:border-color .15s,color .15s; } [data-template="portal"] .po-loadmore-btn:hover{ border-color:var(--po-primary); color:var(--po-primary); } [data-template="portal"] .po-loadmore-btn:disabled{ opacity:.6; cursor:default; } [data-template="portal"] .po-loadmore-btn.is-err{ color:#FF95AC; border-color:rgba(251,87,121,.4); } [data-template="portal"] .po-loadmore-btn.is-err:hover{ border-color:#FF95AC; } /* ===== 详情页(概念 B 屏02)===== */ [data-template="portal"] .po-detail{ padding-bottom:1.125rem; } [data-template="portal"] .po-dhero{ position:relative; } [data-template="portal"] .po-dback{ position:absolute; top:.75rem; left:.75rem; z-index:5; display:inline-flex; align-items:center; gap:.25rem; height:2rem; padding:0 .75rem 0 .5rem; border-radius:999px; background:rgba(10,10,14,.66); color:#fff; font-size:.8rem; backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14); cursor:pointer; } [data-template="portal"] .po-dback:hover{ background:rgba(10,10,14,.85); } [data-template="portal"] .po-dplayer{ width:100%; border-radius:.75rem; overflow:hidden; background:#000; } [data-template="portal"] .po-dplayer > *{ margin-top:0 !important; } /* 阅读器模式(漫画/有声):内容体=章节/集目录,非视频——去黑底/去 16:9 锁,自适应高度直接展示目录。顶部留白让「章节目录」标题避开常驻「返回」浮层(top .75rem + 2rem 高)。 */ [data-template="portal"] .po-dplayer.is-reader{ background:transparent; border-radius:0; overflow:visible; padding-top:2.75rem; } [data-template="portal"] .po-dhero .po-ph{ border-radius:0; } [data-template="portal"] .po-back{ position:absolute; z-index:3; top:0.625rem; left:0.625rem; width:2rem; height:2rem; border-radius:50%; background:rgba(16,16,20,.6); border:1px solid var(--po-line); display:grid; place-items:center; color:var(--po-text); } [data-template="portal"] .po-back svg{ width:0.9375rem; height:0.9375rem; fill:none; stroke:currentColor; stroke-width:2; } [data-template="portal"] .po-bigplay{ position:absolute; z-index:3; inset:0; margin:auto; width:3.5rem; height:3.5rem; border-radius:50%; background:var(--po-primary); color:var(--po-ink); display:grid; place-items:center; box-shadow:0 8px 30px -6px rgba(255,46,136,.6); } [data-template="portal"] .po-bigplay svg{ width:1.375rem; height:1.375rem; margin-left:0.1875rem; } [data-template="portal"] .po-preview{ position:absolute; z-index:3; bottom:0.625rem; left:0.625rem; font-family:var(--po-mono); font-size:0.625rem; color:var(--po-text); background:rgba(16,16,20,.7); border:1px solid var(--po-line); border-radius:var(--po-r-xs); padding:0.1875rem 0.4375rem; } [data-template="portal"] .po-dbody{ padding:0.75rem; } [data-template="portal"] .po-dtitle{ font-size:1.0625rem; font-weight:900; line-height:1.35; letter-spacing:.01em; } /* reader(漫画/有声)标题置于章节网格之上:让开顶部返回条 + 与阅读器留一致间距,去多余空白。 */ [data-template="portal"] .po-dtitle-top{ padding:0.875rem 1rem 0.625rem; } @media (min-width:1024px){ [data-template="portal"] .po-dtitle-top{ padding:1.25rem 0 0.75rem; } } [data-template="portal"] .po-dbadges{ display:flex; flex-wrap:wrap; gap:0.375rem; margin-top:0.5625rem; } [data-template="portal"] .po-badge{ font-family:var(--po-mono); font-size:0.59375rem; font-weight:600; padding:0.15625rem 0.375rem; border-radius:var(--po-r-xs); color:var(--po-dim); background:var(--po-surface-2); border:1px solid var(--po-line); } [data-template="portal"] .po-badge.b-type{ color:var(--po-primary); background:rgba(255,46,136,.12); border-color:rgba(255,46,136,.34); } [data-template="portal"] .po-badge.b-vip{ color:var(--po-gold); background:rgba(255,194,75,.12); border-color:rgba(255,194,75,.3); } [data-template="portal"] .po-dstats{ display:grid; gap:1px; margin-top:0.75rem; background:var(--po-line); border:1px solid var(--po-line); border-radius:var(--po-r-md); overflow:hidden; } [data-template="portal"] .po-dstat{ background:var(--po-surface); padding:0.5625rem 0.375rem; text-align:center; } [data-template="portal"] .po-dstat .v{ font-family:var(--po-mono); font-size:0.875rem; font-weight:600; color:var(--po-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } [data-template="portal"] .po-dstat .v.acc{ color:var(--po-primary); } [data-template="portal"] .po-dactions{ display:flex; gap:0.5rem; margin-top:0.75rem; } [data-template="portal"] .po-btn-primary .price{ font-family:var(--po-mono); } [data-template="portal"] .po-dunlock{ width:100%; display:flex; align-items:center; gap:0.625rem; text-align:left; margin-top:0.75rem; padding:0.6875rem 0.75rem; background:linear-gradient(180deg,var(--po-surface-2),var(--po-surface)); border:1px solid rgba(255,194,75,.28); border-radius:var(--po-r-md); cursor:pointer; } [data-template="portal"] .po-dunlock .ic{ flex:0 0 auto; width:2rem; height:2rem; border-radius:var(--po-r-sm); background:rgba(255,194,75,.12); display:grid; place-items:center; } [data-template="portal"] .po-dunlock .ic svg{ width:1rem; height:1rem; fill:none; stroke:var(--po-gold); stroke-width:1.8; } [data-template="portal"] .po-dunlock .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } [data-template="portal"] .po-dunlock .t1{ font-size:0.78125rem; font-weight:700; color:var(--po-text); } [data-template="portal"] .po-dunlock .t2{ font-family:var(--po-mono); font-size:0.625rem; color:var(--po-mute); } [data-template="portal"] .po-dunlock .price{ flex:0 0 auto; font-family:var(--po-mono); font-weight:600; font-size:0.9375rem; color:var(--po-gold); } [data-template="portal"] .po-desc{ color:var(--po-dim); font-size:0.8125rem; line-height:1.7; margin-top:1rem; } [data-template="portal"] .po-subhead{ display:flex; align-items:baseline; gap:0.5rem; margin:1.125rem 0 0.625rem; } [data-template="portal"] .po-subhead .st{ font-size:0.875rem; font-weight:900; } [data-template="portal"] .po-subhead .sc{ font-family:var(--po-mono); font-size:0.625rem; color:var(--po-mute); } [data-template="portal"] .po-subhead .sr{ flex:1; height:1px; background:var(--po-line); } /* ===== 漫画/有声阅读器详情(封面 hero + 章节目录;补齐原「只章节格子」空荡感,老板 2026-07-18)===== */ [data-template="portal"] .po-rtop{ padding:0.75rem 0.75rem 0; } [data-template="portal"] .po-rtop .po-dback{ position:static; } [data-template="portal"] .po-rhero{ display:flex; gap:0.875rem; padding:0.75rem; align-items:flex-start; } [data-template="portal"] .po-rhero-cover{ flex:0 0 8rem; width:8rem; } [data-template="portal"] .po-rhero-cover .po-ph{ border-radius:var(--po-r-lg); border:1px solid var(--po-line-2); box-shadow:0 10px 28px -14px rgba(0,0,0,.7); } [data-template="portal"] .po-rhero-info{ flex:1; min-width:0; display:flex; flex-direction:column; } [data-template="portal"] .po-rhero-info .po-desc{ margin-top:0.625rem; } [data-template="portal"] .po-rbody{ padding:0 0.75rem; } @media (min-width:1024px){ [data-template="portal"] .po-rtop{ padding:1rem 0 0; } [data-template="portal"] .po-rhero{ padding:0.625rem 0 1.125rem; gap:1.5rem; } [data-template="portal"] .po-rhero-cover{ flex:0 0 12.5rem; width:12.5rem; } [data-template="portal"] .po-rhero-info .po-dtitle{ font-size:1.5rem; } [data-template="portal"] .po-rbody{ padding:0; } } /* 宽屏右栏(对 index-pc .dside):移动隐(内容已在 dbody 徽标/数据面板/解锁条展示),PC 见下方 @media 块 */ [data-template="portal"] .po-dside{ display:none; } /* PC 宽屏:全宽 masthead + side-cards(卡片式,非全高侧栏)+ 主区(概念 B 门户密集 index-pc,非拉伸) */ @media (min-width:1024px){ /* masthead:全宽 sticky,品牌 + 主导航 + 搜索 + 客服/会员 + 头像(对 index-pc .masthead .mh-inner) */ [data-template="portal"] .po-topbar{ height:auto; padding:0.875rem 1.5rem; position:sticky; top:0; z-index:40; background:rgba(23,23,28,.9); backdrop-filter:blur(8px); } [data-template="portal"] .po-topbar .po-brand{ font-size:1.625rem; } [data-template="portal"] .po-topnav{ display:flex; align-items:center; gap:2px; flex:0 0 auto; } [data-template="portal"] .po-topnav-item{ position:relative; padding:0.5rem 0.8125rem; font-size:0.9375rem; font-weight:500; color:var(--po-dim); text-decoration:none; border-radius:var(--po-r-sm); transition:.15s; } [data-template="portal"] .po-topnav-item:hover{ color:var(--po-text); background:var(--po-surface-2); } [data-template="portal"] .po-topnav-item.on{ color:var(--po-text); font-weight:700; } [data-template="portal"] .po-topnav-item.on::after{ content:""; position:absolute; left:0.8125rem; right:0.8125rem; bottom:-0.0625rem; height:0.15625rem; border-radius:2px; background:var(--po-primary); } [data-template="portal"] .po-search-btn{ display:none; } [data-template="portal"] .po-search-bar{ display:flex; align-items:center; gap:0.5625rem; flex:1; max-width:24rem; background:var(--po-surface-2); border:1px solid var(--po-line-2); border-radius:var(--po-r-md); padding:0.5625rem 0.8125rem; color:var(--po-mute); text-decoration:none; } [data-template="portal"] .po-search-bar .ph{ font-size:0.84375rem; } [data-template="portal"] .po-avatar{ display:flex; align-items:center; justify-content:center; width:2.125rem; height:2.125rem; border-radius:50%; flex:0 0 auto; background:linear-gradient(135deg,var(--po-surface-3),var(--po-bg-deep)); border:1px solid var(--po-line-2); color:var(--po-dim); transition:.15s; } [data-template="portal"] .po-avatar:hover{ color:var(--po-text); border-color:var(--po-line-2); background:var(--po-surface-2); } [data-template="portal"] .po-avatar svg{ width:1.125rem; height:1.125rem; } /* shell 主体:grid 200px side-cards + main(对 index-pc .shell 窄屏回退列宽;.rail 归 HomeView 自身编排) */ [data-template="portal"] .po-shell-body{ display:grid; grid-template-columns:12.5rem minmax(0,1fr); gap:1.5rem; align-items:start; max-width:90rem; margin:0 auto; padding-top:1.25rem; } /* side-cards:卡片式侧栏(非全高),sticky 跟随滚动但不顶满视口(对 index-pc .side position:sticky;top:76px) */ [data-template="portal"] .po-sidebar{ display:flex; flex-direction:column; gap:0.875rem; margin-left:1.5rem; position:sticky; top:4.75rem; max-height:calc(100dvh - 5.5rem); overflow-y:auto; } [data-template="portal"] .po-side-card{ background:var(--po-surface); border:1px solid var(--po-line); border-radius:var(--po-r-lg); padding:0.75rem; flex:0 0 auto; } [data-template="portal"] .po-side-h{ font-family:var(--po-mono); font-size:0.65625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--po-mute); padding:0 0.25rem 0.5625rem; } [data-template="portal"] .po-side-nav{ display:flex; flex-direction:column; gap:1px; } [data-template="portal"] .po-side-item{ display:flex; align-items:center; gap:0.5625rem; padding:0.5rem 0.6875rem; border-radius:var(--po-r-md); color:var(--po-dim); text-decoration:none; font-size:0.84375rem; font-weight:500; transition:.14s; } [data-template="portal"] .po-side-item svg{ width:1.125rem; height:1.125rem; flex:0 0 auto; } [data-template="portal"] .po-side-item:hover{ background:var(--po-surface-2); color:var(--po-text); } [data-template="portal"] .po-side-item.on{ background:rgba(255,46,136,.12); color:var(--po-primary); font-weight:700; } [data-template="portal"] .po-side-item.on svg{ stroke:var(--po-primary); } [data-template="portal"] .po-side-chips{ display:flex; flex-wrap:wrap; gap:0.375rem; } [data-template="portal"] .po-side-chip{ font-size:0.75rem; font-weight:500; color:var(--po-dim); background:var(--po-surface-2); border:1px solid var(--po-line); border-radius:var(--po-pill); padding:0.3125rem 0.6875rem; text-decoration:none; transition:.15s; } [data-template="portal"] .po-side-chip:hover{ border-color:var(--po-line-2); color:var(--po-text); } [data-template="portal"] .po-side-chip.on{ color:var(--po-primary); border-color:var(--po-primary); background:rgba(255,46,136,.1); } [data-template="portal"] .po-main{ padding-left:0; padding-right:0; } /* ★老板 2026-07-18 修复宽屏横向溢出:.po-main 在 PC 已把左右 padding 归零,但下方 -1rem 负 margin (基础规则,为抵消 H5 16px padding 做满宽出血)在 PC 未跟着归零,导致 .po-list/.po-home 等仍向两侧多出血 16px——之前被 .po-shell-body 84rem 早封顶产生的两侧留白悄悄吸收未暴露,提到 100rem 限宽后 (1024–1600px 视口现不封顶)该溢出直接顶穿页面右边界(scrollWidth>clientWidth)。PC 一并归零。 */ [data-template="portal"] .po-main > .po-home, [data-template="portal"] .po-main > .po-list, [data-template="portal"] .po-main > .po-detail, [data-template="portal"] .po-main > .po-profile{ margin-left:0; margin-right:0; } [data-template="portal"] .po-card .media{ height:9.375rem; } [data-template="portal"] .po-tabbar{ display:none; } /* 首页 PC:Hero 轮播加高为影院级横幅(定高非拉伸),对齐 side-cards 后留白;外边距归 carousel wrapper。 */ [data-template="portal"] .po-hero-carousel{ margin:1.25rem 1.5rem 0; } [data-template="portal"] .po-hero .po-ph{ aspect-ratio:auto; height:22rem; } [data-template="portal"] .po-hero-body{ left:1.75rem; right:1.75rem; bottom:1.5rem; } [data-template="portal"] .po-hero-title{ font-size:2rem; } [data-template="portal"] .po-hero-cta{ font-size:0.875rem; padding:0.5rem 1.125rem; } /* 首页 PC:「视频 | 漫画 | 有声」三入口等宽并排,左对齐(每格封顶 19rem,不拉伸满宽) */ [data-template="portal"] .po-entries{ grid-template-columns:repeat(3,minmax(0,19rem)); justify-content:start; padding:1rem 1.5rem 0.5rem; gap:0.75rem; } [data-template="portal"] .po-entry{ width:auto; } [data-template="portal"] .po-ticker{ border-radius:var(--po-r-md); margin:0.875rem 1.5rem 0; } [data-template="portal"] .po-sec{ padding:1.625rem 1.5rem 0; } [data-template="portal"] .po-sec-ttl{ font-size:1.1875rem; } [data-template="portal"] .po-list{ padding:1.5rem 1.5rem 1.875rem; } [data-template="portal"] .po-list-head{ flex-direction:row; align-items:center; justify-content:space-between; margin-bottom:1.125rem; } [data-template="portal"] .po-list-title{ font-size:1.625rem; } /* R-P4-05:PC 也保持单行横滑(不 wrap 成多行),chip padding 稍宽。 */ [data-template="portal"] .po-catchip{ padding:0.375rem 0.875rem; } /* 精品化(老板 2026-07-16:rank 每行中间大片空档)——PC 宽屏 po-rank 改双栏网格(对概念B「消除单列拉太宽的空」): 主区可用宽度远超概念稿右栏 380px 窄榜单,单列拉伸导致行内容左靠、右侧大段空白;双栏后单列宽度贴近概念比例, 背景线 + 1px gap 天然连成横纵两向发丝分隔线(同 .po-dstats 数据面板同一手法),非另造样式。 */ [data-template="portal"] .po-rank{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; } [data-template="portal"] .po-rk-th{ width:4.625rem; } [data-template="portal"] .po-rk-t{ font-size:0.84375rem; } [data-template="portal"] .po-rk-m{ font-size:0.625rem; } /* 详情 PC 宽屏重排(对 index-pc「宽屏详情」.detail):左正文 + 右 380px dside,hero 加高、相关四栏 */ [data-template="portal"] .po-detail{ display:grid; grid-template-columns:minmax(0,1fr) 23.75rem; gap:1.5rem; align-items:start; padding:0 1.5rem; } [data-template="portal"] .po-dmain{ min-width:0; } [data-template="portal"] .po-dhero .po-ph{ max-height:32.5rem; } [data-template="portal"] .po-dtitle{ font-size:1.5rem; } [data-template="portal"] .po-dstat .v{ font-size:1.1875rem; } [data-template="portal"] .po-dside{ display:flex; flex-direction:column; gap:0.875rem; position:sticky; top:4.75rem; } [data-template="portal"] .po-dside-card{ background:var(--po-surface); border:1px solid var(--po-line); border-radius:var(--po-r-lg); padding:0.875rem; } [data-template="portal"] .po-dside-unlock{ background:linear-gradient(180deg,var(--po-surface-2),var(--po-surface)); border-color:rgba(255,194,75,.3); } [data-template="portal"] .po-dside-unlock .uh{ display:flex; align-items:center; gap:0.625rem; } [data-template="portal"] .po-dside-unlock .ic{ flex:0 0 auto; width:2.25rem; height:2.25rem; border-radius:var(--po-r-sm); background:rgba(255,194,75,.12); display:grid; place-items:center; } [data-template="portal"] .po-dside-unlock .ic svg{ width:1.125rem; height:1.125rem; fill:none; stroke:var(--po-gold); stroke-width:1.8; } [data-template="portal"] .po-dside-unlock .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } [data-template="portal"] .po-dside-unlock .ut{ font-size:0.875rem; font-weight:700; color:var(--po-text); } [data-template="portal"] .po-dside-unlock .us{ font-family:var(--po-mono); font-size:0.625rem; color:var(--po-mute); } [data-template="portal"] .po-dside-unlock .po-btn{ width:100%; margin-top:0.875rem; } [data-template="portal"] .po-dside-h{ font-family:var(--po-mono); font-size:0.65625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--po-mute); margin-bottom:0.625rem; } [data-template="portal"] .po-info-list{ display:flex; flex-direction:column; gap:0.5625rem; } [data-template="portal"] .po-info-list .il{ display:flex; align-items:baseline; justify-content:space-between; gap:0.75rem; font-size:0.78125rem; } [data-template="portal"] .po-info-list .ik{ flex:0 0 auto; color:var(--po-mute); } [data-template="portal"] .po-info-list .iv{ color:var(--po-dim); font-family:var(--po-mono); font-size:0.71875rem; text-align:right; } /* 精品化(老板 2026-07-16):PC 内容居中收进 max-width 容器——顶栏内容 padding 与主体对齐居中; 主体 84rem 居中,避免全宽满铺 + 视频卡过大(宽屏两侧留白,内容不拉伸)。 */ /* ★老板 2026-07-19 宽屏收窄(此前 140rem/2240px 令 portal 在 1440/1920/2560 全宽拉伸「显示太大」): 主体限宽收到 100rem(1600px,与 candy 同口径)居中——顶栏内容 + 侧栏频道 + 主区作为一个整体在宽屏居中,两侧对称留白,内容不再满铺;卡网格 auto-fill 最小列宽 token 未动,收窄后自然减列,不拉伸。 */ [data-template="portal"] .po-shell-body{ width:100%; max-width:100rem; margin-left:auto; margin-right:auto; } [data-template="portal"] .po-topbar{ padding-left:max(1.5rem,calc((100% - 100rem) / 2)); padding-right:max(1.5rem,calc((100% - 100rem) / 2)); } } @media (prefers-reduced-motion: reduce){ [data-template="portal"] *{ animation:none !important; transition:none !important; } } /* ===== HomeView 精修追加(§9.1 网格取整 + 编号栏目"更多"跳转,对 index-pc .sec-hd .more)===== */ /* 「更多」跳转:po-sec-rule(flex:1)先撑满剩余空间,本项紧随其后靠右,不挤title/不越权改上方已有类 */ [data-template="portal"] .po-sec-more{ flex:0 0 auto; display:flex; align-items:center; gap:0.1875rem; font-family:var(--po-mono); font-size:0.6875rem; color:var(--po-mute); text-decoration:none; white-space:nowrap; transition:color .15s; } [data-template="portal"] .po-sec-more:hover{ color:var(--po-primary); } [data-template="portal"] .po-sec-more:focus-visible{ outline:1.5px solid var(--po-primary); outline-offset:2px; border-radius:2px; } [data-template="portal"] .po-sec-more svg{ width:0.6875rem; height:0.6875rem; } @media (min-width:1024px){ [data-template="portal"] .po-sec-more{ font-size:0.75rem; gap:0.25rem; } [data-template="portal"] .po-sec-more svg{ width:0.75rem; height:0.75rem; } } @media (min-width:1024px){ [data-template="portal"] .po-list-kicker{ font-size:0.6875rem; } [data-template="portal"] .po-fseg{ font-size:0.75rem; padding:0.375rem 0.75rem; } } /* ===== 弹框 / Toast 换皮(P0 §2.3/§3):Paywall/Login/Support/Welcome 基座 + Toast ===== */ /* 基座(PoModal.tsx):H5 底部 sheet,PC(≥640) 情报台居中 dialog(对概念B .modal-stage .dialog 手法,recolor 为 neon-noir) */ [data-template="portal"] .po-modal-overlay{ position:fixed; inset:0; z-index:200; background:rgba(8,8,10,.74); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:po-modal-fade .18s ease both; } [data-template="portal"] .po-modal-wrap{ position:fixed; inset:0; z-index:201; display:flex; align-items:flex-end; justify-content:center; } [data-template="portal"] .po-modal-panel{ position:relative; width:100%; max-height:92dvh; display:flex; flex-direction:column; overflow:hidden; background:var(--po-surface); color:var(--po-text); border:1px solid var(--po-line-2); border-bottom:0; border-radius:1rem 1rem 0 0; box-shadow:0 -18px 60px -20px rgba(0,0,0,.7); padding-bottom:env(safe-area-inset-bottom); animation:po-modal-sheet-up .3s cubic-bezier(.22,1,.36,1) both; } [data-template="portal"] .po-modal-grab{ width:2.25rem; height:0.25rem; border-radius:2px; margin:0.5625rem auto 0.125rem; background:var(--po-line-2); } [data-template="portal"] .po-modal-hd{ display:flex; align-items:center; gap:0.75rem; padding:0.5rem 1rem 0.375rem 1.125rem; border-bottom:1px solid var(--po-line); } [data-template="portal"] .po-modal-hd-tx{ flex:1; min-width:0; } [data-template="portal"] .po-modal-kicker{ display:block; font-family:var(--po-mono); font-size:0.625rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--po-primary); margin-bottom:0.1875rem; } [data-template="portal"] .po-modal-title{ font-family:var(--po-disp); font-weight:800; font-size:1.0625rem; letter-spacing:.01em; color:var(--po-text); line-height:1.25; } [data-template="portal"] .po-modal-back,[data-template="portal"] .po-modal-x{ flex:0 0 auto; display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; border:1px solid var(--po-line); background:var(--po-surface-2); color:var(--po-dim); cursor:pointer; transition:.15s; } [data-template="portal"] .po-modal-back{ margin-left:-0.25rem; border:0; background:transparent; } [data-template="portal"] .po-modal-back:hover,[data-template="portal"] .po-modal-x:hover{ color:var(--po-text); background:var(--po-surface-3); } /* #8 2026-07-20:移动端购买观看卡片留白继续收紧(老板反复提)。 */ [data-template="portal"] .po-modal-body{ min-height:0; overflow-y:auto; padding:0.625rem 0.875rem 0.875rem; } @media (min-width:640px){ [data-template="portal"] .po-modal-wrap{ align-items:center; padding:1.25rem; } [data-template="portal"] .po-modal-panel{ max-width:27.5rem; max-height:88dvh; border-bottom:1px solid var(--po-line-2); border-radius:var(--po-r-lg); box-shadow:0 40px 90px -20px rgba(0,0,0,.75); animation:po-modal-pop-in .22s cubic-bezier(.22,1,.36,1) both; } [data-template="portal"] .po-modal-panel.wide{ max-width:31.25rem; } [data-template="portal"] .po-modal-panel.closing{ animation:po-modal-pop-out .16s cubic-bezier(.4,0,1,1) both; } [data-template="portal"] .po-modal-grab{ display:none; } } /* ★退出动画(#7 2026-07-20):关闭两段式卸载(useDelayedUnmount)播完才摘 DOM,不再瞬间硬切消失。 */ [data-template="portal"] .po-modal-overlay.closing{ animation:po-modal-fade-out .18s ease both; } [data-template="portal"] .po-modal-panel.closing{ animation:po-modal-sheet-down .2s cubic-bezier(.4,0,1,1) both; } @keyframes po-modal-fade{ from{opacity:0;} to{opacity:1;} } @keyframes po-modal-fade-out{ from{opacity:1;} to{opacity:0;} } @keyframes po-modal-sheet-up{ from{transform:translateY(100%);} to{transform:translateY(0);} } @keyframes po-modal-sheet-down{ from{transform:translateY(0);} to{transform:translateY(100%);} } @keyframes po-modal-pop-in{ from{opacity:0; transform:scale(.94);} to{opacity:1; transform:scale(1);} } @keyframes po-modal-pop-out{ from{opacity:1; transform:scale(1);} to{opacity:0; transform:scale(.94);} } /* 弹框内联反馈条(错误/成功)——packages/templates/portal 不接 apps/web 全局 toast 单例,见 poCheckout.ts 顶部说明 */ [data-template="portal"] .po-modal-feedback{ display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem; padding:0.5rem 0.6875rem; border-radius:var(--po-r-sm); font-size:0.75rem; font-weight:600; } [data-template="portal"] .po-modal-feedback.err{ background:rgba(251,87,121,.12); border:1px solid rgba(251,87,121,.32); color:#FF95AC; } [data-template="portal"] .po-modal-feedback.ok{ background:rgba(47,208,138,.12); border:1px solid rgba(47,208,138,.32); color:var(--po-new); } /* Paywall 换皮(PoPaywallModal.tsx) */ [data-template="portal"] .po-pw-head{ display:flex; flex-direction:column; gap:0.375rem; margin-bottom:0.625rem; } [data-template="portal"] .po-pw-cover{ position:relative; } [data-template="portal"] .po-pw-title{ padding:0 0.125rem; font-size:0.84375rem; font-weight:700; line-height:1.35; color:var(--po-text); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } [data-template="portal"] .po-pw-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.375rem; } /* ★R1-2:开通会员多档位类型并存(视频VIP/暗网VIP)时的分区小标题。 */ [data-template="portal"] .po-pw-group{ grid-column:1 / -1; padding:0.375rem 0.125rem 0; font-family:var(--po-mono); font-size:0.625rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--po-mute); } [data-template="portal"] .po-pw-group:first-child{ padding-top:0; } /* #47 2026-07-21:付费墙档位卡仍偏高(老板反复提),再压内距/字号,更紧凑。 */ [data-template="portal"] .po-pw-plan{ position:relative; display:flex; flex-direction:column; gap:0.0625rem; padding:0.3125rem 0.5rem; border-radius:var(--po-r-md); text-align:left; cursor:pointer; background:var(--po-surface-2); border:1.5px solid var(--po-line); transition:border-color .15s,background .15s; } [data-template="portal"] .po-pw-plan:hover{ border-color:var(--po-line-2); } [data-template="portal"] .po-pw-plan.on{ border-color:var(--po-primary); background:rgba(255,46,136,.1); } [data-template="portal"] .po-pw-plan.span2{ grid-column:1 / -1; } [data-template="portal"] .po-pw-plan .r1{ display:flex; align-items:baseline; gap:0.375rem; min-width:0; } [data-template="portal"] .po-pw-plan .nm{ flex-shrink:0; font-size:0.8125rem; font-weight:700; color:var(--po-text); } [data-template="portal"] .po-pw-plan .sb{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.6875rem; color:var(--po-mute); } [data-template="portal"] .po-pw-plan .bd{ margin-left:auto; flex-shrink:0; font-family:var(--po-mono); font-size:0.5625rem; font-weight:700; padding:1px 0.375rem; border-radius:var(--po-r-xs); background:var(--po-primary); color:var(--po-ink); } [data-template="portal"] .po-pw-plan .pr{ font-family:var(--po-mono); font-size:0.875rem; font-weight:800; color:var(--po-primary); } [data-template="portal"] .po-pw-plan .og{ margin-left:0.3125rem; font-size:0.6875rem; color:var(--po-mute); text-decoration:line-through; } [data-template="portal"] .po-pw-fav{ display:flex; width:100%; align-items:center; justify-content:center; gap:0.5rem; margin-top:0.75rem; padding:0.6875rem 0; border-radius:var(--po-r-md); border:1.5px solid var(--po-line); background:transparent; color:var(--po-dim); font-size:0.8125rem; font-weight:600; cursor:pointer; transition:.15s; } [data-template="portal"] .po-pw-fav.on{ border-color:var(--po-primary); color:var(--po-primary); background:rgba(255,46,136,.08); } [data-template="portal"] .po-pw-empty{ padding:1.75rem 0.75rem; text-align:center; font-size:0.8125rem; color:var(--po-mute); border:1px dashed var(--po-line-2); border-radius:var(--po-r-md); } [data-template="portal"] .po-pw-sk{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.5rem; } [data-template="portal"] .po-pw-sk i{ display:block; height:3.25rem; border-radius:var(--po-r-md); background:var(--po-surface-3); animation:po-pw-pulse 1.4s ease-in-out infinite; } [data-template="portal"] .po-pw-sk i.span2{ grid-column:1 / -1; height:3rem; } @keyframes po-pw-pulse{ 0%,100%{opacity:.55;} 50%{opacity:1;} } [data-template="portal"] .po-pw-amount{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; padding:0.75rem 0.875rem; border-radius:var(--po-r-md); background:rgba(255,46,136,.08); border:1px solid rgba(255,46,136,.22); } [data-template="portal"] .po-pw-amount .l{ font-size:0.8125rem; color:var(--po-dim); } [data-template="portal"] .po-pw-amount .v{ font-family:var(--po-mono); font-size:1.1875rem; font-weight:800; color:var(--po-primary); } [data-template="portal"] .po-pw-hint{ margin-top:0.875rem; text-align:center; font-family:var(--po-mono); font-size:0.6875rem; color:var(--po-mute); } /* 支付通道选择(PoChannelPicker.tsx) */ [data-template="portal"] .po-chgrid{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.25rem; } [data-template="portal"] .po-chip{ display:flex; align-items:center; gap:0.375rem; padding:0.5rem 0.75rem; border-radius:var(--po-r-md); border:1.5px solid var(--po-line); background:var(--po-surface-2); color:var(--po-dim); font-size:0.8125rem; font-weight:600; cursor:pointer; transition:.15s; } [data-template="portal"] .po-chip:hover{ border-color:var(--po-line-2); color:var(--po-text); } [data-template="portal"] .po-chip.on{ border-color:var(--po-primary); color:var(--po-primary); background:rgba(255,46,136,.1); } [data-template="portal"] .po-chip svg{ width:1.0625rem; height:1.0625rem; } /* Login 换皮(PoLoginModal.tsx) */ [data-template="portal"] .po-lg-tabs{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; padding:2px; margin-bottom:1rem; border-radius:var(--po-r-md); background:var(--po-bg-deep); border:1px solid var(--po-line); } [data-template="portal"] .po-lg-tab{ padding:0.5rem 0; border-radius:calc(var(--po-r-md) - 2px); border:0; background:none; font-family:var(--po-mono); font-size:0.75rem; font-weight:700; letter-spacing:.02em; color:var(--po-mute); cursor:pointer; transition:.15s; } [data-template="portal"] .po-lg-tab.on{ background:var(--po-primary); color:var(--po-ink); } [data-template="portal"] .po-lg-form{ display:flex; flex-direction:column; gap:0.75rem; } [data-template="portal"] .po-lg-input{ width:100%; height:2.875rem; padding:0 0.875rem; border-radius:var(--po-r-md); border:1px solid var(--po-line); background:var(--po-surface-2); color:var(--po-text); font-size:0.875rem; outline:none; transition:border-color .15s; font-family:inherit; } [data-template="portal"] .po-lg-input::placeholder{ color:var(--po-mute); } [data-template="portal"] .po-lg-input:focus{ border-color:var(--po-primary); } [data-template="portal"] .po-lg-divider{ display:flex; align-items:center; gap:0.75rem; padding-top:0.25rem; } [data-template="portal"] .po-lg-divider .ln{ flex:1; height:1px; background:var(--po-line); } [data-template="portal"] .po-lg-divider span:not(.ln){ font-family:var(--po-mono); font-size:0.6875rem; color:var(--po-mute); white-space:nowrap; } [data-template="portal"] .po-lg-fine{ text-align:center; font-size:0.71875rem; color:var(--po-mute); line-height:1.5; } /* Support 换皮(PoSupportModal.tsx) */ [data-template="portal"] .po-sp-intro{ font-size:0.8125rem; line-height:1.65; color:var(--po-dim); } [data-template="portal"] .po-sp-offline{ margin-top:0.75rem; padding:0.75rem 0.875rem; border-radius:var(--po-r-md); border:1px solid var(--po-line); background:var(--po-surface-2); font-size:0.78125rem; color:var(--po-dim); } [data-template="portal"] .po-sp-note{ margin-top:0.5rem; font-family:var(--po-mono); font-size:0.6875rem; color:var(--po-mute); } [data-template="portal"] .po-faq{ margin-top:1.125rem; border-radius:var(--po-r-lg); border:1px solid var(--po-line); overflow:hidden; } [data-template="portal"] .po-faq-hd{ padding:0.625rem 0.875rem; font-family:var(--po-mono); font-size:0.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--po-mute); background:var(--po-bg-deep); border-bottom:1px solid var(--po-line); } [data-template="portal"] .po-faq-cat{ padding:0.625rem 0.875rem 0.125rem; font-size:0.6875rem; font-weight:700; color:var(--po-accent); } [data-template="portal"] .po-faq-item{ border-top:1px solid var(--po-line); padding:0.625rem 0.875rem; } [data-template="portal"] .po-faq-item summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:0.5rem; font-size:0.8125rem; font-weight:600; color:var(--po-text); } [data-template="portal"] .po-faq-item summary::-webkit-details-marker{ display:none; } [data-template="portal"] .po-faq-item summary svg{ flex:0 0 auto; width:0.875rem; height:0.875rem; color:var(--po-mute); transition:transform .18s; } [data-template="portal"] .po-faq-item[open] summary svg{ transform:rotate(180deg); } [data-template="portal"] .po-faq-item p{ margin-top:0.5rem; font-size:0.75rem; line-height:1.65; color:var(--po-dim); white-space:pre-wrap; } /* Welcome 换皮(PoWelcomeModal.tsx) */ [data-template="portal"] .po-wc-lead{ font-size:0.8125rem; line-height:1.7; color:var(--po-dim); } [data-template="portal"] .po-wc-card{ margin-top:0.75rem; padding:0.75rem 0.875rem; border-radius:var(--po-r-lg); border:1px solid var(--po-line); background:var(--po-surface-2); } [data-template="portal"] .po-wc-label{ font-family:var(--po-mono); font-size:0.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--po-mute); } [data-template="portal"] .po-wc-value{ display:flex; align-items:center; gap:0.5rem; margin-top:0.4375rem; } [data-template="portal"] .po-wc-value span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--po-mono); font-size:0.8125rem; color:var(--po-text); padding:0.5rem 0.625rem; border-radius:var(--po-r-sm); background:var(--po-bg-deep); } [data-template="portal"] .po-wc-cred{ margin-top:0.4375rem; word-break:break-all; font-family:var(--po-mono); font-size:0.9375rem; font-weight:700; color:var(--po-gold); } [data-template="portal"] .po-wc-sub{ margin-top:0.375rem; font-size:0.71875rem; line-height:1.55; color:var(--po-mute); } /* Toast 换皮(PoToast.tsx):情报台数据条,左色点标态,桌面右上堆叠/移动顶部居中 */ [data-template="portal"] .po-toast-wrap{ pointer-events:none; position:fixed; z-index:300; top:0.875rem; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:0.5rem; padding:0 1rem; } [data-template="portal"] .po-toast{ pointer-events:auto; display:flex; align-items:center; gap:0.5rem; max-width:22rem; padding:0.625rem 0.875rem; border-radius:var(--po-r-md); background:var(--po-surface); border:1px solid var(--po-line-2); box-shadow:0 20px 44px -16px rgba(0,0,0,.7); font-size:0.8125rem; font-weight:600; color:var(--po-text); animation:po-toast-in .22s cubic-bezier(.22,1,.36,1) both; } [data-template="portal"] .po-toast::before{ content:""; flex:0 0 auto; width:0.375rem; height:0.375rem; border-radius:50%; background:var(--po-dim); } [data-template="portal"] .po-toast.error::before{ background:#FB5779; } [data-template="portal"] .po-toast.success::before{ background:var(--po-new); } [data-template="portal"] .po-toast.info::before{ background:var(--po-accent); } /* ★退出动画(#13 2026-07-20):共享 Provider 先标 leaving 再延时摘除(TOAST_EXIT_MS=220ms,与此动画时长对齐), 不再瞬间硬切消失。 */ [data-template="portal"] .po-toast.leaving{ animation:po-toast-out .22s cubic-bezier(.4,0,1,1) both; } @keyframes po-toast-in{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} } @keyframes po-toast-out{ from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(-6px);} } @media (min-width:640px){ [data-template="portal"] .po-toast-wrap{ align-items:flex-end; right:1.25rem; left:auto; top:1.25rem; padding:0; } } /* ===== 个人中心「账号情报台」(老板 2026-07-16 二级页重建:各模板各自版式,非共用 MeView 换色)===== */ /* ★老板 2026-07-18:H5 两侧收窄到 0.75rem(12px,与 cinema/candy 同步),卡片贴近屏幕边、用满宽度。 */ [data-template="portal"] .po-profile{ padding:0.875rem 0.75rem 1.875rem; } [data-template="portal"] .po-profile-hd{ display:flex; align-items:center; gap:0.5625rem; margin-bottom:0.875rem; } [data-template="portal"] .po-profile-hd .idx{ font-family:var(--po-mono); font-size:0.6875rem; font-weight:600; letter-spacing:.05em; color:var(--po-primary); } [data-template="portal"] .po-profile-hd .ttl{ font-weight:900; font-size:1.125rem; letter-spacing:.02em; } [data-template="portal"] .po-profile-hd .rule{ flex:1; height:1px; background:var(--po-line-2); } [data-template="portal"] .po-profile-main{ display:flex; flex-direction:column; gap:0.875rem; min-width:0; } [data-template="portal"] .po-profile-card{ display:flex; align-items:center; gap:0.875rem; padding:1rem; background:var(--po-surface); border:1px solid var(--po-line); border-radius:var(--po-r-lg); } [data-template="portal"] .po-profile-avatar{ flex:0 0 auto; display:grid; place-items:center; width:3.5rem; height:3.5rem; border-radius:50%; font-family:var(--po-disp); font-weight:700; font-size:1.375rem; background:linear-gradient(135deg,var(--po-surface-3),var(--po-bg-deep)); border:1.5px solid var(--po-line-2); color:var(--po-text); } [data-template="portal"] .po-profile-id{ min-width:0; flex:1; } [data-template="portal"] .po-profile-name{ display:flex; align-items:center; gap:0.5rem; font-family:var(--po-disp); font-weight:800; font-size:1.125rem; letter-spacing:.01em; color:var(--po-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } [data-template="portal"] .po-profile-mid{ margin-top:0.25rem; font-family:var(--po-mono); font-size:0.71875rem; color:var(--po-mute); } [data-template="portal"] .po-profile-vipbadge{ flex:0 0 auto; font-family:var(--po-mono); font-size:0.625rem; font-weight:700; letter-spacing:.06em; padding:2px 0.5rem; border-radius:var(--po-r-xs); color:var(--po-gold); background:rgba(255,194,75,.12); border:1px solid rgba(255,194,75,.32); } [data-template="portal"] .po-profile-login{ display:flex; align-items:center; gap:0.75rem; padding:0.875rem 1rem; border-radius:var(--po-r-lg); background:rgba(255,46,136,.08); border:1px solid rgba(255,46,136,.24); cursor:pointer; text-align:left; width:100%; font-family:inherit; transition:border-color .15s; } [data-template="portal"] .po-profile-login:hover{ border-color:rgba(255,46,136,.4); } [data-template="portal"] .po-profile-login .ic{ flex:0 0 auto; display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:var(--po-r-md); background:var(--po-primary); color:var(--po-ink); } [data-template="portal"] .po-profile-login .tx{ min-width:0; flex:1; } [data-template="portal"] .po-profile-login .t1{ font-weight:800; font-size:0.875rem; color:var(--po-text); } [data-template="portal"] .po-profile-login .t2{ margin-top:0.125rem; font-size:0.71875rem; color:var(--po-mute); } /* #12 2026-07-20:「会员权益」卡偏大,缩小紧凑(padding/图标/文案/按钮同步收)。 */ /* ★主题色串味修(老板 2026-07-21):会员权益/「立即开通」按钮原用 --po-gold(金/琥珀)——视觉上串成 cinema 暗金,违「每模板强调色用自己 token」。portal 品牌色=品红 --po-primary / 电紫 --po-accent, 会员 CTA/图标/描边全改本模板品牌色,不再是金。 */ [data-template="portal"] .po-profile-vip{ display:block; padding:0.6875rem 0.75rem; border-radius:var(--po-r-lg); background:linear-gradient(160deg,var(--po-surface-2),var(--po-surface)); border:1px solid rgba(255,46,136,.28); cursor:pointer; text-align:left; width:100%; font-family:inherit; } [data-template="portal"] .po-profile-vip .hd{ display:flex; align-items:center; gap:0.5rem; } [data-template="portal"] .po-profile-vip .ic{ flex:0 0 auto; display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:var(--po-r-sm); background:rgba(255,46,136,.14); color:var(--po-primary); } [data-template="portal"] .po-profile-vip .kicker{ font-family:var(--po-mono); font-size:0.5625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--po-mute); } [data-template="portal"] .po-profile-vip .status{ margin-top:0.125rem; font-family:var(--po-disp); font-weight:800; font-size:0.875rem; color:var(--po-text); } [data-template="portal"] .po-profile-vip .cta{ margin-top:0.5rem; display:flex; align-items:center; justify-content:center; gap:0.375rem; width:100%; font-family:inherit; font-size:0.71875rem; font-weight:700; color:var(--po-ink); background:linear-gradient(120deg,var(--po-primary),var(--po-accent)); border:0; border-radius:var(--po-r-md); padding:0.4375rem 0; } [data-template="portal"] .po-profile-panel{ background:var(--po-surface); border:1px solid var(--po-line); border-radius:var(--po-r-lg); overflow:hidden; } [data-template="portal"] .po-profile-panel-hd{ display:flex; align-items:baseline; gap:0.5rem; padding:0.875rem 1.125rem; border-bottom:1px solid var(--po-line); } [data-template="portal"] .po-profile-panel-hd .kicker{ font-family:var(--po-mono); font-size:0.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--po-mute); } [data-template="portal"] .po-profile-panel-hd h2{ font-family:var(--po-disp); font-weight:800; font-size:1rem; color:var(--po-text); } [data-template="portal"] .po-profile-panel-body{ padding:1.125rem; min-height:20rem; } /* ★#10 干净子页(老板 2026-07-21 强命令):子页整页只剩「返回+内容」,隐藏账号侧栏(aside)与页头,全档生效。 */ [data-template="portal"] .po-profile.is-section .po-profile-hd, [data-template="portal"] .po-profile.is-section .po-profile-aside{ display:none; } [data-template="portal"] .po-profile.is-section .po-profile-grid{ display:block; } /* ★#10:菜单索引态(裸 /me)= 竖排情报台列表,每项整行可点,点即真实路由跳独立页(非内联 tab)。 */ /* ★个人中心菜单精品化(老板 2026-07-21「太粗糙」打回):加图标 chip(粉主题弱底)+ 卡面渐变 + hover 主题描边/箭头右滑 + 按压回弹 + 焦点环,替代原扁平无图标裸块。cinema/candy 早有图标,portal 补齐并升级。 */ [data-template="portal"] .po-profile-menu{ display:flex; flex-direction:column; gap:0.5rem; } [data-template="portal"] .po-profile-menuitem{ display:flex; align-items:center; gap:0.75rem; width:100%; text-align:left; font-family:inherit; padding:0.8125rem 0.875rem; border-radius:var(--po-r-lg); border:1px solid var(--po-line); background:linear-gradient(180deg,var(--po-surface),color-mix(in srgb,var(--po-surface) 90%,#000)); color:var(--po-text); font-size:0.9375rem; font-weight:600; cursor:pointer; transition:transform .14s ease, border-color .16s, background .16s; } [data-template="portal"] .po-profile-menuitem .ic{ flex:0 0 auto; width:2.125rem; height:2.125rem; display:grid; place-items:center; border-radius:0.625rem; color:var(--po-primary); background:color-mix(in srgb,var(--po-primary) 15%,transparent); border:1px solid color-mix(in srgb,var(--po-primary) 22%,transparent); } [data-template="portal"] .po-profile-menuitem .ic svg{ width:1.125rem; height:1.125rem; } [data-template="portal"] .po-profile-menuitem .lb{ flex:1 1 auto; letter-spacing:.01em; } [data-template="portal"] .po-profile-menuitem .chev{ flex:0 0 auto; color:var(--po-mute); font-size:1.25rem; transition:transform .16s, color .16s; } [data-template="portal"] .po-profile-menuitem:hover{ border-color:color-mix(in srgb,var(--po-primary) 45%,var(--po-line-2)); background:var(--po-surface-2); } [data-template="portal"] .po-profile-menuitem:hover .chev{ color:var(--po-primary); transform:translateX(2px); } [data-template="portal"] .po-profile-menuitem:active{ transform:scale(.99); } [data-template="portal"] .po-profile-menuitem:focus-visible{ outline:2px solid var(--po-primary); outline-offset:2px; } [data-template="portal"] .po-profile-back{ font-family:var(--po-mono); font-size:0.75rem; letter-spacing:.06em; color:var(--po-accent,var(--po-text)); background:none; border:0; padding:0; cursor:pointer; } [data-template="portal"] .po-profile-aside{ display:flex; flex-direction:column; gap:0.875rem; margin-top:1.125rem; } /* ★H5(<1024)个人中心:资料卡(aside)必须在顶部,而非堆在历史/tab 之后(老板 2026-07-16:个人信息卡跑到历史记录下面=错)。 grid 改 flex 列并把 aside order:-1 提到最前;桌面(≥1024)仍走下方 grid 两栏(资料侧栏在右),互不影响。 */ @media (max-width:1023px){ [data-template="portal"] .po-profile-grid{ display:flex; flex-direction:column; gap:0.875rem; } [data-template="portal"] .po-profile-aside{ order:-1; margin-top:0; } } @media (min-width:1024px){ [data-template="portal"] .po-profile{ padding:1.5rem 1.5rem 1.875rem; } [data-template="portal"] .po-profile-hd .ttl{ font-size:1.375rem; } [data-template="portal"] .po-profile-grid{ display:grid; grid-template-columns:minmax(0,1fr) 20rem; gap:1.5rem; align-items:start; } [data-template="portal"] .po-profile-aside{ margin-top:0; position:sticky; top:4.75rem; } [data-template="portal"] .po-profile-panel-body{ min-height:26rem; } } /* ===== 搜索页「情报检索台」(po-search-form 检索框 + po-search-summary 结果摘要)===== */ [data-template="portal"] .po-search-form{ display:flex; align-items:center; gap:0.5625rem; margin-bottom:1rem; padding:0.5625rem 0.75rem; background:var(--po-bg-deep); border:1px solid var(--po-line); border-radius:var(--po-r-md); } [data-template="portal"] .po-search-form .ic{ flex:0 0 auto; display:grid; place-items:center; color:var(--po-mute); } [data-template="portal"] .po-search-form .ic svg{ width:1rem; height:1rem; } [data-template="portal"] .po-search-input{ flex:1; min-width:0; background:none; border:0; outline:none; color:var(--po-text); font-family:inherit; font-size:0.875rem; } [data-template="portal"] .po-search-input::placeholder{ color:var(--po-mute); } [data-template="portal"] .po-search-submit{ flex:0 0 auto; font-family:var(--po-mono); font-size:0.75rem; font-weight:700; letter-spacing:.02em; color:var(--po-ink); background:var(--po-primary); border:0; border-radius:var(--po-r-sm); padding:0.4375rem 0.9375rem; cursor:pointer; transition:background .15s; } [data-template="portal"] .po-search-submit:hover{ background:var(--po-primary-2); } [data-template="portal"] .po-search-summary{ margin-bottom:0.8125rem; font-family:var(--po-mono); font-size:0.75rem; color:var(--po-mute); } [data-template="portal"] .po-search-summary b{ color:var(--po-text); font-weight:700; } /* idle 空态:快捷类型入口 + 热门预览(老板 2026-07-18 精品化,避免大片空白)。 */ [data-template="portal"] .po-search-idle{ width:100%; padding-top:2.25rem; } [data-template="portal"] .po-idle-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem; margin-top:0.375rem; } [data-template="portal"] .po-idle-tag{ font-family:var(--po-mono); font-weight:700; font-size:0.75rem; letter-spacing:.02em; color:var(--po-text); padding:0.375rem 0.875rem; border:1px solid var(--po-line-2); border-radius:var(--po-r-sm); background:var(--po-surface-2); text-decoration:none; transition:border-color .15s,color .15s; } [data-template="portal"] .po-idle-tag:hover{ border-color:var(--po-primary); color:var(--po-primary); } [data-template="portal"] .po-search-hot{ width:100%; margin-top:1.75rem; text-align:left; } [data-template="portal"] .po-search-hot-h{ font-family:var(--po-mono); font-weight:700; font-size:0.75rem; letter-spacing:.04em; color:var(--po-mute); margin-bottom:0.75rem; text-transform:uppercase; } @media (min-width:1024px){ [data-template="portal"] .po-search-form{ max-width:32rem; } } /* ===== 暗网专区占位「情报台 ACCESS DENIED」(老板 2026-07-14/16:各模板自绘,区别 cinema 暖红极光)===== */ [data-template="portal"] .po-dw{ position:relative; min-height:calc(100dvh - 3.125rem); display:flex; align-items:center; justify-content:center; padding:2.5rem 1.25rem; overflow:hidden; background: linear-gradient(var(--po-line) 1px,transparent 1px) 0 0/100% 1.75rem, linear-gradient(90deg,var(--po-line) 1px,transparent 1px) 0 0/1.75rem 100%, radial-gradient(60% 50% at 50% 30%,rgba(251,87,121,.1),transparent 62%),var(--po-bg-deep); } [data-template="portal"] .po-dw-scan{ position:absolute; inset:0; z-index:0; pointer-events:none; background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0px,rgba(255,255,255,.035) 1px,transparent 1px,transparent 3px); animation:po-dw-scan 6s linear infinite; } @keyframes po-dw-scan{ from{ background-position:0 0; } to{ background-position:0 9rem; } } [data-template="portal"] .po-dw-panel{ position:relative; z-index:1; width:100%; max-width:25rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.75rem; padding:2rem 1.5rem 1.75rem; border:1px solid rgba(251,87,121,.32); border-radius:var(--po-r-lg); background:rgba(16,16,20,.72); backdrop-filter:blur(6px); box-shadow:0 30px 80px -30px rgba(0,0,0,.7); } [data-template="portal"] .po-dw-hd{ display:flex; align-items:center; gap:0.5rem; font-family:var(--po-mono); font-size:0.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--po-mute); } [data-template="portal"] .po-dw-idx{ color:var(--cn-danger); } [data-template="portal"] .po-dw-lock{ display:grid; place-items:center; width:3.5rem; height:3.5rem; margin-top:0.375rem; border-radius:50%; background:rgba(251,87,121,.12); border:1px solid rgba(251,87,121,.4); color:var(--cn-danger); } [data-template="portal"] .po-dw-lock svg{ width:1.5rem; height:1.5rem; } [data-template="portal"] .po-dw-badge{ font-family:var(--po-mono); font-size:0.6875rem; font-weight:800; letter-spacing:.08em; color:var(--po-ink); background:var(--cn-danger); border-radius:var(--po-r-xs); padding:0.125rem 0.5rem; } [data-template="portal"] .po-dw-title{ font-family:var(--po-disp); font-weight:800; font-size:1.625rem; letter-spacing:.03em; color:var(--po-text); } [data-template="portal"] .po-dw-sub{ font-size:0.8125rem; line-height:1.65; color:var(--po-dim); max-width:20rem; } [data-template="portal"] .po-dw-meta{ display:flex; align-items:center; gap:0.375rem; margin-top:0.25rem; font-family:var(--po-mono); font-size:0.625rem; letter-spacing:.08em; text-transform:uppercase; color:var(--po-mute); flex-wrap:wrap; justify-content:center; } [data-template="portal"] .po-dw-meta .v{ color:var(--cn-danger); font-weight:700; } [data-template="portal"] .po-dw-back{ display:inline-flex; align-items:center; gap:0.375rem; margin-top:0.75rem; font-size:0.8125rem; font-weight:600; color:var(--po-dim); text-decoration:none; padding:0.5rem 1rem; border-radius:var(--po-pill); border:1px solid var(--po-line-2); transition:.15s; } [data-template="portal"] .po-dw-back:hover{ color:var(--po-text); border-color:var(--po-primary); } [data-template="portal"] .po-dw-back svg{ width:0.875rem; height:0.875rem; } @media (min-width:1024px){ [data-template="portal"] .po-dw-title{ font-size:2rem; } [data-template="portal"] .po-dw-panel{ max-width:28rem; padding:2.5rem 2rem 2.25rem; } } /* ===== 全站卡片尺寸 · 单一真源(SSOT)===== 漫画/有声=3:4、视频=16:9,各一个中等值;三模板 rail/列表/已购/搜索/榜单/相关/相关作品全部复用同一 token → 根治「同类卡全站大小乱跳」。挂 [data-template](三模板都带此属性,SEA 无 → 零回归)。 */ [data-template]{ --cn-cv:8.75rem; /* 竖版 3:4 卡最小宽 / 横滑 rail 固定宽(漫画·有声):PC≈6-7 列(≈155px)、H5 2 列 */ --cn-ch:12rem; /* 横版 16:9 卡最小宽 / 横滑 rail 固定宽(视频):PC≈5-6 列(≈210px)、H5 2 列 */ --cn-card-gap:.75rem; /* 卡片网格列间距(PC) */ --cn-card-gap-h5:.625rem; /* 卡片网格列间距(H5) */ /* ★老板 2026-07-18 响应式列数三修(密而精终版):内容网格(首页/列表/相关)列最小宽 token—— ≥--cn-col-bp(700px)由固定 2/3 列切换 auto-fill 按可用宽度自然算列;<700px(含手机 390)仍走固定 2/3 列(与 H5 一致,零回归)。数值经三模板(portal/cinema/candy)在 390/880/1440/1920/2000 五档实测校准,达标线:视频 390=2·880=2·1440=3·1920=4-5·2000=5-6;漫画/有声 390=3·880=3· 1440=5-6·2000=7-8。卡最小宽收紧到老板指定区间(视频 360-380px、漫画有声 240-250px)——单卡尺寸恒定精致不随屏宽变巨大,只有可用宽度变大时列数才增加;三模板 PC 主体限宽(po-shell-body/ cin-main/ca-main)同步加宽到 ~2200-2240px 封顶,避免 1920→2000 之间容器提前封顶导致列数停滞。 */ --cn-col-bp:700px; /* 响应式生效断点:窄于此维持固定列(手机/窄窗口),≥此按卡宽自动排列 */ --cn-col-bp-xl:1600px; /* 超宽屏加密断点:≥此漫画/有声改用 --cn-col-cv-xl(与 --cn-col-cv 数值一致, 结构上保留双 token 便于日后单独微调,当前经实测两档同一数值即可全程命中五档达标线)。 */ --cn-col-ch:14.375rem; /* ★老板2026-07-19六修:视频卡网格最小列宽 300px→230px。旧300px在 pad 尺寸 (768/834 iPad)视频只落2列巨卡(卡360-395px·老板反馈"太大·pad应该3列")。收到230px后:pad段 (700-1023)排3列(768→3卡~237、834→3卡~258)平滑到高端4列;手机(<700)仍走固定repeat(2)不变 (phone=2/pad=3=老板口径)。≥1024走 --cn-col-ch-xl(270)不变,故笔记本/宽屏列数不受此档影响。 */ /* ★老板 2026-07-18 三修(骨架屏对齐终版):视频卡网格最小列宽(超宽屏 ≥1600px)。旧值 19.375rem(310px) 在 portal/cinema(侧栏 200px+.po-list/.cin-list 侧边距吃掉约 272-280px 可用宽)只能落 5 列,未达老板骨架屏实测「2000px 视频 6 列」达标线;收紧到 16.875rem(270px)——portal/cinema(可用宽约 1720-1728px)floor((W+12)/(270+12))=6 列整;candy(可用宽约 1952px,侧栏更窄)同值仍稳居 6 列, 不会因收紧而暴涨到 7+(实测三模板取交集验证)。 */ --cn-col-ch-xl:16.875rem; --cn-col-cv:13.4375rem; /* 漫画/有声卡网格最小列宽(auto-fill),215px:880→3/1440→5-6 列(实测校准, 三模板取交集——若用老板建议的 240-250px,portal/cinema 因侧栏更窄的可用宽度在 1440 只能落 4 列, 未达 5-6 目标,故收到 215px 命中最紧的 portal/cinema 门槛,candy 更宽裕仍在同区间内不受影响)。 */ /* ★老板 2026-07-18 三修:漫画/有声卡网格最小列宽(超宽屏 ≥1600px)。旧值 13.4375rem(215px)在 portal/cinema 只落 7 列,未达骨架屏实测「2000px 漫画/有声 8-9 列」达标线;收紧到 12.8125rem (205px)——portal/cinema(可用宽约 1720-1728px)floor((W+8)/(205+8))=8 列整;candy(可用宽约 1952px)同值落 9 列,落在老板骨架屏实测「8-9 列」区间内,不超出。 */ --cn-col-cv-xl:11.5625rem; /* ★老板2026-07-18五修:漫画/有声宽屏卡最小宽 205→185px(配合密排断点降到1024), 让笔记本宽度(1440→6·1728→7)也密起来、不再一堆大卡;880仍走mid(215)=3列不变;2000→8-9(骨架区间)。 */ } /* ===== 骨架屏 = 唯一真源(老板 2026-07-18):/cn-list/[section]/loading.tsx 路由级 Suspense 骨架与三模板真实内容网格(po-river/po-grid3、cin-hgrid/cin-list-grid、ca-grid)物理上共用同一套 grid token(上方 --cn-col-*),但此前骨架容器(.cnx,无侧边距)比真实内容容器(po-list/cin-list/ca-list, 有侧边距)更宽,导致同宽度下骨架比真卡多算 1 列、卡宽不一致。修法:loading.tsx 直接渲染三模板各自的**真实骨架标记**(与该模板 ContentList.tsx 内联 loading 态同一份 class/wrapper),三份同时渲染、按当前激活 [data-template] 用 CSS 显隐仅留一份——零 JS 探测延迟(data-template 已由 RootLayout 在服务端同步注入 ,不等客户端 hydration)。 */ .cnx-skel-tpl{ display:contents; } html:not([data-template="portal"]) .cnx-skel-tpl.tpl-portal{ display:none; } html:not([data-template="cinema"]) .cnx-skel-tpl.tpl-cinema{ display:none; } html:not([data-template="candy"]) .cnx-skel-tpl.tpl-candy{ display:none; } /* ===== CN 首页/大类浏览交互层(cnx-*, video-first)===== */ .cnx{ display:flex; flex-direction:column; gap:1rem; } /* R-UX-013:全站 cnx-* 可交互控件统一 focus-visible 焦点环(键盘可达,禁 outline:none 无替代)。卡片本体(.cnx-card)在上方单独处理(焦点环贴合封面圆角,不用此通用环)。 */ .cnx-tab:focus-visible, .cnx-chip:focus-visible, .cnx-sortbtn:focus-visible, .cnx-more-btn:focus-visible, .cnx-retry:focus-visible, .cnx-fav-remove:focus-visible, .cnx-cats-more:focus-visible, .cnx-drop-btn:focus-visible{ outline:2px solid var(--cn-primary,#e7a94b); outline-offset:2px; } /* 顶置公告 */ .cnx-notice{ display:flex; align-items:center; gap:.625rem; padding:.625rem .875rem; border-radius:var(--cn-radius,.75rem); background:var(--cn-surface,#161616); border:1px solid var(--cn-line,rgba(255,255,255,.08)); font-size:.8125rem; } .cnx-notice .k{ flex:none; padding:.125rem .5rem; border-radius:var(--cn-pill,999px); font-weight:700; font-size:.6875rem; color:var(--cn-primary-ink,#111); background:var(--cn-primary,#e7a94b); } .cnx-notice .v{ color:var(--cn-text-dim,#9aa); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 顶部大类 tab([推荐][视频][榜单])—— H5 满宽三等分(视觉平衡,不挤左侧留大空档);PC 收敛为居中 pill 组。 */ .cnx-tabs{ display:flex; gap:.375rem; padding:.1875rem; border-radius:var(--cn-pill,999px); background:var(--cn-surface,#161616); border:1px solid var(--cn-line,rgba(255,255,255,.08)); width:100%; position:sticky; top:0; z-index:6; } .cnx-tab{ appearance:none; border:0; cursor:pointer; font:inherit; font-weight:700; font-size:.875rem; flex:1 1 0; min-width:0; text-align:center; min-height:2rem; padding:.375rem .875rem; border-radius:var(--cn-pill,999px); color:var(--cn-text-dim,#9aa); background:transparent; transition:color .18s ease, background .18s ease, transform .12s ease; white-space:nowrap; } .cnx-tab:hover{ color:var(--cn-text,#fff); } .cnx-tab:active{ transform:scale(.97); } .cnx-tab.on{ color:var(--cn-primary-ink,#111); background:var(--cn-primary,#e7a94b); box-shadow:0 6px 18px -8px var(--cn-primary,#e7a94b); } .cnx-tab .n{ margin-left:.375rem; font-size:.75rem; opacity:.7; font-variant-numeric:tabular-nums; } /* 工具条:分类 dropdown(左) + 排序(右) */ .cnx-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; } /* 小类 dropdown 触发按钮(在工具条内) */ .cnx-drop{ flex:1 1 auto; min-width:0; } .cnx-drop-btn{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font:inherit; font-weight:600; font-size:.875rem; min-height:2rem; padding:0 .75rem; border-radius:var(--cn-pill,999px); color:var(--cn-text,#fff); background:var(--cn-surface-2,#222); border:1px solid var(--cn-line-2,rgba(255,255,255,.14)); max-width:100%; } .cnx-drop-btn .lb{ color:var(--cn-text-faint,#888); font-weight:500; } .cnx-drop-btn .cur{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:9rem; } .cnx-drop-btn .car{ transition:transform .2s ease; color:var(--cn-text-dim,#9aa); flex:none; } .cnx-drop.open .cnx-drop-btn{ border-color:var(--cn-primary,#e7a94b); color:var(--cn-primary,#e7a94b); } .cnx-drop.open .cnx-drop-btn .car{ transform:rotate(180deg); } /* 展开面板 —— in-flow 手风琴(全宽往下顶开内容,绝不 absolute 浮层盖网格);chips 均匀网格铺开、禁横向滚动。 */ .cnx-drop-panel{ margin-top:.625rem; padding:.75rem; border-radius:var(--cn-radius-lg,1rem); background:var(--cn-surface,#161616); border:1px solid var(--cn-line-2,rgba(255,255,255,.14)); max-height:min(48vh,22.5rem); overflow-y:auto; overscroll-behavior:contain; display:grid; grid-template-columns:repeat(auto-fill,minmax(6rem,1fr)); gap:.5rem; align-content:flex-start; animation:cnxDrop .18s ease; } @keyframes cnxDrop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } } .cnx-chip{ appearance:none; border:0; cursor:pointer; font:inherit; font-size:.75rem; font-weight:600; display:inline-flex; align-items:center; justify-content:center; min-height:1.625rem; padding:0 .5rem; border-radius:var(--cn-pill,999px); color:var(--cn-text-dim,#9aa); background:var(--cn-surface-2,#222); border:1px solid var(--cn-line,rgba(255,255,255,.08)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .15s, background .15s, border-color .15s; } .cnx-chip:hover{ color:var(--cn-text,#fff); border-color:var(--cn-line-2,rgba(255,255,255,.2)); } .cnx-chip.on{ color:var(--cn-primary-ink,#111); background:var(--cn-primary,#e7a94b); border-color:transparent; } /* 排序切换(热门/最新) */ .cnx-sort{ display:inline-flex; padding:.1875rem; gap:2px; border-radius:var(--cn-pill,999px); background:var(--cn-surface,#161616); border:1px solid var(--cn-line,rgba(255,255,255,.08)); flex:none; } .cnx-sortbtn{ appearance:none; border:0; cursor:pointer; font:inherit; font-weight:600; font-size:.8125rem; display:inline-flex; align-items:center; min-height:1.875rem; padding:0 .75rem; border-radius:var(--cn-pill,999px); color:var(--cn-text-dim,#9aa); background:transparent; transition:color .15s, background .15s; } .cnx-sortbtn:hover{ color:var(--cn-text,#fff); } .cnx-sortbtn.on{ color:var(--cn-primary-ink,#111); background:var(--cn-primary,#e7a94b); } /* ★分类内联 chips(老板 2026-07-15:默认 2 排 + 「展开/收起」放 chips 内,替代原下拉)。 */ .cnx-filter{ display:flex; flex-direction:column; gap:.625rem; } /* 顶行:仅排序,靠右(展开/收起已移入 chips 里)。 */ .cnx-filter-bar{ display:flex; justify-content:flex-end; } /* chips 容器:相对定位(承载折叠态绝对切换按钮);默认夹 2 排(裁剪),.expanded 全展开(平滑)。 */ .cnx-cats{ position:relative; display:flex; flex-wrap:wrap; gap:.375rem; overflow:hidden; max-height:calc(1.625rem * 2 + .375rem); transition:max-height .3s cubic-bezier(.4,0,.2,1); } /* 展开:max-height 贴近真实内容高(约 6~8 排),溢出量小 → 纯 CSS 过渡平滑不卡(不用 200rem 溢出)。分类更多/更窄屏可上调此值。 */ .cnx-cats.expanded{ max-height:16rem; } /* 展开/收起:与 chips 同流的实心胶囊;展开态内联在末尾。 */ .cnx-cats-more{ appearance:none; cursor:pointer; font:inherit; font-weight:600; font-size:.75rem; display:inline-flex; align-items:center; gap:.25rem; flex:none; white-space:nowrap; height:1.625rem; line-height:1; padding:0 .625rem; border-radius:var(--cn-pill,999px); color:var(--cn-primary,#e7a94b); background:var(--cn-surface-2,#222); border:1px solid var(--cn-line-2,rgba(255,255,255,.14)); transition:border-color .15s; } .cnx-cats-more .car{ transition:transform .2s ease; flex:none; } .cnx-cats-more .car.up{ transform:rotate(180deg); } .cnx-cats-more:hover{ border-color:var(--cn-primary,#e7a94b); } /* 折叠态:切换按钮固定到 2 排右下角(末位)、始终可见;左侧同底色渐隐盖住被裁 chip。 */ .cnx-cats:not(.expanded) .cnx-cats-more{ position:absolute; right:0; bottom:0; box-shadow:-.625rem 0 .5rem .5rem var(--cn-bg-deep,#0b0a08); } /* 内容网格(老板 2026-07-18 响应式终版:禁横滑 rail,全站纵向网格往下排。<700px/窄窗口(含手机 390) 固定列——漫画/有声(3:4)3 列、视频(16:9)2 列(视频卡故意放大,缩略图主导,别太小);≥700px 起按卡宽 auto-fill 自然算列(880 老板常用窗口仍解出同一固定列数,1440 宽屏自动多列,见 --cn-col-*)。 minmax(0,1fr) 钉死轨道最小值为 0,防卡内标题撑爆列宽导致溢出(auto-fill 档同理,轨道下限用 var(--cn-col-cv/ch) 但仍配合网格自身 min-width:0 由子项 ellipsis 兜底,不会撑爆父级)。 */ /* ★列数一次性定死(老板 2026-07-21 拍板·偏密卡·终版,不再动)——用**固定 repeat(N)** 而非 auto-fill: auto-fill 让列数随容器宽/侧栏宽漂移,是历次"改来改去/三模板不一致"的根因;固定列数三模板同 N、各档确定。视频(data-ct=1):手机2 / 平板3 / PC5 / 宽屏6(老板 2026-07-21 复验:宽屏7 卡太小,封顶6);漫画/有声(默认 ct=3/6):手机3 / 平板4 / PC6 / 宽屏8。断点:<700 手机 · 700–1023 平板 · 1024–1599 PC · ≥1600 宽屏。骨架屏与真内容共用 .cnx-grid[data-ct] 零跳变。 */ /* R7-15 滚动性能(老板 2026-07-21「刷新后下拉卡的动不了」):视口外的栏目网格**跳过渲染/布局** (content-visibility:auto),多栏(16 栏×卡)滚动时浏览器只渲染视口附近的,不再一次性布局全部 → 顺滑; contain-intrinsic-size 给占位高度(视频16:9≈两行/漫画有声≈两行),防跳过时滚动条跳变。 */ .cnx-grid{ display:grid; gap:.375rem; grid-template-columns:repeat(3,minmax(0,1fr)); content-visibility:auto; contain-intrinsic-size:auto 520px; } .cnx-grid[data-ct="1"]{ grid-template-columns:repeat(2,minmax(0,1fr)); } @media (min-width:700px){ .cnx-grid{ gap:.5rem; grid-template-columns:repeat(4,minmax(0,1fr)); } .cnx-grid[data-ct="1"]{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (min-width:1024px){ .cnx-grid{ gap:.625rem; grid-template-columns:repeat(6,minmax(0,1fr)); } .cnx-grid[data-ct="1"]{ grid-template-columns:repeat(5,minmax(0,1fr)); } } @media (min-width:1600px){ .cnx-grid{ gap:.75rem; grid-template-columns:repeat(8,minmax(0,1fr)); } .cnx-grid[data-ct="1"]{ grid-template-columns:repeat(6,minmax(0,1fr)); } } .cnx-card{ display:flex; flex-direction:column; gap:.375rem; text-decoration:none; color:inherit; border-radius:var(--cn-radius,.75rem); transition:transform .18s ease, filter .18s ease; } .cnx-card:hover{ transform:translateY(-3px); } .cnx-card:hover .cnx-cover{ box-shadow:0 10px 24px -12px rgba(0,0,0,.55); border-color:var(--cn-line-2,rgba(255,255,255,.16)); } /* R-UX-013:键盘焦点须独立且明显,禁 outline:none 无替代。卡片本体为 ,焦点环贴合圆角封面。 */ .cnx-card:focus-visible{ outline:none; } .cnx-card:focus-visible .cnx-cover{ outline:2px solid var(--cn-primary,#e7a94b); outline-offset:2px; } .cnx-cover{ position:relative; overflow:hidden; border-radius:var(--cn-radius,.75rem); aspect-ratio:3/4; background:var(--cn-surface-2,#222); border:1px solid var(--cn-line,rgba(255,255,255,.08)); transition:box-shadow .18s ease, border-color .18s ease; } .cnx-grid[data-ct="1"] .cnx-cover{ aspect-ratio:16/9; } .cnx-cover img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:transform .3s ease, opacity .28s ease; } .cnx-cover img[data-loaded="1"]{ opacity:1; } .cnx-card:hover .cnx-cover img{ transform:scale(1.05); } .cnx-cover .ph{ position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(150deg,var(--cn-surface-2,#222),var(--cn-bg-deep,#111)); color:var(--cn-text-faint,#777); font-size:.75rem; letter-spacing:.1em; } /* R4-13:封面懒加载(loading=lazy)决议前的骨架微光(与 .cnx-skel 首屏骨架同一 cnxShimmer 关键帧), 代替此前的纯色空底(易被误认成坏图/卡死)。见 CnCard.tsx CnCover。 */ .cnx-cover-shimmer{ position:absolute; inset:0; overflow:hidden; background:linear-gradient(150deg,var(--cn-surface-2,#222),var(--cn-bg-deep,#111)); } .cnx-cover-shimmer::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); transform:translateX(-100%); animation:cnxShimmer 1.3s infinite; } /* 封面类型徽标:低调小 pill(半透明底,不抢封面);混合区保留,纯视频区隐藏(见下 data-ct="1")。 */ .cnx-tag{ position:absolute; left:.375rem; top:.375rem; padding:1px .375rem; border-radius:var(--cn-pill,999px); font-size:.625rem; font-weight:600; letter-spacing:.02em; line-height:1.5; color:#fff; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); } /* 纯视频区(视频 tab / 榜单 / 推荐,data-ct="1")类型全是视频 → 徽标冗余,隐藏,让封面不被盖。 */ .cnx-grid[data-ct="1"] .cnx-tag{ display:none; } .cnx-dur{ position:absolute; right:.5rem; bottom:.5rem; padding:2px .4375rem; border-radius:.375rem; font-size:.6875rem; font-weight:600; font-variant-numeric:tabular-nums; color:#fff; background:rgba(0,0,0,.66); } .cnx-lock{ position:absolute; right:.5rem; top:.5rem; width:1.5rem; height:1.5rem; border-radius:50%; display:grid; place-items:center; color:#fff; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); } /* 封面左上:吸引力标签容器(热门/独家)——纯视频区也显示(覆盖类型标 display:none)。 */ .cnx-tags{ position:absolute; left:.375rem; top:.375rem; display:flex; gap:.25rem; z-index:2; } .cnx-tags .cnx-tag{ position:static; left:auto; top:auto; display:inline-flex; align-items:center; } .cnx-grid[data-ct="1"] .cnx-tags .cnx-tag{ display:inline-flex; } .cnx-tag.hot{ color:#fff; background:linear-gradient(135deg,#ff5a3c,#ff2d55); box-shadow:0 2px 8px -2px rgba(255,45,85,.55); } .cnx-tag.excl{ color:var(--cn-primary-ink,#111); background:var(--cn-primary,#e7a94b); } /* 封面右上:权限角标 —— 🔒锁定(圆)/ 免费(绿字小pill)。 */ .cnx-access{ position:absolute; right:.375rem; top:.375rem; display:inline-flex; align-items:center; justify-content:center; height:1.375rem; padding:0 .5rem; border-radius:var(--cn-pill,999px); font-size:.6875rem; font-weight:700; backdrop-filter:blur(2px); z-index:2; } .cnx-access.free{ color:#3ad07a; background:rgba(0,0,0,.5); } .cnx-access.lock{ width:1.375rem; height:1.375rem; padding:0; border-radius:50%; color:#fff; background:rgba(0,0,0,.62); } .cnx-rank{ position:absolute; left:0; top:0; min-width:1.625rem; height:1.625rem; padding:0 .4375rem; display:grid; place-items:center; font-weight:800; font-size:.875rem; font-variant-numeric:tabular-nums; color:var(--cn-primary-ink,#111); background:var(--cn-primary,#e7a94b); border-bottom-right-radius:.625rem; } .cnx-rank.top{ color:#fff; background:var(--cn-danger,#d8583f); } /* 封面左下:价格/免费角标(由卡片下方上移到封面 → 省一行,卡片更紧凑精致)。视频时长在右下、锁在右上,不冲突。 */ .cnx-badge{ position:absolute; left:.375rem; bottom:.375rem; display:inline-flex; align-items:center; gap:.25rem; padding:.125rem .4375rem; border-radius:var(--cn-pill,999px); font-size:.6875rem; font-weight:700; line-height:1.5; color:#fff; background:rgba(0,0,0,.6); backdrop-filter:blur(2px); font-variant-numeric:tabular-nums; } .cnx-badge.free{ color:var(--cn-ok,#6f9e5b); background:rgba(0,0,0,.55); } .cnx-badge .coin{ width:.6875rem; height:.6875rem; border-radius:50%; flex:none; background:var(--cn-coin,#f5c451); box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25); } .cnx-badge .cval{ color:var(--cn-coin,#f5c451); } /* 标题:更精致的小字号(task2 缩小),恒占 2 行高 → 同排卡片对齐、卡高一致。 */ .cnx-title{ font-size:.75rem; font-weight:600; line-height:1.35; color:var(--cn-text,#fff); min-height:calc(1.35em * 2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* ===== 全站唯一网格衍生态(解耦重构 2026-07-18):有声占位 / 已购 / 收藏取消 —— 三主题共用 ===== */ /* 封面占位:有声(声波图标),与品牌首字占位区分,避免整排无封面卡「一模一样像空壳」。 */ .cnx-cover .ph.audio{ color:var(--cn-text-faint,#777); } .cnx-cover .ph.audio svg{ width:38%; max-width:2.75rem; height:auto; } /* 封面占位:漫画(书本图标),同一手法与有声区分,避免整排漫画空壳卡「一模一样像破图」(R-UX-056)。 */ .cnx-cover .ph.comic{ color:var(--cn-text-faint,#777); } .cnx-cover .ph.comic svg{ width:32%; max-width:2.25rem; height:auto; } /* 类型徽标(混合网格·收藏/已购):纯视频网格(data-ct=1)隐藏冗余「视频」标。 */ .cnx-grid[data-ct="1"] .cnx-tag.type{ display:none; } /* 已购角标(右上·绿;限时买断金) */ .cnx-owned{ position:absolute; right:.375rem; top:.375rem; display:inline-flex; align-items:center; height:1.375rem; padding:0 .5rem; border-radius:var(--cn-pill,999px); font-size:.6875rem; font-weight:700; color:#3ad07a; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); z-index:2; } .cnx-owned.timed{ color:var(--cn-coin,#f5c451); } /* 已购日期(替代标题行,恒占 2 行高与标题卡对齐) */ .cnx-date{ display:flex; align-items:center; gap:.25rem; font-size:.6875rem; color:var(--cn-text-dim,#9aa); min-height:calc(1.35em * 2); } /* 收藏卡:取消收藏心形按钮( 的 sibling,不嵌套可交互元素;绝对定位叠卡面右上,点击不触发跳转) */ .cnx-lib{ position:relative; } .cnx-fav-remove{ position:absolute; right:.5rem; top:.5rem; z-index:3; appearance:none; border:0; cursor:pointer; width:1.875rem; height:1.875rem; border-radius:50%; display:grid; place-items:center; color:var(--cn-primary,#e7a94b); background:rgba(0,0,0,.55); backdrop-filter:blur(2px); transition:transform .12s ease; } .cnx-fav-remove svg{ width:1rem; height:1rem; } .cnx-fav-remove:active{ transform:scale(.9); } .cnx-fav-remove:disabled{ cursor:default; opacity:.7; } .cnx-spin{ animation:cnxSpin .8s linear infinite; } @keyframes cnxSpin{ to{ transform:rotate(360deg); } } /* 骨架(首页局部,不动公共骨架组件) */ .cnx-skel .cnx-cover{ position:relative; overflow:hidden; } .cnx-skel .cnx-cover::after,.cnx-skel .ln::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); transform:translateX(-100%); animation:cnxShimmer 1.15s infinite; } .cnx-skel .ln{ position:relative; overflow:hidden; height:.75rem; border-radius:.375rem; background:var(--cn-surface-2,#222); } .cnx-skel .ln.s{ width:60%; } @keyframes cnxShimmer{ 100%{ transform:translateX(100%); } } /* 空态 */ .cnx-empty{ padding:3.5rem 1.25rem; text-align:center; color:var(--cn-text-dim,#9aa); border:1px dashed var(--cn-line-2,rgba(255,255,255,.14)); border-radius:var(--cn-radius-lg,1rem); } .cnx-empty .ic{ font-size:1.875rem; margin-bottom:.5rem; opacity:.5; } .cnx-empty .r{ margin-top:.875rem; } .cnx-retry{ appearance:none; cursor:pointer; font:inherit; font-weight:600; padding:.5rem 1.125rem; border-radius:var(--cn-pill,999px); color:var(--cn-primary-ink,#111); background:var(--cn-primary,#e7a94b); border:0; } /* 加载更多 / 触底哨兵 / 到底 */ .cnx-more{ display:flex; justify-content:center; padding:1.25rem 0 .375rem; } .cnx-more-btn{ appearance:none; cursor:pointer; font:inherit; font-weight:600; font-size:.875rem; min-height:2.75rem; padding:0 1.625rem; border-radius:var(--cn-pill,999px); color:var(--cn-text,#fff); background:var(--cn-surface-2,#222); border:1px solid var(--cn-line-2,rgba(255,255,255,.14)); transition:color .15s, border-color .15s; } .cnx-more-btn:hover{ color:var(--cn-primary,#e7a94b); border-color:var(--cn-primary,#e7a94b); } .cnx-more-btn:disabled{ opacity:.6; cursor:default; } .cnx-end{ font-size:.75rem; color:var(--cn-text-faint,#777); letter-spacing:.06em; } /* 大类列表页(漫画/小说/图集)标题头 */ .cnx-page-head{ display:flex; align-items:baseline; gap:.75rem; } .cnx-page-head h1{ margin:0; font-size:1.375rem; font-weight:800; color:var(--cn-text,#fff); } .cnx-page-head .sub{ font-size:.8125rem; color:var(--cn-text-faint,#888); } /* PC(≥768):tab 组收敛为居中 pill 组(不满宽拉伸);网格列数固定(见上方 .cnx-grid),PC/H5 同口径。 */ @media (min-width:768px){ .cnx-tabs{ width:max-content; margin-inline:auto; } .cnx-tab{ flex:0 0 auto; } } @media (max-width:767px){ .cnx-tab{ font-size:.875rem; } .cnx-toolbar{ gap:.5rem; } .cnx-sort{ order:2; } }