/* ========================================================================== WAKE 用户端（/webapp/）· 站点层排版 数值来源：东东电竞 PC 端 1.63MB CSS + Android dimens 实测统计 · 字号只用 12 / 14 / 16，18 以上只给页标题与金额 · 行高固定像素：12→20、13→18、14→22、16→24、18→24、20→28、24→32 · 字重默认 500（Medium），标题 700 · 圆角只用 4 / 8 / 12 / 999，8 是标准 · 间距只用 4 / 8 / 12 / 16 / 24 · 卡片 padding 16、卡片间距 12、控件高 40、列表行 56 · 分层靠 1px 描边 + 底色差，不靠阴影 结构参考：小黑盒（频道 tab + 单列大卡信息流 + 16:9 封面） ========================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--wk-bg); color: var(--wk-ink); font-size: 13px; line-height: 17px; font-weight: 500 } /* 原生 button 归零：库组件类用 :where() 之外的选择器，仍能覆盖本行（0 特异性） */ :where(.wapp-frame) :where(button) { background: transparent; border: 0; padding: 0; color: inherit; font: inherit; } /* ---------- 外壳 ---------- */ .wapp-frame { width: 100%; max-width: 560px; margin: 0 auto; min-height: 100dvh } @media (min-width: 900px) { body { background: var(--wk-card-2, var(--wk-bg)); } .wapp-frame { max-width: 1040px; border-left: 1px solid var(--wk-line); border-right: 1px solid var(--wk-line); } .wapp-frame > .wk-page { min-height: 100dvh; } .wapp-two { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; } .wapp-two > .wapp-col-r { position: sticky; top: 16px; } .wapp-hide-desk { display: none !important; } .wapp-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } @media (max-width: 899px) { .wapp-hide-mob { display: none !important; } .wapp-two { display: block; } .wapp-body { padding: 12px 16px 32px; } } .wapp-chans::-webkit-scrollbar { display: none; } .wapp-chan { position: relative; flex: none; border: 0; background: transparent; font-family: inherit; line-height:19px; color: var(--wk-ink-3); cursor: pointer } .wapp-chan.is-on { color: var(--wk-ink); font-weight: 700; } .wapp-chan.is-on::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 24px; height: 2px; border-radius: 1px; background: var(--wk-ink); } /* ---------- 通用块 ---------- */ .wapp-sec-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px } .wapp-sec-hd h2 { margin: 0 } .wapp-sec-hd a { line-height: 14px; text-decoration: none } /* ---------- 搜索 / 公告 ---------- */ .wk-search { height: 40px; } .wapp-quick::-webkit-scrollbar { display: none; } @media (min-width: 900px) { .wapp-quick {} } .wapp-q { min-width: 64px; display: flex; flex-direction: column; align-items: center; padding: 8px 8px; border-radius: 8px; background: transparent; border: 0; font-family: inherit; line-height:14px; cursor: pointer } .wapp-q:active { background: var(--wk-fill); } .wapp-q i { font-size:18px; line-height:19px; color: var(--wk-ink); } /* ---------- 信息流大卡（小黑盒式） ---------- */ .wapp-feed { display: block; } .wapp-card { display: block; width: 100%; margin: 0 0 12px; overflow: hidden; text-align: left; font-family: inherit; color: inherit; cursor: pointer } .wapp-card-media { position: relative; aspect-ratio: 2 / 1; background: var(--wk-fill) } .wapp-card-media img { width: 100%; height: 100%; display: block } .wapp-card-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--wk-card); font-size:18px; background: color-mix(in srgb, var(--wk-ink) 24%, transparent); } .wapp-card-t { margin: 0; color: var(--wk-ink); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden } .wapp-card-b { margin: 4px 0 0; color: var(--wk-ink-2); font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .wapp-card-by { color: var(--wk-ink-2); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .wapp-card-tm { color: var(--wk-ink-3) } .wapp-card-stats { flex: none; white-space: nowrap } .wapp-card-by { flex: 0 1 auto; } .wapp-card-stats i { margin-right: 3px; } /* ---------- 列表行（56 基准） ---------- */ .wapp-list { background: var(--wk-card); border-radius: 12px; border: 1px solid var(--wk-line); overflow: hidden; } .wapp-row { width: 100%; border: 0; background: transparent; text-align: left; font-family: inherit; cursor: pointer; color: inherit } .wapp-row + .wapp-row { box-shadow: inset 0 1px 0 var(--wk-line); } .wapp-row:active { background: var(--wk-fill); } .wapp-row-s { display: block } .wapp-row .wapp-cell__arrow { flex: none; } /* ---------- 商品卡（东东式栅格：gap 12 / padding 12~16） ---------- */ @media (min-width: 900px) { .wapp-cards {} } .wapp-pcard { width: 100%; padding: 0; text-align: left; font-family: inherit; color: inherit; cursor: pointer } .wapp-pcard:active { background: var(--wk-fill); } .wapp-pcard-media { display: flex; align-items: center; justify-content: center; color: var(--wk-ink-4); font-size:18px } .wapp-pcard-media img { height: 100%; object-fit: cover } /* ---------- 价格 ---------- */ .wapp-price { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums } .wapp-price i { line-height:14px } .wapp-price em { line-height:14px } @media (min-width: 900px) { .wapp-rail { padding: 2px 0 12px} } /* ---------- 接单人 / 会话 ---------- */ .wapp-taker { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 56px; } .wapp-taker + .wapp-taker { box-shadow: inset 0 1px 0 var(--wk-line); } .wapp-taker-main { flex: 1; min-width: 0; } .wapp-taker-name { display: flex; align-items: center; gap: 6px; font-size:13px; line-height:17px; font-weight: 700; } .wapp-taker-sub { font-size:11px; line-height:14px; color: var(--wk-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-order-ft { align-items: center; justify-content: flex-end } /* ---------- 我的 ---------- */ .wapp-kpi { grid-template-columns: repeat(3, 1fr); padding: 12px 8px 16px } .wapp-kpi > div { text-align: center; } .wapp-kpi b { display: block; font-variant-numeric: tabular-nums } /* ---------- toast / 骨架 ---------- */ .wapp-toast { position: fixed; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); max-width: min(86vw, 420px); padding: 8px 16px; border-radius: 999px; background: var(--wk-ink); color: var(--wk-card); font-size:12px; line-height:14px; opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 90; text-align: center; } .wapp-toast.is-on { opacity: .96; transform: translate(-50%, 0); } .wapp-sk { padding: 16px; display: flex; flex-direction: column; gap: 8px; } .wapp-sk .wk-skeleton:nth-child(2) { width: 70%; } .wapp-sk .wk-skeleton:nth-child(3) { width: 45%; } /* ---------- 底栏可读性（库默认 10px + ink-3 偏弱） ---------- */ /* ---------- 深色档补偿（库默认 ink-4 在深底偏暗） ---------- */ html[data-theme="dark"] .wk-search input::placeholder { color: var(--wk-ink-3); } html[data-theme="dark"] .wk-tabbar__item { color: var(--wk-ink-2); } html[data-theme="dark"] .wapp-card-b, html[data-theme="dark"] .wapp-pcard-s, html[data-theme="dark"] .wapp-card-tm { color: var(--wk-ink-3); } .wapp-prod + .wapp-prod { box-shadow: inset 0 1px 0 var(--wk-line); } .wapp-cover { width: 84px; height: 84px; flex: none; border-radius: 8px; background: var(--wk-fill); color: var(--wk-ink-4); display: flex; align-items: center; justify-content: center; font-size:18px; overflow: hidden; } .wapp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .wapp-item + .wapp-item { box-shadow: inset 0 1px 0 var(--wk-line); } .wapp-post { padding: 12px 16px; } .wapp-post + .wapp-post { box-shadow: inset 0 1px 0 var(--wk-line); } /* ---------- 浮层：支付 / 输入 / 确认 ---------- */ .wapp-qr { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: 8px 0; } .wapp-qr img, .wapp-qr canvas { width: 192px; height: 192px; border-radius: 8px; background: #fff; } /* ---------- 规格选择 ---------- */ /* ---------- 数量步进 ---------- */ /* ---------- 底部购买条 ---------- */ .wapp-buybar { position: sticky; margin: 12px -12px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) } /* ---------- 价格档 ---------- */ .wapp-price--xl b { font-size:18px; line-height:25px; } .wapp-price em { font-style: normal; color: var(--wk-ink-3) } /* ---------- KPI 三档 ---------- */ .wapp-kpis { margin-top: 12px } .wapp-kpis > div { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 8px; background: var(--wk-fill); } .wapp-kpis b { font-size:13px; line-height:19px; font-weight: 700; } .wapp-kpis span { font-size:11px; line-height:14px; color: var(--wk-ink-3); } /* ---------- 流水金额 ---------- */ .wapp-row-amt { font-size:13px; line-height:17px; font-weight: 500; color: var(--wk-ink-2); } .wapp-row-amt.is-in { color: var(--wk-success); } /* ---------- 聊天 ---------- */ .wapp-chat { display: flex; flex-direction: column; gap: 12px; padding: 12px 0 96px; } .wapp-msg.is-me { align-items: flex-end; } .wapp-msg-b { max-width: 78%; padding: 8px 12px; border-radius: 12px; background: var(--wk-fill); font-size:13px; line-height:17px; word-break: break-word; } .wapp-msg.is-me .wapp-msg-b { background: var(--wk-accent-weak); } .wapp-msg-b img { max-width: 200px; border-radius: 8px; display: block; } .wapp-msg-t { color: var(--wk-ink-3) } .wapp-chatbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; gap: 8px; align-items: center } @media (min-width: 900px) { .wapp-chatbar { max-width: 1040px; margin: 0 auto; } } .wapp-post-imgs { flex-direction: column } /* ---------- 搜索条 ---------- */ .wapp-searchbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; } .wapp-searchbar .wk-search { flex: 1; } /* ---------- 站点私有令牌（媒体浮层用色，不随主题走） ---------- */ :root { --wapp-on-media: #fff; --wapp-cam-bg: var(--wk-ink); --wapp-cam-mask: rgba(0, 0, 0, .55); --wapp-shade: rgba(0, 0, 0, .62); --wapp-shade-0: rgba(0, 0, 0, 0); --wapp-dot: rgba(255, 255, 255, .5); --wapp-cta-ink: #101418; } /* ---------- 首页轮播（小黑盒式） ---------- */ /* 活动角标 */ @media (min-width: 900px) { } /* ---------- 底栏中间加号（发布） ---------- */ /* ---------- 发布浮层条目 ---------- */ /* 底栏页面的内容底部留白：56 底栏 + 凸起加号 */ /* ---------- 弹层内的站点级排版（只用库组件，这里只补间距/数字排版） ---------- */ .wapp-sheet-amt { text-align: center; padding: 8px 0 4px; color: var(--wk-ink); } .wapp-pay-note { margin: 0 0 12px; text-align: center; font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-sheet-amt i { font-style: normal; font-size:13px; font-weight: 600; margin-right: 2px; } .wapp-sheet-amt b { font-size:18px; line-height:31px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.5px; } .wk-sheet__body .wapp-qr { margin: 12px auto 8px; } .wapp-seg-wrap { flex-wrap: wrap; background: transparent; padding: 0 } .wapp-seg-wrap .wk-seg__item { background: var(--wk-fill); color: var(--wk-ink-2) } .wapp-seg-wrap .wk-seg__item.is-on { background: var(--wk-accent); color: var(--wk-on-accent); box-shadow: none; } .wapp-pub-list .wk-cell { cursor: pointer; } /* 弹层里的图标统一装进 36 的底框，压平各图标字形的粗细差异 */ .wapp-pub-ico { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--wk-fill); color: var(--wk-ink-2); font-size:14px; } .wapp-pub-list .wk-cell__hd { margin-right: 12px; } /* 数量行：标签在左、步进器在右（库的 .wk-stepper 是 inline-flex，塞进 flex 列会被拉满） */ .wapp-field-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; } .wapp-field-row .wk-field__label { margin: 0; } /* 库 bug：components.css 里 .wk-dialog 定义了两遍（320/圆角16 与 536/圆角8），后一条覆盖前一条， 手机端确认弹窗被撑到整屏宽。这里只在遮罩内的 dialog 上把规格收回原意（不动库文件）。 */ .wk-mask .wk-dialog-wrap .wk-dialog { max-width: 320px; border-radius:12px; } .wapp-voice-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--wk-ink-4); flex: none; } .wapp-voice-dot.is-live { background: var(--wk-success, var(--wk-ok)); } .wapp-voice-p.is-talk { background: var(--wk-accent-weak); color: var(--wk-accent-ink); } .wapp-voice-p.is-talk i { background: var(--wk-accent); color: var(--wk-on-accent); } .wapp-voice-dock .wk-btn { flex: 1; } /* ---------- 语音：三栏（服务器 / 分组+频道 / 频道内） ---------- */ .wapp-page--bare .wk-page__body, .wapp-body--bare { padding: 0 !important; } .wapp-v3 { display: grid; grid-template-columns: 52px 176px minmax(0, 1fr); height: 100vh; height: 100dvh; margin: 0; overflow: hidden; } .wapp-v3-rail { background: var(--wk-fill); border-right: 1px solid var(--wk-line); display: flex; flex-direction: column; align-items: center; padding: 6px 0 8px; overflow: hidden; } .wapp-v3-srvs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; } .wapp-v3-foldb { width: 24px; height: 24px; flex: none; border: 0; background: none; color: var(--wk-ink-3); display: flex; align-items: center; justify-content: center; cursor: pointer; margin-bottom: 4px } .wapp-v3-foldb i { display: flex; transition: transform .15s ease; } .wapp-v3-me { flex: none; margin-top: 8px; border: 0; background: none; padding: 0; width: 34px; height: 34px; cursor: pointer; } .wapp-v3-me > span { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--wk-accent); color: var(--wk-on-accent); font-size:12px; font-weight: 700; overflow: hidden; } .wapp-v3-me img { width: 100%; height: 100%; object-fit: cover; display: block; } .wapp-v3.is-fold { grid-template-columns: 18px 176px minmax(0, 1fr); } .wapp-v3-back, .wapp-v3-foldb { font-size:13px; } .wapp-v3.is-fold .wapp-v3-rail { padding: 6px 0; } .wapp-v3.is-fold .wapp-v3-srvs, .wapp-v3.is-fold .wapp-v3-me { display: none; } .wapp-v3.is-fold .wapp-v3-foldb { width: 18px; margin: 0; color: var(--wk-ink-2); } .wapp-v3.is-fold .wapp-v3-rail { background: var(--wk-fill); } .wapp-v3.is-fold .wapp-v3-foldb i { transform: rotate(180deg); } .wapp-v3-srv { width: 38px; height: 38px; border-radius: 12px; border: 0; flex: none; background: var(--wk-card); color: var(--wk-ink-2); font-family: inherit; font-size:11px; line-height:14px; font-weight: 700; cursor: pointer; } .wapp-v3-srv.is-on { background: var(--wk-accent); color: var(--wk-on-accent); border-radius: 12px; } .wapp-v3-mid { background: var(--wk-card); border-right: 1px solid var(--wk-line); display: flex; flex-direction: column; min-height: 0; } .wapp-v3-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0 12px; } .wapp-v3-group { padding: 4px 0; } .wapp-v3-group + .wapp-v3-group { border-top: 1px solid var(--wk-line); margin-top: 4px; } .wapp-v3-gname { display: flex; align-items: center; gap: 2px; width: 100%; padding: 10px 8px 4px; border: 0; background: none; font-family: inherit; font-size:11px; line-height:14px; font-weight: 700; color: var(--wk-ink); cursor: pointer; text-align: left; } .wapp-v3-gname i { display: flex; font-size:11px; color: var(--wk-ink-3); transition: transform .15s ease; } .wapp-v3-gname i.is-open { transform: rotate(90deg); } .wapp-v3-gname span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-v3-gname.is-static { cursor: default; padding-left: 14px; } .wapp-v3-ch { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 36px; padding: 0 8px; border: 0; background: none; font-family: inherit; font-size:12px; line-height:14px; color: var(--wk-ink); text-align: left; cursor: pointer; border-radius:8px; } .wapp-v3-ch i { font-size:13px; color: var(--wk-ink-3); display: flex; } .wapp-v3-ch span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-v3-ch em { font-style: normal; font-size:10px; line-height:14px; color: var(--wk-ink-2); flex: none; } .wapp-v3-ch { position: relative; } .wapp-v3-ch.is-on { background: var(--wk-accent-weak); color: var(--wk-accent-ink); font-weight: 600; } .wapp-v3-ch.is-on::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius:4px; background: var(--wk-accent); } .wapp-v3-ch:active { background: var(--wk-fill); } .wapp-v3-ch.is-on i { color: var(--wk-accent-ink); } .wapp-v3-right { overflow: hidden; background: var(--wk-bg); display: flex; flex-direction: column; min-height: 0; } .wapp-v3-empty-t { font-size:11px; line-height:14px; color: var(--wk-ink-2); max-width: 200px; } .wapp-v3-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 6px; padding: 0 18px; text-align: center; } .wapp-v3-empty-ic { font-size:18px; color: var(--wk-ink-4); margin-bottom: 4px; } .wapp-v3-stage { padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0)); display: flex; flex-direction: column; height: 100%; min-height: 0; flex: 1; } .wapp-v3-hd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .wapp-v3-hd b { font-size:13px; line-height:17px; font-weight: 700; } .wapp-v3-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 12px; } .wapp-v3-seat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 10px; background: var(--wk-card); } .wapp-v3-seat i { width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--wk-fill); color: var(--wk-ink); font-style: normal; font-size:12px; font-weight: 700; } .wapp-v3-seat span { font-size:10px; line-height:14px; color: var(--wk-ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-v3-seat.is-talk { outline: 2px solid var(--wk-success, var(--wk-ok)); } .wapp-v3-seat.is-talk i { background: var(--wk-success, var(--wk-ok)); color: #fff; } .wapp-v3-dock { display: flex; gap: 8px; margin-top: 16px; } .wapp-v3-dock .wk-btn { flex: 1; } @media (max-width: 380px) { .wapp-v3 { grid-template-columns: 48px 152px minmax(0, 1fr); } } /* 语音控件条（中栏底部） */ .wapp-v3-ctrl { flex: none; display: flex; gap: 4px; padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0)); border-top: 1px solid var(--wk-line); background: var(--wk-card); } .wapp-v3-cbtn { flex: 1; min-width: 0; height: 44px; border: 0; border-radius: 8px; background: var(--wk-fill); color: var(--wk-ink-2); font-family: inherit; font-size:10px; line-height:12px; white-space: nowrap; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; } .wapp-v3-cbtn i { font-size:13px; display: flex; } .wapp-v3-cbtn.is-off { background: var(--wk-fill) } .wapp-v3-cbtn.is-on { color: var(--wk-on-accent); background: var(--wk-accent); } .wapp-v3-vol { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 40px; border-top: 1px solid var(--wk-line); background: var(--wk-card); font-size:11px; color: var(--wk-ink-2); } .wapp-v3-vol.is-hide { display: none; } .wapp-v3-vol .wk-slider { flex: 1; min-width: 0; } .wapp-v3-vol em { font-style: normal; font-size:11px; color: var(--wk-ink-2); width: 26px; text-align: right; } /* 服务器卡：海报 + 名称/等级 + ID/设置 */ .wapp-v3-srvcard { padding: 0 0 8px; border-bottom: 1px solid var(--wk-line); margin-bottom: 6px; } .wapp-v3-poster { width: 100%; aspect-ratio: 12 / 5; overflow: hidden; background: var(--wk-ink); } .wapp-v3-poster img { width: 100%; height: 100%; object-fit: cover; display: block; } .wapp-v3-srvrow { display: flex; align-items: center; gap: 6px; padding: 8px 10px 2px; } .wapp-v3-srvrow b { flex: 1; min-width: 0; font-size:12px; line-height:14px; font-weight: 700; color: var(--wk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-v3-lv { flex: none; font-size:10px; line-height:14px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--wk-accent-weak); color: var(--wk-accent-ink); } .wapp-v3-srvmeta { display: flex; align-items: center; gap: 6px; padding: 2px 8px 0 10px; } .wapp-v3-sid { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font-family: inherit; font-size:10px; line-height:14px; color: var(--wk-ink-2); cursor: pointer; text-align: left; } .wapp-v3-sid span { flex: none; } .wapp-v3-sid:hover span { color: var(--wk-accent-ink); } .wapp-v3-sid:active span { color: var(--wk-accent-ink); } .wapp-v3-sset { flex: none; width: 28px; height: 28px; border: 0; border-radius:8px; background: var(--wk-fill); color: var(--wk-ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; } .wapp-v3-sset i { font-size:13px; } .wapp-v3-back { width: 24px; height: 24px; flex: none; border: 0; background: none; color: var(--wk-ink-2); display: flex; align-items: center; justify-content: center; font-size:13px; cursor: pointer; margin-bottom: 2px; } .wapp-v3.is-fold .wapp-v3-back { display: none; } /* 服务器栏：虚线加号 */ .wapp-v3-add { width: 38px; height: 38px; flex: none; border-radius: 12px; cursor: pointer; border: 1.5px dashed var(--wk-line-2, #b7bdc6); background: none; color: var(--wk-ink-2); display: flex; align-items: center; justify-content: center; } .wapp-v3-add i { font-size:13px; } .wapp-v3-add:active { background: var(--wk-fill); color: var(--wk-ink); } /* 站点内联图标（库缺 mic / volume 时补位） */ .wapp-i { display: inline-flex; align-items: center; justify-content: center; } .wapp-i svg { width: 1em; height: 1em; display: block; } .wapp-v3-cbtn .wapp-i { font-size:13px; } .wapp-v3-cbtn.is-off { color: var(--wapp-danger, var(--wk-danger)); } .wapp-v3-cbtn.is-off .wapp-i { color: var(--wapp-danger, var(--wk-danger)); } /* 声音设置面板 */ .wapp-set { padding: 4px 0 8px; } .wapp-set__row { padding: 10px 4px 12px; border-bottom: 1px solid var(--wk-line); } .wapp-set__row:last-child { border-bottom: 0; } .wapp-set__hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; } .wapp-set__hd b { font-size:13px; line-height:15px; font-weight: 700; color: var(--wk-ink); } .wapp-set__hd em { font-style: normal; font-size:11px; color: var(--wk-ink-2); } .wapp-set .wk-cell { width: 100%; text-align: left; border: 0; background: none; padding-left: 0; padding-right: 0; } .wapp-set__ok { width: 100%; } .wapp-mchips .wk-chip { flex: none; } .wapp-mcard:active { background: var(--wk-fill); } .wapp-mcard-av img, .wapp-mcard-av .wk-avatar { width: 48px; height: 48px; border-radius: var(--wk-r-full); object-fit: cover; } .wapp-mcard-tags .wk-chip { font-size:10px; height: 22px; padding: 0 8px; flex: none; } .wapp-mhero { display: flex; gap: var(--wk-sp-3); padding: var(--wk-sp-2) 0 var(--wk-sp-3) } .wapp-mhero-av img, .wapp-mhero-av .wk-avatar { width: 56px; height: 56px; border-radius: var(--wk-r-full); object-fit: cover; } .wapp-mhero-b { min-width: 0; } .wapp-mhero-t { line-height:21px; font-weight: 700 } .wapp-mhero-t em { font-style: normal; } .wapp-mhero-s { font-size:11px; line-height:14px; color: var(--wk-ink-2); margin-top: 2px; } .wapp-sechd { display: flex; align-items: baseline; justify-content: space-between } .wapp-sechd b { font-size:13px; line-height:17px; font-weight: 700; } .wapp-sechd em { font-style: normal; font-size:11px; color: var(--wk-ink-2); } .wapp-dock2 { display: flex; gap: var(--wk-sp-2) } .wapp-dock2 .wk-btn { flex: 1; } .wapp-msort { align-items: center } .wapp-msort > span { font-size:11px; color: var(--wk-ink-3); flex: none; } .wapp-mcard-r .wapp-price b { font-size:13px; line-height:17px; font-weight: 700; color: var(--wk-ink); } .wapp-mcard-tags .wk-chip { color: var(--wk-ink-2); } .wapp-mrows { display: flex; flex-direction: column; } .wapp-mrow { display: flex; align-items: center; gap: var(--wk-sp-2); width: 100%; padding: 10px 0; border: 0; background: none; border-top: 1px solid var(--wk-line); font-family: inherit; text-align: left; cursor: pointer; } .wapp-mrow:first-child { border-top: 0; } .wapp-mrow-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .wapp-mrow-b b { font-size:13px; line-height:15px; font-weight: 600; color: var(--wk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-mrow-b em { font-style: normal; font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-mrow-r { flex: none; display: flex; align-items: center; gap: 2px; color: var(--wk-ink-3); } .wapp-mrow-r .wapp-price b { font-size:13px; font-weight: 700; color: var(--wk-ink); } .wapp-mrow-r i { font-size:12px; display: flex; } .wapp-dock2 { position: sticky; bottom: 0; margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0)); background: var(--wk-card); border-top: 1px solid var(--wk-line); } .wapp-dock2__dm { flex: 0 0 96px !important; } .wapp-sechd em { font-weight: 500; } /* ---------- 找大神 v2（对标东东电竞版式） ---------- */ .wapp-mtabs { display: flex } .wapp-mtab { border: 0; border-radius: 999px; padding: 7px 14px; font-family: inherit; cursor: pointer; font-size:12px; line-height:14px; font-weight: 600; color: var(--wk-ink-2); background: var(--wk-fill); } .wapp-mtab.is-on { background: var(--wk-accent); color: var(--wk-on-accent); font-weight: 700; } .wapp-gwrap { margin-bottom: var(--wk-sp-3); } .wapp-msort { display: flex; gap: var(--wk-sp-2); } .wapp-msort .wk-chip { flex: none; } .wapp-mlist { display: flex; flex-direction: column; gap: 12px; padding-bottom: 72px; } .wapp-mc { display: flex; gap: 12px; width: 100%; padding: 14px; border: 1px solid var(--wk-line); border-radius:12px; background: var(--wk-card); font-family: inherit; text-align: left; cursor: pointer; } .wapp-mc:active { background: var(--wk-fill); } .wapp-mc-av { flex: none; display: flex; } .wapp-mc-av img, .wapp-mc-av .wk-avatar { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; } .wapp-mc-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .wapp-mc-r1 { display: flex; align-items: center; gap: 6px; } .wapp-mc-r1 b { font-size:13px; line-height:17px; font-weight: 700; color: var(--wk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52%; } .wapp-mc-state.is-on { background: var(--wk-accent-weak); color: var(--wk-accent-ink); } .wapp-mc-r3 { display: flex; align-items: center; gap: 6px; overflow: hidden; } .wapp-mc-sign { font-style: normal; font-size:11px; line-height:14px; color: var(--wk-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-mc-r4 .wapp-price i { font-size:11px; } .wapp-mc-r4 .wapp-price b { font-size:14px; line-height:19px; font-weight: 700; color: var(--wk-ink); } .wapp-ggrid.is-two { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); } .wapp-mc-cta { font-style: normal; font-size:11px; line-height:21px; padding: 0 10px; border-radius: 999px; background: var(--wk-accent); color: var(--wk-on-accent); font-weight: 700; } /* 桌面宽屏：找大神内容收窄居中，避免卡片被拉成横屏版 */ @media (min-width: 900px) { .wapp-pagecol { max-width: 760px; margin: 0 auto; } .wapp-pagecol .wapp-fab { right: calc(50% - 380px + 8px); } } /* 有底栏时：悬浮按钮抬高、列表底部留够 */ .wk-page--tabbar .wapp-fab { bottom: calc(72px + env(safe-area-inset-bottom, 0)); } .wk-page--tabbar .wapp-mlist { padding-bottom: 96px; } /* 游戏宫格：一页 8 个（2×4），横向滑动分页 */ .wapp-gscroller { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .wapp-gscroller::-webkit-scrollbar { display: none; } .wapp-gpage { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 6px } .wapp-gpage .wapp-i { width: 12px; height: 12px; flex: none; } .wapp-gdots { display: flex; justify-content: center; gap: 5px; padding: 6px 0 2px; } .wapp-gdot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: var(--wk-line, #c8ccd4); cursor: pointer; } .wapp-gdot.is-on { width: 14px; background: var(--wk-accent); } /* 三级筛选选中态统一为黑底白字，层级靠尺寸区分 */ .wapp-msort .wk-chip.is-on { background: var(--wk-accent); color: var(--wk-on-accent); font-weight: 600; border-color: transparent; } .wapp-mq { display: flex; align-items: center; gap: 5px; min-width: 0; } .wapp-mq img { width: 18px; height: 18px; flex: none; border-radius: 50%; object-fit: cover; background: var(--wk-fill); } .wapp-mq .wapp-i { width: 18px; height: 18px; flex: none; border-radius: 50%; color: var(--wk-ink-3); background: var(--wk-fill); padding: 3px; } .wapp-mq b { font-size:11px; line-height:14px; font-weight: 500; color: var(--wk-ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-mq-lv { flex: none; font-style: normal; font-size:11px; line-height:14px; padding: 0 6px; border-radius: 4px; background: var(--wk-fill); color: var(--wk-ink-2); } /* 大神主页：昵称后的性别 */ .wapp-mhero-sex { font-style: normal; font-size:11px; line-height:14px; font-weight: 500; color: var(--wk-ink-3); margin-left: 6px; } .wapp-mhero-t { display: flex; align-items: center; gap: 6px; } .wk-cell__bd .wapp-mq { gap: 6px; } .wk-cell__bd .wapp-mq b { font-size:13px; line-height:17px; font-weight: 500; color: var(--wk-ink); } /* ===== 频道栏折叠 + 悬浮头像球（点开即语音控件） ===== */ .wapp-v3.is-midfold { grid-template-columns: 52px minmax(0, 1fr); } .wapp-v3.is-midfold .wapp-v3-mid { display: none; } .wapp-v3-midbtn { margin-left: auto; width: 30px; height: 30px; flex: none; border: 0; border-radius: 8px; background: var(--wk-fill); color: var(--wk-ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; } .wapp-v3-midbtn.is-flip .wapp-i { transform: rotate(180deg); } .wapp-v3-midbtn .wapp-i { transition: transform .16s ease; } .wapp-v3-ball { position: fixed; right: 14px; bottom: calc(78px + env(safe-area-inset-bottom, 0)); width: 48px; height: 48px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: var(--wk-accent); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); display: flex; align-items: center; justify-content: center; z-index: 30; overflow: visible; } .wapp-v3-ball > span { width: 100%; height: 100%; border-radius: 999px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size:13px; font-weight: 700; } .wapp-v3-ball img { width: 100%; height: 100%; object-fit: cover; } .wapp-v3-ball.is-live { box-shadow: 0 0 0 3px var(--wk-accent-weak), 0 6px 18px rgba(0, 0, 0, .22); } .wapp-v3-ball-mute { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 999px; background: var(--wk-danger, var(--wk-danger)); border: 2px solid var(--wk-card); } .wapp-v3-bexpand { width: 100%; height: 44px; margin-top: 2px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--wk-fill); color: var(--wk-ink); font-family: inherit; font-size:13px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .wapp-v3-bexpand > span { display: flex; align-items: center; gap: 8px; } .wapp-v3-brow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 4px 0 10px; } /* ===== 频道内文字消息 ===== */ .wapp-v3-txtic { display: inline-flex; align-items: center; color: var(--wk-ink-3); } .wapp-v3-chat { display: flex; flex-direction: column; min-height: 0; flex: 1; } .wapp-v3-msgs { flex: 1; min-height: 90px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 2px; } .wapp-v3-msg { display: flex; flex-direction: column; gap: 2px; } .wapp-v3-msg-w { font-size:10px; line-height:13px; color: var(--wk-ink-3); } .wapp-v3-msg-b { align-self: flex-start; max-width: 82%; padding: 7px 10px; border-radius: 10px; background: var(--wk-card); font-size:12px; line-height:17px; color: var(--wk-ink); word-break: break-word; } .wapp-v3-msg.is-me .wapp-v3-msg-b { align-self: flex-end; background: var(--wk-accent); color: var(--wk-on-accent); } .wapp-v3-msg.is-me .wapp-v3-msg-w { text-align: right; } .wapp-v3-msg-empty { font-size:11px; line-height:14px; color: var(--wk-ink-3); text-align: center; padding: 16px 0; } .wapp-v3-send { display: flex; gap: 8px; padding-top: 6px; } .wapp-v3-send .wk-input { flex: 1; min-width: 0; } .wapp-v3-send .wk-btn { flex: none; min-width: 64px; } /* ===== 下拉刷新 / 上拉加载更多（内容位移露出空隙，不是浮层） ===== */ .wk-page__body { position: relative; } .wapp-pullhd, .wapp-pullft { position: absolute; left: 0; right: 0; height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--wk-bg); color: var(--wk-ink-3); font-size:11px; line-height:14px; pointer-events: none; z-index: 1; } .wapp-pullhd { top: 0; } .wapp-pullft { position: fixed; bottom: calc(58px + env(safe-area-inset-bottom, 0)); } .wapp-pullhd-brand { font-size:12px; letter-spacing: .14em; font-weight: 700; color: var(--wk-ink-2); } .wapp-pullhd.is-ready .wapp-pullhd-t { color: var(--wk-accent); } .wapp-pullft.is-ready .wapp-pullft-t { color: var(--wk-accent); } .wapp-pullhd-sp, .wapp-pullft-sp { width: 12px; height: 12px; border-radius: 999px; flex: none; border: 2px solid var(--wk-line-2); border-top-color: var(--wk-accent); opacity: 0; } .wapp-pullhd.is-busy .wapp-pullhd-sp, .wapp-pullft.is-busy .wapp-pullft-sp { opacity: 1; animation: wapp-pull-spin .8s linear infinite; } @keyframes wapp-pull-spin { to { transform: rotate(360deg); } } .wapp-qual { display: flex; align-items: center; gap: 10px; padding: 12px 0 } .wapp-qual:last-child { border-bottom: 0; } .wapp-org { display: flex; width: 100%; align-items: center; gap: 10px; padding: 12px 0; text-align: left; border-bottom: 1px solid var(--wk-line) } .wapp-org:last-child { border-bottom: 0; } .wapp-org-logo { width: 40px; height: 40px; flex: none; border-radius: var(--wk-r-12); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--wk-fill); font-size:13px; font-weight: 700; color: var(--wk-ink-2); } .wapp-org-logo img { width: 100%; height: 100%; object-fit: cover; } .wapp-org-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .wapp-org-nm { display: flex; align-items: center; gap: 6px; font-size:13px; line-height:15px; font-weight: 600; color: var(--wk-ink); } .wapp-org-s { font-size:11px; line-height:14px; color: var(--wk-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-task { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--wk-line); } .wapp-task:last-child { border-bottom: 0; } .wapp-task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .wapp-task-t { display: flex; align-items: center; gap: 6px; font-size:13px; line-height:15px; font-weight: 600; color: var(--wk-ink); } .wapp-task-s { font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-task-bar { height: 4px; border-radius: 999px; background: var(--wk-fill-track); overflow: hidden; } .wapp-task-bar i { display: block; height: 100%; background: var(--wk-accent); border-radius: 999px; } .wapp-task-exp { display: flex; } .wapp-task-exp > div { flex: 1; display: flex; flex-direction: column; gap: 2px; } .wapp-task-exp b { font-weight: 700 } .wapp-task-exp span { font-size:11px; line-height:14px; color: var(--wk-ink-3); } /* ===== 扫一扫（成熟方案：全屏取景 + 扫描线 + 手电筒 + 相册 + 手动输入） ===== */ .wapp-scanfull { position: fixed; inset: 0; z-index: 60; background: var(--wapp-cam-bg); overflow: hidden; } .wapp-scanfull video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .wapp-scanfull-ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: translateY(-7%); pointer-events: none; } .wapp-scanframe { position: relative; width: 60vw; max-width: 264px; aspect-ratio: 1 / 1; border-radius: var(--wk-r-12); box-shadow: 0 0 0 100vmax var(--wapp-cam-mask); } .wapp-scanc { position: absolute; width: 28px; height: 28px; border: 4px solid var(--wapp-on-media); border-radius: 8px; } .wapp-scanc.c1 { left: -3px; top: -3px; border-right: 0; border-bottom: 0; } .wapp-scanc.c2 { right: -3px; top: -3px; border-left: 0; border-bottom: 0; } .wapp-scanc.c3 { left: -3px; bottom: -3px; border-right: 0; border-top: 0; } .wapp-scanc.c4 { right: -3px; bottom: -3px; border-left: 0; border-top: 0; } .wapp-scanline { position: absolute; left: 5%; right: 5%; top: 6%; height: 2px; border-radius:4px; background: linear-gradient(90deg, transparent, var(--wk-accent), transparent); animation: wapp-scansweep 2.4s ease-in-out infinite; } @keyframes wapp-scansweep { 0%, 100% { top: 6%; } 50% { top: 93%; } } .wapp-scanfull-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: calc(12px + env(safe-area-inset-top, 0)) 12px 10px; color: var(--wapp-on-media); } .wapp-scanfull-title { flex: 1; text-align: center; font-size:13px; line-height:17px; font-weight: 600; } .wapp-scanfull-right { display: flex; gap: 8px; } .wapp-scanfull-btn[hidden] { display: none; } .wapp-scanfull-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--wapp-shade); color: var(--wapp-on-media); } .wapp-scanfull-btn.is-on { background: var(--wk-accent); color: var(--wk-on-accent); } .wapp-scanfull-tip { position: absolute; left: 0; right: 0; bottom: calc(92px + env(safe-area-inset-bottom, 0)); padding: 0 32px; text-align: center; font-size:12px; line-height:15px; color: var(--wapp-on-media); opacity: .86; } .wapp-scanfull-ft { position: absolute; left: 0; right: 0; bottom: calc(28px + env(safe-area-inset-bottom, 0)); display: flex; justify-content: center; gap: 12px; } .wapp-scanfull-link { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: var(--wapp-shade); color: var(--wapp-on-media); font-size:12px; font-weight: 500; } /* ===== 消息（对齐飞书习惯：搜索 / 未读 / 置顶 / 免打扰 / 时间分隔 / 回到最新） ===== */ .wapp-msgsearch { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 12px; height: 40px; border-radius: var(--wk-r-12); background: var(--wk-card); border: 1px solid var(--wk-line); color: var(--wk-ink-3); } .wapp-msgsearch .wk-input { flex: 1; height: 100%; border: 0; background: transparent; padding: 0; font-size:13px; } .wapp-msgsearch .wk-input:focus { outline: none; } .wapp-conv.is-pin { background: var(--wk-fill); } .wapp-conv-mute { display: inline-flex; color: var(--wk-ink-4); } .wk-badge.is-mute { background: var(--wk-fill-track); color: var(--wk-ink-3); } .wapp-msg-time { align-self: center; padding: 6px 0 2px; font-size:10px; line-height:13px; color: var(--wk-ink-4); } .wapp-msg-div { align-self: center; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 0; font-size:10px; line-height:13px; color: var(--wk-ink-3); } .wapp-msg-div::before, .wapp-msg-div::after { content: ''; flex: 1; height: 1px; background: var(--wk-line); } .wapp-msgrow { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; } .wapp-msgrow.is-me { flex-direction: row-reverse; } .wapp-msgrow .wapp-msg { max-width: calc(100% - 48px); } .wapp-msg { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .wapp-msgrr.is-me .wapp-msg, .wapp-msgrow.is-me .wapp-msg { align-items: flex-end; } .wapp-chat-jump { position: fixed; right: 16px; bottom: 96px; z-index: 21; display: none; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--wk-line); background: var(--wk-card); color: var(--wk-ink-2); font-size:11px; box-shadow: 0 4px 12px var(--wk-mask); } .wapp-chat-jump.is-on { display: inline-flex; } .wapp-msgmenu { display: flex; flex-direction: column; } /* ===== 输入区（飞书式：浅底栏 + 白底输入框 + 下方工具条 + 文字发送） ===== */ .wapp-chatbar { display: block; transition: bottom .18s ease; background: var(--wk-bg); border-top: 1px solid var(--wk-line-half); padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0)); } .wapp-composer { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; } .wapp-composer-box { background: var(--wk-card); border: 1px solid var(--wk-line); border-radius: 10px; padding: 6px 10px; } .wapp-composer-input { width: 100%; min-height: 22px; max-height: 112px; padding: 2px 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-size:13px; line-height:17px; resize: none; outline: none; } .wapp-composer-bar { display: flex; align-items: center; gap: 2px; height: 34px; } .wapp-composer-ico { width: 32px; height: 32px; padding: 0; border: 0; border-radius:8px; background: transparent; color: var(--wk-ink-3); font-size:16px; display: flex; align-items: center; justify-content: center; } .wapp-composer-ico:active { background: var(--wk-fill); } .wapp-composer-gap { flex: 1; } .wapp-composer-send { height: 32px; padding: 0 6px; border: 0; border-radius:8px; background: transparent; color: var(--wk-accent); font-size:13px; font-weight: 600; } .wapp-composer-send[disabled] { opacity: .35; } .wapp-quote { border-left: 2px solid var(--wk-accent); font-size:11px; line-height:14px; color: var(--wk-ink-2) } .wapp-quote[hidden] { display: none; } .wapp-quote-t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-quote-x { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--wk-ink-3); font-size:13px; line-height: 1; } .wapp-emojis-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--wk-bg); border-top: 1px solid var(--wk-line-half); padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0)); } .wapp-emojis { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; } .wapp-emoji { height: 40px; border: 0; border-radius: 8px; background: transparent; font-size:18px; line-height:31px; } .wapp-emoji:active { background: var(--wk-im-hover); } .wapp-msg.is-fail { cursor: pointer; } .wapp-msg.is-fail .wapp-msg-t { color: var(--wk-danger); } .wapp-msg-q { display: block; margin-bottom: 4px; padding: 3px 8px; border-left: 2px solid currentColor; border-radius: 4px; background: rgba(127, 127, 127, .12); font-size:11px; line-height:14px; opacity: .78; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .wapp-msgrow.no-av .wk-avatar { visibility: hidden; } .wapp-msgrow.no-av { margin-top: -4px; } .wapp-msg-q::before { content: '引用 '; opacity: .6; } .wapp-msg-sys { align-self: center; margin: 2px 0; padding: 2px 10px; border-radius: 999px; background: var(--wk-im-hover); color: var(--wk-ink-3); font-size:11px; line-height:14px; } .wapp-msgrow.is-me .wapp-msg-b.is-recalled { opacity: .6; } /* ===== 确认弹窗（飞书式：居中标题/说明 + 底部等分文字按钮 + 发丝分割线） ===== */ .wk-mask .wk-dialog-wrap .wk-dialog.wapp-dlg { padding: 22px 0 0; overflow: hidden; border-radius: 14px; max-width: 296px; box-shadow: var(--wk-sh-3); } .wapp-dlg .wk-dialog__title { padding: 0 20px; margin-bottom: 6px; font-size:13px; line-height:19px; } .wapp-dlg .wk-dialog__body { padding: 0 20px 20px; } .wapp-dlg__text { font-size:13px; line-height:15px; color: var(--wk-ink-2); text-align: center; white-space: pre-line; } .wapp-dlg .wk-dialog__acts { margin: 0; gap: 0; border-top: 1px solid var(--wk-line); } .wapp-dlg .wk-dialog__acts .wapp-dlg__btn { flex: 1; height: 48px; padding: 0; border-radius: 0; border: 0; background: transparent; color: var(--wk-ink-2); font-size:13px; font-weight: 500; } .wapp-dlg .wk-dialog__acts .wapp-dlg__btn + .wapp-dlg__btn { border-left: 1px solid var(--wk-line); } .wapp-dlg .wk-dialog__acts .wapp-dlg__btn.is-primary { color: var(--wk-accent); font-weight: 600; } .wapp-dlg .wk-dialog__acts .wapp-dlg__btn.is-danger { color: var(--wk-danger); font-weight: 600; } .wapp-dlg .wk-dialog__acts .wapp-dlg__btn:active { background: var(--wk-fill); } /* 顶栏标题带头像 */ .wapp-h1.is-av { display: flex; align-items: center; gap: 8px; } .wapp-h1.is-av .wk-avatar { flex: none; } .wapp-msgmenu .wk-cell.is-danger .wk-cell__bd { color: var(--wk-danger); } .wapp-sheet__cancel { width: 100%; height: 48px; border: 0; border-radius: 0; background: transparent; color: var(--wk-ink-2); font-size:13px; } /* 发送面板（飞书式宫格） */ .wapp-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 4px; padding: 4px 8px 12px; } .wapp-tool { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; border-radius: 10px; } .wapp-tool:active { background: var(--wk-fill); } .wapp-tool-ico { width: 52px; height: 52px; border-radius: 12px; background: var(--wk-fill); color: var(--wk-ink-2); font-size:18px; display: flex; align-items: center; justify-content: center; } .wapp-tool-t { font-size:11px; line-height:14px; color: var(--wk-ink-2); } .wapp-tool.is-off { opacity: .45; } /* 聊天记录搜索条 */ .wapp-chatfind { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 10px; border-radius: 10px; background: var(--wk-card); border: 1px solid var(--wk-line); } .wapp-chatfind-ico { font-size:13px; color: var(--wk-ink-3); display: flex; } .wapp-chatfind-in { flex: 1; min-width: 0; height: 26px; border: 0; background: transparent; font-size:13px; color: var(--wk-ink); outline: none; } .wapp-chatfind-in::-webkit-search-cancel-button { display: none; } .wapp-chatfind-x { width: 24px; height: 24px; border: 0; background: transparent; color: var(--wk-ink-3); font-size:14px; line-height: 1; } .wapp-chatfind.is-empty::after { content: '没有匹配的消息'; position: absolute; left: 0; right: 0; top: 44px; text-align: center; font-size:11px; color: var(--wk-ink-3); } /* 聊天设置页 */ .wapp-cs-hd { display: flex; align-items: center; gap: 12px; padding: 12px 0 20px; } .wapp-cs-hd-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .wapp-cs-hd-t b { font-size:13px; line-height:19px; font-weight: 600; color: var(--wk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-cs-hd-t small { font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-cs-group { margin-bottom: 12px; border-radius: 10px; background: var(--wk-card); overflow: hidden; } .wapp-cs-group .wk-cell__hd { font-size:14px; color: var(--wk-ink-3); } .wapp-cs-group .wk-cell.is-danger .wk-cell__bd { color: var(--wk-danger); } .wapp-cs-group .wk-cell.is-danger .wk-cell__hd { color: var(--wk-danger); } /* 会话行滑动操作（左拉/右拉都出操作） */ .wapp-sw { position: relative; overflow: hidden; border-radius: 12px; touch-action: pan-y; } .wapp-sw img { -webkit-user-drag: none; user-drag: none; pointer-events: none; } .wapp-sw .wapp-conv { position: relative; z-index: 2; background: var(--wk-card); } .wapp-sw-acts { position: absolute; top: 0; bottom: 0; display: flex; gap: 4px; padding: 5px 6px; z-index: 1; } .wapp-sw-acts.at-l { left: 0; } .wapp-sw-acts.at-r { right: 0; } .wapp-sw-act { width: 56px; border: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size:12px; line-height:14px; text-align: center; background: var(--wk-card-2, var(--wk-fill)); color: var(--wk-ink); padding: 0 4px; box-shadow: var(--wk-sh-1); } .wapp-sw-act.is-danger { background: var(--wk-danger); color: var(--wk-on-accent); } /* ===== 交易行（比例看板 + 板块 + 挂牌） ===== */ .wapp-tr-secs { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 0 12px } .wapp-tr-secs::-webkit-scrollbar { display: none; } .wapp-tr-sec { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--wk-line); border-radius: 8px; background: var(--wk-card); color: var(--wk-ink-2); font-size:12px; } .wapp-tr-sec img { width: 20px; height: 20px; border-radius:8px; object-fit: cover; } .wapp-tr-sec.is-on { background: var(--wk-accent); border-color: var(--wk-accent); color: var(--wk-on-accent); font-weight: 600; } .wapp-tr-quote { border-radius: 12px; background: var(--wk-card); margin-bottom: 12px } .wapp-tr-quote-hd { display: flex; align-items: center; justify-content: space-between; } .wapp-tr-quote-t { line-height: 14px } .wapp-tr-quote-s { line-height: 14px } .wapp-tr-quote-main { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 8px; } .wapp-tr-rate { font-weight: 700; color: var(--wk-ink); letter-spacing: -.5px } .wapp-tr-unit { font-size:12px; line-height:14px; color: var(--wk-ink-2); } .wapp-tr-delta { margin-left: auto; font-size:12px; line-height:14px; font-weight: 600; color: var(--wk-ink-3); } .wapp-tr-delta.is-up { color: var(--wk-danger); } .wapp-tr-delta.is-down { color: var(--wk-success, #0a7d57); } .wapp-tr-quote-ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size:11px; line-height:14px; color: var(--wk-ink-2); } .wapp-tr-quote-ft + .wapp-tr-quote-ft { margin-top: 2px; } .wapp-tr-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; } .wapp-tr-cats::-webkit-scrollbar { display: none; } .wapp-tr-cats .wk-chip { height: 32px; } .wapp-tr-cats .wk-chip.is-on { font-weight: 600; box-shadow: inset 0 0 0 1px var(--wk-accent-ink); } .wapp-tr-meta .wapp-tr-tag { margin-left: auto; } .wapp-tr-more { font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-tr-listhd { display: flex; align-items: center; justify-content: space-between; font-size:13px; line-height:17px; font-weight: 600; color: var(--wk-ink) } .wapp-tr-tag { flex: 0 0 auto; white-space: nowrap; font-size:10px; line-height:14px; font-style: normal; padding: 0 6px; border-radius: 4px; background: var(--wk-fill); color: var(--wk-ink-3); } .wapp-tr-tag.is-good { background: var(--wk-accent-weak); color: var(--wk-accent-ink); } .wapp-tr-code { flex: 0 0 auto; white-space: nowrap; font-size:10px; line-height:14px; font-style: normal; padding: 0 5px; margin-right: 6px; border-radius: 4px; background: var(--wk-fill); color: var(--wk-ink-2); letter-spacing: .3px; font-variant-numeric: tabular-nums; } .wapp-tr-trend { border-radius: 12px; background: var(--wk-card); margin-bottom: 12px } .wapp-tr-trend-hd { display: flex; align-items: center; justify-content: space-between; font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-tr-trend-hd > span:first-child { font-size:13px; line-height:17px; font-weight: 600; color: var(--wk-ink); } .wapp-tr-nodata { color: var(--wk-ink-3); } .wapp-tr-trend-note { margin-top: 8px; font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-tr-spark { width: 100%; height: 56px; margin-top: 8px; display: block; } .wapp-tr-trend-ft { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size:11px; line-height:14px; color: var(--wk-ink-3); } /* ===== 交易行订单 ===== */ .wapp-tr-tabs { display: flex; gap: 8px; padding: 2px 0 12px; } .wapp-tr-tab { flex: 1; height: 36px; border-radius: 8px; background: var(--wk-card); border: 1px solid var(--wk-line); color: var(--wk-ink-2); font-size:13px; } .wapp-tr-tab.is-on { background: var(--wk-accent-weak); border-color: transparent; color: var(--wk-accent-ink); font-weight: 600; } .wapp-tr-order { margin-bottom: 8px; } .wapp-tr-order-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .wapp-tr-ocat { font-size:13px; line-height:17px; font-weight: 600; color: var(--wk-ink); } .wapp-tr-ono { margin-top: 2px; font-size:11px; line-height:14px; color: var(--wk-ink-3); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-tr-order-hd .wapp-row-t { font-size:13px; line-height:17px; font-weight: 600; color: var(--wk-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-tr-ost { flex: none; font-size:11px; line-height:14px; padding: 0 8px; border-radius: 4px; background: var(--wk-accent-weak); color: var(--wk-accent-ink); } .wapp-tr-ost.is-done { background: var(--wk-accent-weak); color: var(--wk-accent-ink); } .wapp-tr-ost.is-off { background: var(--wk-fill); color: var(--wk-ink-3); } .wapp-tr-order-ft { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } .wapp-tr-order-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wk-line-half); } .wapp-dlg__days { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 0 4px; } .wapp-dlg__days b { font-size:16px; line-height:22px; font-weight: 700; color: var(--wk-ink); min-width: 32px; text-align: center; } .wapp-dlg__days .wk-btn { width: 36px; height: 36px; padding: 0; border-radius: 8px; } /* 字号偏好（设置页可调） */ html[data-fs="small"] { zoom: .94; } html[data-fs="large"] { zoom: 1.08; } /* ===== 设置页（对齐 /app/ 的设置结构） ===== */ .wapp-srow { padding-right: 4px; } .wapp-srow__v { margin-left: auto; font-size:13px; line-height:17px; color: var(--wk-ink-3); max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-srow__av { width: 48px; height: 48px; flex: none; display: block; } .wapp-srow__av .wk-avatar { width: 48px; height: 48px; border-radius: 24px; } .wapp-sfoot { padding: 8px 0 4px; } .wapp-slogout { height: 48px; background: var(--wk-card); font-size: 13px } .wapp-sver { margin: 16px 0 0; text-align: center; font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-opts { margin: 0 -16px; } .wapp-opt { min-height: 52px; } .wapp-opt.is-on .wapp-row-t { color: var(--wk-accent-ink); font-weight: 600; } .wapp-opt__tick { color: var(--wk-accent); display: flex; align-items: center; } .wapp-opt__tick svg { width: 18px; height: 18px; } .wapp-legal { margin: 0; font-size:13px; line-height:17px; color: var(--wk-ink-2); } .wapp-dev { min-height: 56px; } /* ===== 帖子评论（盖楼） ===== */ .wapp-cmt { margin-top: 12px; } .wapp-cmt-title { font-weight: 600; color: var(--wk-ink); margin-bottom: 4px } .wapp-cmt-empty { padding: 24px 0; text-align: center; font-size:13px; line-height:17px; color: var(--wk-ink-3); } .wapp-cmt-item { border-bottom: 1px solid var(--wk-line-half) } .wapp-cmt-item:last-child { border-bottom: 0; padding-bottom: 4px; } .wapp-cmt-hd { display: flex; align-items: center; gap: 8px; } .wapp-cmt-hd .wk-avatar { width: 36px; height: 36px; border-radius: 18px; } .wapp-cmt-hdb { min-width: 0; } .wapp-cmt-nm { font-size:13px; line-height:17px; font-weight: 600; color: var(--wk-ink); display: flex; align-items: center; gap: 6px; } .wapp-cmt-lv { font-style: normal; font-size:11px; line-height:14px; padding: 0 5px; border-radius: 4px; background: var(--wk-accent-weak); color: var(--wk-accent-ink); font-weight: 500; } .wapp-cmt-meta { font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-cmt-body { font-size:13px; color: var(--wk-ink); word-break: break-word } .wapp-cmt-acts { display: flex; align-items: center } .wapp-cmt-ab { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0; border: 0; background: transparent; font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-cmt-ab.is-on { color: var(--wk-accent-ink); } .wapp-cmt-ab svg { width: 15px; height: 15px; } .wapp-cmt-subs { border-radius: 8px; background: var(--wk-fill) } .wapp-cmt-sub { display: flex; gap: 8px } .wapp-cmt-sub + .wapp-cmt-sub { border-top: 1px solid var(--wk-line-half); } .wapp-cmt-sub .wk-avatar { width: 24px; height: 24px; border-radius: 12px; font-size:11px; } .wapp-cmt-subbd { min-width: 0; flex: 1; } .wapp-cmt-subt { font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-cmt-subt b { color: var(--wk-ink-2); font-weight: 600; } .wapp-cmt-swhen { float: right; font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-cmt-to { color: var(--wk-ink-3); } .wapp-cmt-subc { font-size:13px; line-height:19px; color: var(--wk-ink); word-break: break-word; } .wapp-cmt-sacts { display: flex; gap: 16px; margin-top: 2px; } .wapp-cmt-more { margin-top: 4px; height: 32px; padding: 0; border: 0; background: transparent; font-size:11px; line-height:14px; color: var(--wk-accent-ink); } .wapp-cmtpad { height: calc(96px + env(safe-area-inset-bottom, 0px)); } /* 帖子底部输入条 */ .wapp-cbar-reply { display: none; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -12px 8px; padding: 6px 12px; background: var(--wk-fill); font-size:11px; line-height:14px; color: var(--wk-ink-2); } .wapp-cbar-reply.is-on { display: flex; } .wapp-cbar-reply button { border: 0; background: transparent; color: var(--wk-accent-ink); font-size:11px; } .wapp-cbar-in { outline: none } /* ===== 客服中心（分流：自动回答 → 转人工） ===== */ .wapp-sup-hero { margin: 0 12px 12px; padding: 16px; border-radius: 12px; background: var(--wk-card); } .wapp-sup-hero__t { font-weight: 700; color: var(--wk-ink) } .wapp-sup-hero__s { margin-top: 4px; font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-sup-ask { display: flex; gap: 8px; margin-top: 12px; } .wapp-sup-ask__in { flex: 1; height: 40px; padding: 0 12px; border: 1px solid var(--wk-line); border-radius: 20px; background: var(--wk-fill); color: var(--wk-ink); font-size:13px; outline: none; } .wapp-sup-ask__btn { flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: var(--wk-accent); color: var(--wk-on-accent); font-size:13px; font-weight: 600; } .wapp-sup-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-sup-ans { margin: 0 12px 12px; padding: 14px 16px; border-radius: 12px; background: var(--wk-card); border: 1px solid var(--wk-accent-weak); } .wapp-sup-ans.is-loading { border-color: var(--wk-line); } .wapp-sup-ans__t { font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-sup-ans__b { margin-top: 6px; font-size:13px; line-height:17px; color: var(--wk-ink); } .wapp-sup-ans__f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wk-line-half); font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-sup-ans__more { border: 0; background: transparent; color: var(--wk-accent-ink); font-size:11px; font-weight: 600; } .wapp-supfaq { min-height: 52px; } .wapp-sup-empty { padding: 20px 16px; font-size:11px; line-height:14px; color: var(--wk-ink-3); text-align: center; } .wapp-sup-kinds { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 16px; } .wapp-sup-kind { height: 34px; padding: 0 14px; font-size:13px; } .wapp-supconv { align-items: center; } .wapp-supconv__ic { width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: var(--wk-accent-weak); color: var(--wk-accent-ink); } .wapp-supconv__ic svg { width: 20px; height: 20px; } .wapp-supconv__st { font-style: normal; margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size:11px; line-height:14px; background: var(--wk-fill); color: var(--wk-ink-3); font-weight: 500; } .wapp-supconv__st.is-wait { background: var(--wk-accent-weak); color: var(--wk-accent-ink); } .wapp-supconv__ft { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .wapp-sup-tip { margin-top: 10px; font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-smsrow { display: flex; gap: 8px; } .wapp-smsrow .wk-input { flex: 1; } .wapp-smsbtn { flex: none; height: 40px; padding: 0 12px; font-size:13px; } .wapp-supkinds { display: flex; flex-wrap: wrap; gap: 8px; } /* 帖子底部操作条 + 评论图片 */ /* 帖子操作栏：并进卡片内，和其它页的行保持同一套写法（不再是一块悬浮白条） */ .wapp-post-acts { display: flex; gap: 0; margin: 12px 0 0; padding-top: 8px; border-top: 1px solid var(--wk-line); } .wapp-pact { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--wk-ink-2); font-size:13px } .wapp-pact:active { background: var(--wk-fill); } .wapp-pact svg { width: 18px; height: 18px; } .wapp-pact.is-on { color: var(--wk-accent-ink); background: var(--wk-accent-weak); } .wapp-cmt-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .wapp-cmt-imgs.is-on { margin: 0 0 8px; } .wapp-cmt-imgs img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; background: var(--wk-fill); } .wapp-cmt-sub .wapp-cmt-imgs img { width: 64px; height: 64px; } .wapp-cmt-thumb { position: relative; display: inline-block; } .wapp-cmt-thumb button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border: 0; border-radius: 10px; background: var(--wk-shade, rgba(0,0,0,.6)); color: #fff; font-size:11px; line-height:15px; padding: 0; } .wapp-cmt-thumb.is-pending { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--wk-fill); color: var(--wk-ink-3); font-size:11px; } .wapp-cmt-loadmore { display: block; width: 100%; height: 44px; margin-top: 8px; border: 1px solid var(--wk-line); border-radius: 10px; background: var(--wk-card); color: var(--wk-ink-2); font-size:13px; } .wapp-cbar-ico svg { width: 22px; height: 22px; } .wapp-sup-banner { position: sticky; top: 0; z-index: 2; margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; background: var(--wk-accent-weak); color: var(--wk-accent-ink); font-size:11px; line-height:14px; text-align: center; } .wapp-sup-banner.is-wait { background: var(--wk-fill); color: var(--wk-ink-2); } .wapp-mypost { position: relative; } .wapp-mypost__del { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 0; border-radius: 14px; background: var(--wk-shade, rgba(0,0,0,.55)); color: #fff; font-size:11px; } .wapp-mypost__del svg { width: 14px; height: 14px; } .wapp-post-own { margin: 0 12px 12px; } .wapp-post-own__del { width: 100%; height: 40px; border: 1px solid var(--wk-line); border-radius: 10px; background: var(--wk-card); color: var(--wk-danger); font-size:13px; } .wapp-hitbar { padding: 12px 16px 4px; color: var(--wk-t3); font-size:11px; } .wapp-hit__t { font-size:13px; font-weight: 500; color: var(--wk-t1); } .wapp-hit__b { margin-top: 2px; font-size:12px; line-height:15px; color: var(--wk-t2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wapp-hit__b mark { background: var(--wk-accent-weak, rgba(255,193,7,.28)); color: inherit; border-radius: 3px; } .wapp-hit__tm { font-size:11px; color: var(--wk-t3); } /* 客服工作台 */ .wapp-cs-kpi { background: var(--wk-card); border: 1px solid var(--wk-line); text-align: center } .wapp-cs-kpi b { display: block; color: var(--wk-t1) } .wapp-cs-kpi b i { font-size:11px; font-style: normal; color: var(--wk-t3); margin-left: 2px; } .wapp-cs-kpi span { color: var(--wk-t3) } .wapp-cs-row__t { display: flex; align-items: center; gap: 6px; font-size:13px; font-weight: 500; color: var(--wk-t1); } .wapp-cs-row__b { margin-top: 2px; font-size:11px; color: var(--wk-t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } .wapp-cs-row__tm { font-size:11px; color: var(--wk-t3); } .wapp-cs-row__as { font-size:10px; color: var(--wk-accent); } .wapp-cs-chip { font-style: normal; font-size:10px; line-height:14px; padding: 0 6px; border-radius:8px; background: var(--wk-fill); color: var(--wk-t2); } .wapp-cs-dot { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--wk-danger); color: #fff; font-size:10px; line-height:14px; text-align: center; font-style: normal; } .wapp-cs-user { margin: 12px; background: var(--wk-card); border: 1px solid var(--wk-line); border-radius: 12px } .wapp-cs-user__hd { display: flex; gap: 10px; align-items: center; } .wapp-cs-user__n { display: flex; align-items: center; gap: 6px; font-size:13px; font-weight: 600; } .wapp-cs-user__m { margin-top: 2px; font-size:11px; color: var(--wk-t3); } .wapp-cs-acts { display: flex; gap: 8px; margin-top: 10px; } .wapp-cs-acts .wk-btn { flex: 1; height: 36px; font-size:12px; } .wapp-cs-msgs { display: flex; flex-direction: column } .wapp-cs-msg { display: flex; } .wapp-cs-msg.is-agent { justify-content: flex-end; } .wapp-cs-bubble { max-width: 78%; background: var(--wk-card); border: 1px solid var(--wk-line); border-radius: 12px; padding: 8px 10px; } .wapp-cs-msg.is-agent .wapp-cs-bubble { background: var(--wk-accent-weak, rgba(10,132,255,.12)); border-color: transparent; } .wapp-cs-msg.is-note .wapp-cs-bubble { background: rgba(255,159,10,.12); border-color: transparent; } .wapp-cs-text { font-size:13px; line-height:17px; color: var(--wk-t1); word-break: break-word; } .wapp-cs-time { margin-top: 4px; font-size:10px; color: var(--wk-t3); text-align: right; } .wapp-cs-internal { display: inline-block; margin-bottom: 4px; font-size:10px; font-style: normal; color: var(--wk-warn); } .wapp-cs-imgs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .wapp-cs-imgs img { width: 96px; height: 96px; border-radius: 8px; object-fit: cover; } .wapp-cs-empty { padding: 40px 0; text-align: center; color: var(--wk-t3); font-size:12px; } .wapp-cs-canned { display: flex; overflow-x: auto } .wapp-cs-canned .wk-chip { flex: 0 0 auto; } .wapp-cs-composer { position: sticky; bottom: 0; background: var(--wk-bg); border-top: 1px solid var(--wk-line) } .wapp-cs-composer__hd { display: flex; justify-content: flex-end; } .wapp-cs-note { font-size:11px; color: var(--wk-t3); padding: 2px 8px; border-radius: 8px; background: var(--wk-fill); } .wapp-cs-note.is-on { color: var(--wk-warn); background: rgba(255,159,10,.16); } .wapp-cs-composer textarea.wk-input { width: 100%; margin-top: 6px; min-height: 44px; max-height: 112px; resize: none; } .wapp-cs-composer__ft { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .wapp-cs-hint { font-size:10px; color: var(--wk-t3); } .wapp-danger { color: var(--wk-danger); } .wapp-cs-row__k { font-size:10px; color: var(--wk-t3); font-style: normal; } /* 客服工作台 · 工具条 / 未命中 / FAQ / 转交 */ .wapp-cs-tool { flex: 1; display: inline-flex; align-items: center; border: 1px solid var(--wk-line); border-radius: 10px; background: var(--wk-card); color: var(--wk-ink-2); font-family: inherit } .wapp-cs-tool .wapp-i { width: 16px; height: 16px; } .wapp-cs-tipbar { padding: 12px 16px 4px; font-size:11px; color: var(--wk-ink-3); } .wapp-um-q { font-size:13px; font-weight: 500; color: var(--wk-ink); line-height:15px; } .wapp-um-m { margin-top: 2px; font-size:11px; color: var(--wk-ink-3); } .wapp-um-go { font-size:11px; color: var(--wk-accent); } .wapp-cs-img { width: 36px; height: 36px; border: 1px solid var(--wk-line); border-radius: 10px; background: var(--wk-card); color: var(--wk-ink-2); display: inline-flex; align-items: center; justify-content: center; } .wapp-cs-img .wapp-i { width: 18px; height: 18px; } .wapp-cs-composer__ft { gap: 8px; } .wapp-cs-composer__ft .wapp-cs-hint { flex: 1; } /* 评论折叠 / 举报 */ .wapp-cmt-item.is-folded { padding: 0; border: 0; } .wapp-cmt-folded { display: flex; align-items: center; gap: 8px; padding: 12px; margin: 8px 0; border: 1px dashed var(--wk-line); border-radius: 12px; background: var(--wk-fill); color: var(--wk-ink-3); font-size:12px; } .wapp-cmt-folded .wapp-i { width: 16px; height: 16px; flex: none; color: var(--wk-warn, var(--wk-warn)); } .wapp-cmt-folded em { margin-left: auto; font-style: normal; color: var(--wk-accent); } .wapp-cmt-ab--mute { color: var(--wk-ink-3); } .wapp-rep-list .wk-cell { border-radius: 10px; } .wapp-tr-trade:last-child { border-bottom: 0; } /* ============ 呼吸感统一（2026-10-26）：页面 16 / 卡片 14~16 / 区块 12 ============ */ .wapp-card-body { padding: 14px 16px 0; } .wapp-card-b { margin-top: 6px } .wapp-price { gap: 2px; } .wapp-price em { margin-left: 3px; } .wapp-gpage { gap: 8px; grid-template-rows: repeat(2, auto); } .wapp-mtabs .wk-chip, .wapp-msort .wk-chip { padding: 0 13px; height: 30px; } .wapp-mtabs { gap: 8px; } .wapp-cmt-body { margin-top: 6px } .wapp-cs-canned { padding: 8px 16px; gap: 8px; } .wapp-list + .wapp-sec-hd { margin-top: 4px; } /* 举报处理 */ .wapp-rp-list { padding: 12px 16px 24px; display: flex; flex-direction: column } .wapp-rp { background: var(--wk-card); border: 1px solid var(--wk-line); border-radius: 12px } .wapp-rp-hd { display: flex; align-items: center; justify-content: space-between; } .wapp-rp-tag { font-size:11px; line-height:15px; padding: 0 8px; border-radius:8px; background: var(--wk-fill); color: var(--wk-ink-2); } .wapp-rp-time { font-size:11px; color: var(--wk-ink-3); } .wapp-rp-reason { margin-top: 10px; font-size:13px; line-height:17px; color: var(--wk-ink); } .wapp-rp-meta { margin-top: 6px; font-size:11px; color: var(--wk-ink-3) } .wapp-rp-link { color: var(--wk-accent); text-decoration: none; } .wapp-rp-acts { display: flex; gap: 10px; margin-top: 12px; } .wapp-rp-acts .wk-btn { flex: 1; height: 36px; font-size:12px; } .wapp-rp-result { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--wk-fill); font-size:12px; line-height:15px; color: var(--wk-ink-2); } /* ============ 呼吸感 · 第二轮（纵向节奏 / 行高 / 安全区） ============ */ .wapp-page--bare .wapp-body { padding: 0; } .wapp-card { margin-bottom: 16px } .wapp-card-tags .wk-chip { height: 24px; padding: 0 9px; } .wapp-sec-hd {} .wapp-tr-listhd { padding: 16px 0 10px; } .wapp-tr-quote-s { margin-left: 8px; } .wapp-cmt-item { padding: 18px 0; } .wapp-cmt-body { line-height:20px; } .wapp-cmt-meta { margin-top: 4px; } .wapp-cmt-acts { margin-top: 10px; gap: 20px; } .wapp-cmt-subs { margin-top: 12px; padding: 12px; } .wapp-cs-user { padding: 16px; } .wapp-cs-msgs { padding: 8px 16px 16px; gap: 14px; } .wapp-cs-composer { padding: 12px 16px 16px; } .wapp-rp { padding: 16px; } .wapp-rp-list { gap: 14px; } .wapp-rp-meta { line-height:15px; } .wk-sheet__body { padding: 16px; } .wk-dialog__body { padding: 16px; } /* 底栏安全区 + 小元素微调 */ .wapp-pcard-ft .wk-btn, .wapp-btn-grab { height: 34px; padding: 0 12px; border-radius: 8px; } .wapp-promo-tag, .wapp-pcard-tags .wk-chip { height: 22px; padding: 0 8px; line-height:17px; } .wapp-tr-quote-hd { margin-bottom: 10px; } /* 筛选 chip 选中态（统一：实心墨色） */ .wapp-mtabs .wk-chip.is-on, .wapp-msort .wk-chip.is-on { background: var(--wk-ink); color: var(--wk-bg); border-color: transparent; font-weight: 600; } /* 客服工作台：KPI 2×2、工具条三列、去掉嵌套双层内边距 */ .wapp-cs-top { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 0 12px; } .wapp-cs-kpi { padding: 14px 14px; border-radius: 12px; } .wapp-cs-kpi b { font-weight: 700 } .wapp-cs-kpi span { margin-top: 4px; font-size:11px; line-height:14px; } .wapp-cs-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 0 14px; } .wapp-cs-tool { height: 40px; justify-content: center; font-size:11px; gap: 6px; padding: 0 6px; } .wapp-cs-tool svg { width: 15px; height: 15px; } .wapp-mtabs { margin-bottom: 12px; } /* 订单进度 / 凭证 */ .wapp-ogp-head { padding: 16px; margin-bottom: 14px; } .wapp-ogp-title { font-size:13px; line-height:19px; font-weight: 700; color: var(--wk-ink); } .wapp-ogp-meta { margin-top: 6px; font-size:11px; line-height:17px; color: var(--wk-ink-3); } .wapp-ogp-steps { display: flex; gap: 0; margin-top: 14px; } .wapp-ogp-step { flex: 1; position: relative; padding-top: 14px; } .wapp-ogp-step i { position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--wk-line); } .wapp-ogp-step.is-on i { background: var(--wk-accent); } .wapp-ogp-step b { display: block; font-size:11px; line-height:14px; color: var(--wk-ink-2); font-weight: 600; } .wapp-ogp-step span { font-size:10px; line-height:14px; color: var(--wk-ink-3); } .wapp-ogp-list { display: flex; flex-direction: column; gap: 12px; } .wapp-ogp-ev { background: var(--wk-card); border: 1px solid var(--wk-line); border-radius: 12px; padding: 14px 16px; } .wapp-ogp-ev-hd { display: flex; align-items: center; gap: 8px; } .wapp-ogp-ev-hd b { font-size:12px; color: var(--wk-ink); } .wapp-ogp-ev-t { margin-left: auto; font-size:11px; color: var(--wk-ink-3); } .wapp-ogp-ev-note { margin: 8px 0 0; font-size:13px; line-height:17px; color: var(--wk-ink); } .wapp-ogp-ev-imgs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .wapp-ogp-ev-imgs img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--wk-line); } .wapp-ogp-empty { margin: 0; padding: 16px; font-size:12px; line-height:19px; color: var(--wk-ink-3); text-align: center; } .wapp-ogp-acts { display: flex; gap: 10px; margin: 16px 0 8px; } .wapp-ogp-acts .wk-btn { flex: 1; } .wapp-ogp-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .wapp-ogp-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; } .wapp-ogp-pick { margin-top: 10px; } /* 我的挂单 */ .wapp-ml-list { display: flex; flex-direction: column; gap: 12px; } .wapp-ml { background: var(--wk-card); border: 1px solid var(--wk-line); border-radius: 12px; padding: 14px 16px; } .wapp-ml-hd { display: flex; align-items: center; gap: 8px; } .wapp-ml-hd b { font-size:13px; line-height:17px; color: var(--wk-ink); flex: 1; } .wapp-ml-meta { margin-top: 6px; font-size:11px; line-height:17px; color: var(--wk-ink-3); } .wapp-ml-acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .wapp-v3-live { font-style: normal; color: var(--wk-accent-ink); } /* 进度步骤条：点 + 连线，避免右侧大片空白 */ .wapp-ogp-step::before { content: ''; position: absolute; top: 3px; left: 10px; right: 0; height: 2px; background: var(--wk-line); } .wapp-ogp-step:last-child::before { display: none; } .wapp-ogp-step i { z-index: 1; } /* ============ 群聊 / 语音条 / 文件 / 表情回复 / 多选 ============ */ .wapp-group-n { margin-left: 6px; font-size:11px; font-style: normal; color: var(--wk-ink-3); font-weight: 400; } .wapp-group-notice { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: var(--wk-accent-weak); color: var(--wk-accent-ink); font-size:12px; line-height:15px; } .wapp-group-notice svg { flex: none; margin-top: 2px; } .wapp-voice { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--wk-fill); color: var(--wk-ink); cursor: pointer; } .wapp-voice-ico { display: inline-flex; } .wapp-voice-wave { display: inline-flex; gap: 3px; align-items: flex-end; height: 14px; } .wapp-voice-wave i { width: 3px; border-radius:4px; background: var(--wk-ink-3); } .wapp-voice-wave i:nth-child(1) { height: 6px; } .wapp-voice-wave i:nth-child(2) { height: 12px; } .wapp-voice-wave i:nth-child(3) { height: 8px; } .wapp-voice-dur { font-size:11px; color: var(--wk-ink-3); } .wapp-file { display: flex; align-items: center; gap: 10px; min-width: 200px; padding: 10px 12px; border-radius: 10px; background: var(--wk-fill); color: var(--wk-ink); text-decoration: none; } .wapp-file-ico { display: inline-flex; color: var(--wk-ink-2); } .wapp-file-main { display: flex; flex-direction: column; min-width: 0; } .wapp-file-main b { font-size:12px; line-height:17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; } .wapp-file-main em { font-style: normal; font-size:10px; color: var(--wk-ink-3); } .wapp-file-dl { margin-left: auto; color: var(--wk-ink-3); display: inline-flex; } .wapp-rx { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .wapp-rx-i { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--wk-line); background: var(--wk-card); font-size:11px; color: var(--wk-ink-2); cursor: pointer; } .wapp-rx-i.is-mine { border-color: var(--wk-accent); color: var(--wk-accent-ink); background: var(--wk-accent-weak); } .wapp-rx-i em { font-style: normal; font-size:10px; } .wapp-rxpick { display: flex; gap: 10px; padding: 4px 0 12px; } .wapp-rxpick-i { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--wk-line); background: var(--wk-card); font-size:16px; line-height: 1; cursor: pointer; } .wapp-rxpick-i:active { background: var(--wk-fill); } .wapp-msg-name { display: block; margin-bottom: 4px; font-size:10px; color: var(--wk-ink-3); } .wapp-selck { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--wk-line); background: var(--wk-card); flex: none; align-self: center; } .wapp-selck.is-on { border-color: var(--wk-accent); background: var(--wk-accent); box-shadow: inset 0 0 0 3px var(--wk-card); } .wapp-msgrow.is-picked { background: var(--wk-accent-weak); border-radius: 10px; } .wapp-msgrow.is-me .wapp-selck { order: 99; } .wapp-selbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--wk-card); border-top: 1px solid var(--wk-line); } .wapp-selbar-n { flex: 1; text-align: center; font-size:12px; color: var(--wk-ink-2); } .wapp-rec { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 28px; border-radius:12px; background: rgba(0, 0, 0, .82); color: #fff; } .wapp-rec b { font-size:16px; letter-spacing: 1px; } .wapp-rec em { font-style: normal; font-size:11px; opacity: .7; } .wapp-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4d4f; animation: wapp-rec-blink 1s infinite; } @keyframes wapp-rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } .wapp-gset-top { padding: 16px; margin-bottom: 14px; } .wapp-gset-name { font-size:14px; line-height:21px; font-weight: 700; color: var(--wk-ink); } .wapp-gset-meta { margin-top: 4px; font-size:11px; color: var(--wk-ink-3); } .wapp-gset-notice { margin: 0; font-size:13px; line-height:17px; color: var(--wk-ink); white-space: pre-wrap; } .wapp-link { border: 0; background: none; color: var(--wk-accent-ink); font-size:12px; cursor: pointer; padding: 0; } .wapp-link.is-danger { color: var(--wk-danger, #d4380d); } /* 发布挂单图片选择 */ .wapp-imgpick { display: flex; flex-wrap: wrap; gap: 8px; } .wapp-imgpick-i { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; background: var(--wk-fill); } .wapp-imgpick-i img { width: 100%; height: 100%; object-fit: cover; display: block; } .wapp-imgpick-x { position: absolute; right: 2px; top: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size:12px; line-height:15px; text-align: center; cursor: pointer; } .wapp-imgpick-add { width: 84px; height: 84px; border-radius: 8px; border: 1px dashed var(--wk-line); background: var(--wk-card); color: var(--wk-ink-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } /* 挂牌详情图集 */ .wapp-tr-gallery { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .wapp-tr-gimg { flex: none; width: 132px; height: 132px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--wk-fill); cursor: pointer; } .wapp-tr-gimg.is-cover { width: 200px; height: 200px; } .wapp-tr-gimg img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 置顶条 / 话题串 / 群设置头 */ .wapp-pinbar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: var(--wk-fill); color: var(--wk-ink-2); font-size:11px; line-height:14px; cursor: pointer; } .wapp-pinbar b { flex: none; color: var(--wk-ink); font-size:11px; } .wapp-pinbar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-pinbar svg { flex: none; } .wapp-msg-thr { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--wk-line); background: var(--wk-card); color: var(--wk-ink-2); font-size:10px; cursor: pointer; } .wapp-msgrow.is-me .wapp-msg-thr { align-self: flex-end; } .wapp-thr-root { display: flex; gap: 10px; padding: 14px 16px; background: var(--wk-card); border: 1px solid var(--wk-line); border-radius: 12px; margin-bottom: 12px; } .wapp-thr-b { min-width: 0; } .wapp-thr-b b { display: block; font-size:11px; color: var(--wk-ink-3); font-weight: 500; } .wapp-thr-b p { margin: 4px 0 0; font-size:13px; line-height:17px; color: var(--wk-ink); word-break: break-word; white-space: pre-wrap; } .wapp-thr-b em { display: block; margin-top: 6px; font-style: normal; font-size:10px; color: var(--wk-ink-3); } .wapp-thr-sep { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; color: var(--wk-ink-3); font-size:11px; } .wapp-thr-sep::before, .wapp-thr-sep::after { content: ""; flex: 1; height: 1px; background: var(--wk-line); } .wapp-thr-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 76px; } .wapp-thr-row { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--wk-card); border: 1px solid var(--wk-line); } .wapp-thr-row.is-me { background: var(--wk-accent-weak); border-color: transparent; } .wapp-thr-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 8px; align-items: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--wk-bg); border-top: 1px solid var(--wk-line); } .wapp-thr-bar .wk-input { flex: 1; } .wapp-gset-hd { display: flex; align-items: center; gap: 12px; } .wapp-gset-av { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex: none; } .wapp-gset-av--ph { display: inline-flex; align-items: center; justify-content: center; background: var(--wk-fill); color: var(--wk-ink-3); font-size:16px; } .wapp-gset-tt { flex: 1; min-width: 0; } .wapp-row .wapp-link + .wapp-link { margin-left: 12px; } /* 群设置：成员搜索 / 邀请面板 / 邀请列 */ .wapp-gsearch { padding: 10px 12px 4px; } .wapp-gsearch input { width: 100%; height: 36px; border: 0; border-radius: 8px; background: var(--wk-fill); color: var(--wk-ink); font-size:12px; padding: 0 12px; outline: none; } .wapp-row-ar { flex: none; color: var(--wk-ink-3); font-size:14px; line-height: 1; } .wapp-row-acts { display: flex; gap: 10px; } .wapp-row-acts .wk-btn { flex: 1; } .wk-chip.is-warn { background: var(--wk-warn-weak, var(--wk-fill)); color: var(--wk-warn, var(--wk-ink-2)); } .wapp-invt { padding: 0 2px 4px; } .wapp-invt-gen { padding: 4px 2px 6px; } .wapp-invt-item { padding: 12px; border: 1px solid var(--wk-line); border-radius: 10px; margin-top: 10px; } .wapp-invt-code { font-size:18px; font-weight: 700; letter-spacing: 3px; color: var(--wk-ink); } .wapp-invt-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size:11px; color: var(--wk-ink-3); } .wapp-invt-acts { display: flex; gap: 16px; margin-top: 10px; } .wapp-invbar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 11px 14px; border-radius: 10px; background: var(--wk-accent-weak); color: var(--wk-ink); font-size:12px; } .wapp-invbar span { flex: 1; min-width: 0; } .wapp-invbar i { font-style: normal; font-size:11px; color: var(--wk-ink-2); } /* 破坏性行/按钮统一标红（库里 wk-cell--danger 只给底色，没有字色） */ .wk-cell--danger .wapp-row-t, .wk-cell--danger .wk-cell__bd { color: var(--wk-danger); } .wk-btn.is-danger, .wk-btn--ghost.is-danger { color: var(--wk-danger); border-color: var(--wk-danger); } .wapp-joinbox { display: block; } .wapp-joinin { width: 100%; height: 46px; border: 0; border-radius: 10px; background: var(--wk-fill); color: var(--wk-ink); font-size:13px; letter-spacing: 2px; padding: 0 14px; outline: none; } .wapp-mutebar { position: fixed; left: 0; right: 0; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); z-index: 41; padding: 8px 16px; background: var(--wk-fill); color: var(--wk-ink-2); font-size:11px; text-align: center; } .wapp-chatbar.is-muted .wapp-composer-input { color: var(--wk-ink-3); } .wapp-chatbar.is-muted .wapp-composer-ico, .wapp-chatbar.is-muted .wapp-composer-send { opacity: .45; } /* 经济卡（钻石 / 金币 / 待结算 / 押金） */ .wapp-econ { background: var(--wk-card); border: 1px solid var(--wk-line); border-radius: 14px; padding: 14px; margin-bottom: 12px; } .wapp-econ-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .wapp-econ-hd h2 { margin: 0; font-size:13px; font-weight: 600; color: var(--wk-ink); } .wapp-econ-hd span { font-size:10px; color: var(--wk-ink-3); } .wapp-econ-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; } .wapp-econ-cell { position: relative; padding: 12px; border-radius: 12px; background: var(--wk-fill); } .wapp-econ-cell.is-soft { background: transparent; border: 1px dashed var(--wk-line); } .wapp-econ-cell b { display: block; font-weight: 700; color: var(--wk-ink) } .wapp-econ-cell span { display: block; margin-top: 2px; font-size:10px; color: var(--wk-ink-3); } .wapp-econ-ico { position: absolute; top: 11px; right: 11px; font-size:16px; line-height: 1; color: var(--wk-ink-2); } .wapp-econ-note { margin-top: 14px; font-size:10px; line-height:17px; color: var(--wk-ink-3); } .wapp-econ-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .wapp-econ-pick .wk-chip { height: 56px; flex-direction: column; gap: 2px; font-size:13px; } .wapp-econ-pick .wk-chip span { font-size:10px; color: var(--wk-ink-3); } /* 模拟盘标识（无真实成交时的演示走势，橙色警示不要和真实行情同色） */ .wapp-tr-sim { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size:10px; line-height:14px; font-weight: 600; letter-spacing: .2px; color: var(--warn, var(--wk-warn)); background: color-mix(in srgb, var(--warn, var(--wk-warn)) 14%, transparent); vertical-align: 1px; } .wapp-tr-simnote { color: var(--warn, var(--wk-warn)); opacity: .85; } .wapp-tr-simnote2 { margin-top: 6px; font-size:10px; line-height:14px; color: var(--warn, var(--wk-warn)); } /* 纯币出租发布：刀皮/皮肤多选 + 高级弹药逐项 */ .wapp-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0; } .wapp-ammost { display: flex; flex-direction: column; gap: 8px; } .wapp-ammost-row { display: grid; grid-template-columns: 1fr 84px 72px 72px; gap: 8px; align-items: center; } .wapp-ammost-row .wk-input { height: 36px; padding: 0 8px; font-size:12px; } .wapp-ammost-row .wapp-row-t { font-size:13px; line-height:15px; font-weight: 500; } .wapp-empty { display: block; padding: 14px 12px; border-radius: 8px; background: var(--wk-bg-2, rgba(0,0,0,.04)); color: var(--wk-text-3, var(--wk-ink-3)); font-size:12px; line-height:15px; } /* 登录 / 注册（品牌页） */ .wapp-auth { padding: 28px 0 8px; } .wapp-auth__card .wk-btn--block { margin-top: 8px; } .wapp-auth__pwd .wk-input { padding-right: 44px; } .wapp-auth__eye.is-on { color: var(--wk-brand, var(--wk-warn)); } .wapp-auth__seg .wk-seg__item { flex: 1; justify-content: center; } .wapp-auth__code .wk-input { flex: 1; } .wapp-auth__code .wk-btn { flex: none; height: 40px; white-space: nowrap; } /* ============ 登录/注册（对齐 /app 主站登录页） ============ */ .wapp-body--bare { padding: 0; } .ap { min-height: 100dvh; background: var(--wk-card, #fff); } .ap-scroll { display: flex; flex-direction: column; min-height: 100dvh; padding: 0 24px calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; } .ap-brand { padding-top: 88px; } .ap-mark { width: 132px; height: auto; display: block; margin: 0 auto; } .ap-brand h1 { margin: 22px 0 0; font-size:18px; line-height:25px; font-weight: 400; color: var(--wk-ink, var(--wk-ink)); text-align: center; letter-spacing: -.3px; } .ap-brand p { margin: 7px 0 0; font-size:12px; line-height:15px; color: var(--wk-ink-2, var(--wk-ink-2)); text-align: center; } .ap-body { margin-top: 28px; } .ap-field { position: relative; margin-bottom: 12px; } .ap-field input { width: 100%; height: 48px; box-sizing: border-box; padding: 0 15px 0 44px; border: 1.5px solid var(--wk-line, var(--wk-line)); border-radius: 4px; background: var(--wk-fill, #f5f6f7); font: 500 14px/1 var(--wk-font, system-ui); color: var(--wk-ink, var(--wk-ink)); outline: none; } .ap-field input:focus { border-color: var(--wk-ink, var(--wk-ink)); background: var(--wk-card, #fff); } .ap-field input::placeholder { color: var(--wk-ink-3, var(--wk-ink-3)); font-weight: 400; } .ap-field--eye input { padding-right: 46px; } .ap-field--code input { padding-right: 110px; } .ap-field--code button { position: absolute; right: 6px; top: 9px; height: 30px; padding: 0 12px; border: 1px solid var(--wk-line, var(--wk-line)); border-radius: 8px; background: var(--wk-card, #fff); color: var(--wk-ink-2, var(--wk-ink-2)); font: 400 13px/1 var(--wk-font, system-ui); cursor: pointer; } .ap-ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; pointer-events: none; } .ap-ic svg, .ap-eye svg { width: 17px; height: 17px; stroke: var(--wk-ink-3, var(--wk-ink-3)); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ap-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 38px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; cursor: pointer; } .ap-eye.is-on svg { stroke: var(--wk-ink-2, var(--wk-ink-2)); } .ap-forgot { display: block; width: 100%; text-align: right; margin: -4px 2px 6px; padding: 0; border: 0; background: none; font: 400 12px/18px var(--wk-font, system-ui); color: var(--wk-ink-2, var(--wk-ink-2)); cursor: pointer; } .ap-btn { width: 100%; height: 48px; margin-top: 14px; border: 0; border-radius: 4px; background: var(--wk-ink, var(--wk-ink)); color: #fff; font: 500 16px/1 var(--wk-font, system-ui); cursor: pointer; } .ap-btn:disabled { opacity: .55; } .ap-links { margin-top: 16px; font-size:12px; line-height:19px; color: var(--wk-ink-2, var(--wk-ink-2)); text-align: center; } .ap-links button { border: 0; background: none; padding: 0; font: 400 13px/24px var(--wk-font, system-ui); color: var(--wk-ink, var(--wk-ink)); cursor: pointer; } .ap-links i { color: var(--wk-ink-4, #b6bac2); margin: 0 9px; font-style: normal; } .ap-oth { margin-top: 34px; } .ap-oth__line { display: flex; align-items: center; gap: 12px; color: var(--wk-ink-3, var(--wk-ink-3)); font-size:11px; } .ap-oth__line i { flex: 1; height: 1px; background: var(--wk-line, var(--wk-line)); } .ap-oth__line b { font-weight: 400; } .ap-oth__btns { display: flex; justify-content: center; gap: 26px; margin-top: 16px; } .ap-oth__b { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--wk-line, var(--wk-line)); background: var(--wk-card, #fff); display: grid; place-items: center; cursor: pointer; } .ap-oth__b svg { width: 22px; height: 22px; fill: none; stroke: var(--wk-ink-2, var(--wk-ink-2)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ap-foot { display: flex; gap: 8px; align-items: flex-start; justify-content: center; margin: 24px 0 0; padding-bottom: 8px; } .ap-foot > span { font-size:11px; line-height:17px; color: var(--wk-ink-2, var(--wk-ink-2)); } .ap-ck { flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--wk-ink-3, var(--wk-ink-3)); background: none; position: relative; cursor: pointer; } .ap-ck.is-on { background: var(--wk-ink, var(--wk-ink)); border-color: var(--wk-ink, var(--wk-ink)); } .ap-ck.is-on::after { content: ''; position: absolute; left: 4.2px; top: 1.6px; width: 4px; height: 7.4px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(42deg); } .ap-doc { border: 0; background: none; padding: 0; font: inherit; color: var(--wk-ink, var(--wk-ink)); text-decoration: underline; cursor: pointer; } .ap-foot.is-err { animation: apShake .38s; } .ap-foot.is-err .ap-ck { border-color: #ff3b30; } @keyframes apShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} } .ap-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 4px; } .ap-qr__box { width: 200px; height: 200px; display: grid; place-items: center; border: 1px solid var(--wk-line, var(--wk-line)); border-radius: 8px; background: var(--wk-card, #fff); } .ap-qr__box img, .ap-qr__box canvas { display: block; } .ap-qr__load { font-size:12px; line-height:15px; color: var(--wk-ink-3, var(--wk-ink-3)); text-align: center; } .ap-qr__stat { font-size:12px; line-height:15px; color: var(--wk-ink-2, var(--wk-ink-2)); } /* ============ 协议正文页 ============ */ .wapp-doc { padding: 8px 0 32px; } .wapp-doc__t { margin: 8px 0 6px; font-size:16px; line-height:22px; font-weight: 700; } .wapp-doc__meta { margin: 0 0 18px; font-size:11px; line-height:14px; color: var(--wk-ink-3, var(--wk-ink-3)); } .wapp-doc h2 { margin: 22px 0 8px; font-size:13px; line-height:19px; font-weight: 600; color: var(--wk-ink, var(--wk-ink)); } .wapp-doc p { margin: 0 0 10px; font-size:13px; line-height:19px; color: var(--wk-ink-2, var(--wk-ink-2)); } .wapp-doc__li { padding-left: 14px; text-indent: -14px; } .wapp-doc__end { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--wk-line, var(--wk-line)); font-size:11px; line-height:15px; color: var(--wk-ink-3, var(--wk-ink-3)); } .wapp-frgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; padding: 4px 0 2px; } .wapp-fr { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0; border: 1px solid transparent; border-radius: var(--wk-r-8); background: none; } .wapp-fr em { font-style: normal; font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-fr.is-on { border-color: var(--wk-ink); background: var(--wk-fill, rgba(0,0,0,.04)); } .wapp-fr.is-on em { color: var(--wk-ink); font-weight: 600; } /* ---------- 展示标 / 作者标 ---------- */ .wapp-cmt-op { display: inline-flex; align-items: center; height: 16px; margin-left: 6px; padding: 0 5px; border-radius: 3px; background: var(--wk-ink); color: var(--wk-bg); font-size:10px; line-height: 1; font-style: normal; font-weight: 600; vertical-align: 1px; } /* ---------- 头像框（PNG 叠加，对齐 /app/ assets/frames） ---------- */ .wk-avatar-wrap { position: relative; display: inline-flex; flex: 0 0 auto; } .wk-avatar-fr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% / var(--av-hole, .615)); height: calc(100% / var(--av-hole, .615)); object-fit: contain; pointer-events: none; z-index: 2; } /* 我的页列表区：与上方卡片同一节奏 */ #app .wapp-body > .wapp-panel[style*="margin-top:12px"] { margin-top: 12px; } .wapp-list .wapp-row + .wapp-row { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wk-line) 88%, transparent); } /* 展示标一行入口 + 选择弹层 */ .wapp-picklist { display: flex; flex-direction: column; } .wapp-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 0 4px; border: 0; background: none; font-size:13px; line-height:17px; color: var(--wk-ink); text-align: left; cursor: pointer; } .wapp-pick + .wapp-pick { box-shadow: inset 0 1px 0 var(--wk-line); } .wapp-pick.is-on { font-weight: 600; } .wapp-pick .wapp-i { width: 18px; height: 18px; color: var(--wk-ink); } /* 深色主题对比度补丁：说明文字/图标/标签提亮到可读 */ [data-theme="dark"] .wapp-wal-note, [data-theme="dark"] .wapp-wal-empty { color: var(--wk-ink-2); } [data-theme="dark"] .wapp-asset-ico { opacity: 1; color: var(--wk-ink-2); } .wapp-segstack .wk-seg { display: flex; width: 100%; } .wapp-segstack .wk-seg__item { flex: 1; justify-content: center; } /* 设置页等：相邻面板之间补 12px，避免糊成一片 */ .wapp-body > .wapp-panel + .wapp-panel { margin-top: 12px; } /* ---------- 订单卡：当事人 + 摘要 + 操作 ---------- */ .wapp-order + .wapp-order { box-shadow: inset 0 1px 0 var(--wk-line); } .wapp-order-hd b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .wapp-order-peer { margin-top: 10px } .wapp-order-peer-av { width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: var(--wk-fill); color: var(--wk-ink-3) } .wapp-order-peer-av .wk-avatar { width: 20px; height: 20px; font-size:10px; } .wapp-order-peer-nm { font-weight: 500 } .wapp-order-meta { margin-top: 8px } .wapp-order-ft { display: flex; flex-wrap: wrap } .wapp-order-ft .wk-btn { min-width: 0; } .wapp-order-no { font-size:10px; line-height:14px; color: var(--wk-ink-3) } .wapp-order-peer-nm.is-mute { color: var(--wk-ink-3); font-weight: 400; } .wapp-price.is-mute i, .wapp-price.is-mute b { color: var(--wk-ink-3); } .wapp-order-no { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .wapp-copy { font-size:10px; line-height:14px; padding: 0 6px; border-radius: 4px; color: var(--wk-ink-2); background: var(--wk-fill); } /* 一级切换用标签页样式，和二级状态分段拉开层级 */ .wapp-segstack > .wk-seg:first-child { background: transparent; border: 0; padding: 0; gap: 20px; } .wapp-segstack > .wk-seg:first-child .wk-seg__item { flex: 0 0 auto; padding: 0 0 8px; border-radius: 0; background: transparent; color: var(--wk-ink-3); font-size:13px; line-height:17px; font-weight: 500; box-shadow: inset 0 -2px 0 transparent; } .wapp-segstack > .wk-seg:first-child .wk-seg__item.is-on { color: var(--wk-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--wk-ink); } /* 协议版本 / 待同意提示 / 订单取消原因 */ .wapp-doc__hist { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; font-size:12px; line-height:15px; color: var(--wk-ink-2); background: var(--wk-fill); } .wapp-doc__hist b { color: var(--wk-ink); } .wapp-agr { display: flex; flex-direction: column; gap: 10px; } .wapp-agr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .wapp-agr-t { font-size:13px; line-height:17px; font-weight: 500; } .wapp-agr-l { font-size:12px; line-height:15px; color: var(--wk-ink-2); text-decoration: underline; } .wapp-agr-tip { margin: 4px 0 0; font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-card-state { font-size:10px; line-height:14px; padding: 0 6px; border-radius: 4px; color: var(--wk-ink-2); background: var(--wk-fill); } .wapp-card-state.is-off { color: var(--wk-ink-3); } .wapp-ml-sub { margin-top: 6px; font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-ml-on { color: var(--wk-ink-2); font-weight: 500; } .wapp-ml-code { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 4px; background: var(--wk-fill); color: var(--wk-ink-2); font-size: 10px; line-height: 14px; font-variant-numeric: tabular-nums; letter-spacing: .3px; } .wapp-ml-offv { color: var(--wk-ink-3); } .wapp-org-m { margin-top: 2px; font-size:11px; line-height:14px; color: var(--wk-ink-3); } /* 大神在线状态 */ .wapp-on-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--wk-ink-3); } .wapp-on-dot.is-on { background: var(--wk-success, var(--wk-ok)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wk-success, var(--wk-ok)) 22%, transparent); } .wapp-on-t { color: var(--wk-ink); font-weight: 600; } /* 帖子作者行：关注 / 私信 */ .wapp-post-auth .wk-avatar { width: 28px; height: 28px; } .wapp-post-auth-tm { margin-left: 2px; flex: none } .wapp-post-auth-acts { margin-left: auto } /* 次要操作不抢标题：矮一点、小一号、圆角收一点 */ .wapp-post-auth-acts .wk-btn { min-width: 0; line-height:21px } .wapp-cmt-floors { margin-left: 6px; font-size:11px; color: var(--wk-ink-3); font-weight: 400; } .wapp-mc-live { font-size:10px; line-height:14px; padding: 0 5px; border-radius: 4px; font-style: normal; color: var(--wk-ink); background: color-mix(in srgb, var(--wk-success, var(--wk-ok)) 18%, transparent); } /* ===== 对比度修正（v=329）：次要文字全站提到 WCAG AA ===== /app/ui 的 --wk-ink-3/4 在白底只有 3.18/2.99:1，12px 正文字号不达标。 只在 webapp 作用域内压深，不动 /app/ui 令牌文件；深色主题由 [data-theme="dark"] 覆盖，不受影响。 */ :root { --wk-ink-2: #363b42; --wk-ink-3:#767f92; /* 3.18 → 5.6:1 */ --wk-ink-4: #6d727a; /* 2.99 → 4.7:1 */ } /* 状态色当文字用时也要达标（浅底深字） */ [data-theme="light"] .wapp-row-amt.is-in, :root:not([data-theme="dark"]) .wapp-row-amt.is-in { color: var(--wk-ok); } [data-theme="light"] .wk-status--cancel, :root:not([data-theme="dark"]) .wk-status--cancel { color: var(--wk-danger); } [data-theme="light"] .wapp-frozen-t, :root:not([data-theme="dark"]) .wapp-frozen-t { color: var(--wk-warn); } /* 段控件未选中项、下拉提示这类 12–15px 文字 */ [data-theme="light"] .wk-seg__item:not(.is-on), :root:not([data-theme="dark"]) .wk-seg__item:not(.is-on) { color: var(--wk-ink-3); } /* 收口最后两处不达标（v=330） */ [data-theme="light"] .wapp-pcard .wk-badge, :root:not([data-theme="dark"]) .wapp-pcard .wk-badge { background: var(--wk-danger); color: #fff; } [data-theme="light"] .wapp-slogout, :root:not([data-theme="dark"]) .wapp-slogout { color: var(--wk-danger); } /* 深色主题：次要文字同样要过 AA（#888A8E 在 var(--wk-ink)540 上只有 3.52:1） */ [data-theme="dark"] .wapp-pcard .wk-badge { background: var(--wk-danger); color: #fff; } /* 深色收口：库里的 .wk-cell 写死白底、主按钮/强调徽标写死白字 */ .wapp-panel .wk-cell { background: var(--wk-card); } :root[data-theme="dark"] .wk-btn--primary, :root[data-theme="dark"] .wk-badge--accent { color: var(--wk-on-accent); } :root[data-theme="dark"] .wk-seg { background: var(--wk-accent-weak); } :root[data-theme="dark"] .wk-seg__item.is-on { color: var(--wk-on-accent); background: var(--wk-accent); } /* 评论输入条里的 @ 按钮（文字按钮，尺寸跟图片按钮一致） */ .wapp-cbar-at { font-size:13px; font-weight: 600; color: var(--wk-ink-2); line-height: 1; } /* 消息页：未读徽标保持红色（深色下 --wk-accent 是白，会被看成白点）； 小标签（客服状态/板块）在深色下必须换成深底浅字，否则浅灰底 + 浅灰字 */ .wk-badge--accent { background: var(--wk-danger); color: #fff; } :root[data-theme="dark"] .wk-chip { background: var(--wk-accent-weak); color: var(--wk-ink); } :root[data-theme="dark"] .wk-chip.is-on { background: var(--wk-accent); color: var(--wk-on-accent); } /* @ 选人搜索 + 评论里的 @标签 */ .wapp-at-search { margin-bottom: 8px; } .wapp-at-search .wk-input { width: 100%; } .wapp-opts-empty { padding: 20px 0; text-align: center; font-size:12px; color: var(--wk-ink-3); } .wapp-at { display: inline; padding: 0 2px; border: 0; background: transparent; color: var(--wk-link, #1a6dff); font-size: inherit; font-weight: 500; line-height: inherit; text-decoration: none; vertical-align: baseline; } :root[data-theme="dark"] .wapp-at { color: #79a6ff; } /* 订单取消说明：退款语义色要在两档主题里都读得出来 */ .wapp-order-note b { font-weight: 600; } :root:not([data-theme="dark"]) .wapp-order-note .is-in { color: var(--wk-ok); } :root[data-theme="dark"] .wapp-order-note .is-in { color: var(--wk-ok); } :root:not([data-theme="dark"]) .wapp-order-note .is-warn { color: var(--wk-warn); } :root[data-theme="dark"] .wapp-order-note .is-warn { color: #ffcf8a; } :root[data-theme="dark"] .wk-status--cancel { color: var(--wk-danger); } :root[data-theme="dark"] .wk-status--done { color: var(--wk-ok); } /* 支出也用语义色（原来和正文同色，减号和内容分不开） */ :root:not([data-theme="dark"]) .wapp-row-amt.is-out { color: var(--wk-danger); } :root[data-theme="dark"] .wapp-row-amt.is-out { color: var(--wk-danger); } .wapp-tr-l2 .wapp-tr-tag { flex: none; } /* ================= 大神主页 v2：作品展示 / 评价 / 在线点 ================= */ .wapp-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; } .wapp-dot.is-on { background: #17b26a; box-shadow: 0 0 0 3px rgba(23, 178, 106, .16); } .wapp-dot.is-off { background: var(--wk-ink-4); } .wapp-mhero-bio { margin-top: 6px; font-size:12px; line-height:15px; color: var(--wk-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .wapp-cell-empty { padding: 20px 16px; font-size:12px; line-height:15px; color: var(--wk-ink-3); } /* 作品展示：3 列方格，间距 8，圆角 8 */ .wapp-galgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 16px 16px; } .wapp-gal-i { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--wk-fill); } .wapp-gal-i img { display: block; width: 100%; height: 100%; object-fit: cover; } .wapp-gal-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 11px; background: rgba(0, 0, 0, .56); color: #fff; font-size:13px; line-height:17px; text-align: center; } .wapp-gal-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 1 / 1; border: 1px dashed var(--wk-line-2); border-radius: 8px; background: transparent; color: var(--wk-ink-3); font-size:11px; } .wapp-gal-add i { font-size:18px; font-style: normal; line-height:15px; font-weight: 300; } .wapp-gal-add em { font-style: normal; } .wapp-gal-empty { grid-column: 1 / -1; padding: 8px 0 16px; font-size:12px; line-height:15px; color: var(--wk-ink-3); } /* 评价分布 + 评价条目 */ .wapp-revbox { padding: 4px 16px 16px; } .wapp-revdist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .wapp-revdist-row { display: flex; align-items: center; gap: 8px; font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-revdist-row span { flex: none; width: 28px; } .wapp-revdist-row i { flex: 1; height: 6px; border-radius: 3px; background: var(--wk-fill); overflow: hidden; } .wapp-revdist-row i b { display: block; height: 6px; border-radius: 3px; background: var(--wk-warning, var(--wk-warn)); } .wapp-revdist-row em { flex: none; width: 24px; text-align: right; font-style: normal; } .wapp-rev { display: flex; gap: 8px; border-top: 1px solid var(--wk-line) } .wapp-rev:first-of-type { border-top: 0; } .wapp-rev-b { flex: 1; min-width: 0; } .wapp-rev-h { display: flex; align-items: center; gap: 6px; font-size:12px; line-height:15px; color: var(--wk-ink-2); } .wapp-rev-h b { font-weight: 500; color: var(--wk-ink); } .wapp-rev-h em { margin-left: auto; font-style: normal; font-size:11px; color: var(--wk-ink-3); } .wapp-stars { color: var(--wk-warn); font-size:11px; letter-spacing: 1px; } .wapp-rev-t { margin-top: 2px; font-size:12px; line-height:15px; color: var(--wk-ink-2); } /* 全屏看图 */ .wapp-iv { position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, .94); display: flex; flex-direction: column; } .wapp-iv[hidden] { display: none; } .wapp-iv-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; } .wapp-iv-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; } .wapp-iv-bar { flex: none; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); color: #fff; font-size:12px; } .wapp-iv-nav, .wapp-iv-x { border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: #fff; border-radius: 999px; padding: 6px 14px; font-size:12px; } .wapp-iv-nav { width: 36px; padding: 6px 0; } /* 大神主页四格数据：独立类名，别和「我的页」的 .wapp-mstat 抢（同名会被后者覆盖成竖排） */ .wapp-tstat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--wk-line); border-radius: 8px; overflow: hidden; margin-bottom: 4px; } .wapp-tstat > div { background: var(--wk-card); padding: 10px 4px; text-align: center; } .wapp-tstat b { display: block; font-size:13px; line-height:17px; font-weight: 700; color: var(--wk-ink); font-variant-numeric: tabular-nums; } .wapp-tstat span { font-size:10px; line-height:14px; color: var(--wk-ink-3); } /* 已实名标：绿底绿字 + 勾，别用中性灰（灰底看起来像禁用） */ .wapp-verify { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 0 6px; height: 18px; border-radius: 4px; font-style: normal; font-size:10px; font-weight: 500; color: var(--wk-success-ink, var(--wk-ok)); background: var(--wk-success-bg, #e7f6ee); } :root[data-theme="dark"] .wapp-verify { color: #7fe3ad; background: rgba(23, 178, 106, .16); } .wapp-mhero-st { font-weight: 600; color: var(--wk-ink-2); } /* 底部操作条：贴安全区，不压系统横条 */ .wapp-dock2 { padding-bottom: calc(var(--wk-sp-2) + env(safe-area-inset-bottom, 0px)); } /* 主页封面主图（相册第一张）+ 网格上的「主图」标记 + 看图器「设为主图」 */ .wapp-mcover { flex: none; width: 100%; overflow: hidden } .wapp-mcover img { display: block; width: 100%; height: 100%; object-fit: cover; } .wapp-gal-main { position: absolute; left: 4px; bottom: 4px; padding: 0 5px; height: 16px; line-height:14px; border-radius: 3px; font-style: normal; font-size:10px; font-weight: 500; color: #fff; background: rgba(0, 0, 0, .55); } .wapp-iv-main { border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: #fff; border-radius: 999px; padding: 6px 14px; font-size:12px; } /* 有主图时头像上压半格，和封面连成一体，别各占一块留白 */ .wapp-mcover + .wapp-mhero { margin-top: -40px; padding-top: 0; align-items: flex-end; } .wapp-mcover + .wapp-mhero .wapp-mhero-av { display: inline-flex; flex: none; padding: 3px; border-radius: 50%; background: var(--wk-bg); } .wapp-mcover + .wapp-mhero .wapp-mhero-b { padding-bottom: 2px; } /* ===== 大神主页版式：统一 16 内边距 + 卡内呼吸 ===== */ .wapp-mpage { display: flex; flex-direction: column; gap: 16px; } .wapp-mpage .wapp-sec { margin-top: 0; } .wapp-mpage .wapp-panel { padding: 16px } .wapp-mpage .wapp-sechd { align-items: center } .wapp-mpage .wapp-sechd b { font-size:13px; line-height:17px; } .wapp-mpage .wapp-sechd em { font-size:11px; color: var(--wk-ink-3); } /* 相册网格已经在卡片 16 内边距里，不再二次缩进 */ .wapp-mpage .wapp-galgrid { padding: 0; gap: 8px; } .wapp-mpage .wapp-revbox { padding: 0; } /* 擅长游戏：卡内行去掉左右内边距，行间顶部分割线 */ .wapp-mpage .wapp-panel .wk-cell { padding: 12px 0; background: transparent; } .wapp-mpage .wapp-panel .wk-cell + .wk-cell { border-top: 1px solid var(--wk-line); } .wapp-mpage .wapp-panel .wk-cell:first-child { padding-top: 0; } .wapp-mpage .wapp-panel .wk-cell:last-child { padding-bottom: 0; } .wapp-mpage .wapp-cell-empty { padding: 4px 0 0; } /* 服务行：左右 16 内边距 + 12 行距，价格右对齐分层 */ .wapp-mpage .wapp-mrows { margin: 0; } .wapp-mpage .wapp-mrow { padding: 12px 0; gap: 12px; } .wapp-mpage .wapp-mrow + .wapp-mrow { border-top: 1px solid var(--wk-line); } .wapp-mpage .wapp-mrow-b { gap: 4px; } .wapp-mpage .wapp-mrow-b b { font-size:13px; line-height:15px; font-weight: 600; } .wapp-mpage .wapp-mrow-meta { display: flex; align-items: center; gap: 6px; } .wapp-mpage .wapp-mrow-meta i { font-style: normal; font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-mpage .wapp-mchip { padding: 0 6px; height: 18px; line-height:14px; border-radius: 4px; font-style: normal; font-size:10px; font-weight: 500; color: var(--wk-ink-2); background: var(--wk-fill); } .wapp-mpage .wapp-mrow-r { gap: 0; } .wapp-mpage .wapp-price { display: inline-flex; align-items: baseline; gap: 1px; } .wapp-mpage .wapp-price i { font-style: normal; font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-mpage .wapp-price b { font-size:13px; line-height:17px; font-weight: 700; color: var(--wk-ink); font-variant-numeric: tabular-nums; } .wapp-mpage .wapp-price em { font-style: normal; margin-left: 2px; font-size:10px; line-height:14px; color: var(--wk-ink-3); } .wapp-mpage .wapp-mrow-r .wapp-price { min-width: 64px; justify-content: flex-end; } .wapp-mpage .wapp-mrow-r i.wk-ico, .wapp-mpage .wapp-mrow-r svg { color: var(--wk-ink-4); } /* 顶部资料块：和卡片同一套圆角与留白 */ .wapp-mpage .wapp-mhero { padding: 0 0 12px; } .wapp-mpage .wapp-mhero-b { padding-bottom: 2px; } .wapp-mpage .wapp-tstat { background: var(--wk-card); border: 1px solid var(--wk-line); border-radius: 12px; gap: 0 } .wapp-mpage .wapp-tstat > div { background: transparent; padding: 0; } .wapp-mpage .wapp-tstat > div + div { border-left: 1px solid var(--wk-line); } .wapp-mpage .wapp-dock2 { margin-top: 4px; } /* 顶部资料块的行间呼吸：姓名标签、状态、简介各让 2–4px */ .wapp-mpage .wapp-mhero { padding-bottom: 12px; } .wapp-mpage .wapp-mhero-t { gap: 8px; } .wapp-mpage .wapp-mhero-t .wapp-verify { margin-left: 2px; } .wapp-mpage .wapp-mhero-sex { margin-left: 0; } .wapp-mpage .wapp-mhero-s { margin-top: 6px; } .wapp-mpage .wapp-mhero-bio { margin-top: 8px; } /* ══════════════════════════════════════════════════════════════════ 资质 / 考官工作台（v=381）—— 统一视觉规范，别再各写一套 字号：11 / 12 / 13 / 14 / 16（18+ 只给页标题与金额） 行高：16 / 18 / 20 / 22 / 24（固定像素，不用 normal） 圆角：8（小件）/ 12（卡片）/ 999（胶囊） 间距：4 的倍数；区块间 16 / 卡内 16 / 行内上下 12 / 元素间 8 分层：1px --wk-line 描边，不用阴影；底色 --wk-card / --wk-fill 状态色固定（不跟 accent 翻转）：成功 var(--wk-ok) / 警示 var(--wk-warn) / 危险 --wk-danger ══════════════════════════════════════════════════════════════════ */ .wapp-qp{display:flex;flex-direction:column;gap:16px} .wapp-card { background:var(--wk-card); border:1px solid var(--wk-line)} .wapp-card-hd { justify-content:space-between } .wapp-card-hd b{font-size:13px;line-height:19px;font-weight:600;color:var(--wk-ink)} .wapp-card-hd em{font-style:normal;font-size:11px;line-height:14px;color:var(--wk-ink-3)} .wapp-card-desc{margin:0 0 12px;font-size:11px;line-height:14px;color:var(--wk-ink-2)} .wapp-row { display:flex; align-items:center; gap:12px; box-sizing:border-box } .wapp-row + .wapp-row{border-top:1px solid var(--wk-line)} .wapp-row-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px} .wapp-row-t { display:flex; align-items:center; gap:8px; font-weight:600; color:var(--wk-ink); min-width:0 } .wapp-row-t b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wapp-row-s { color:var(--wk-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .wapp-row-r{flex:none;display:flex;align-items:center;gap:8px;font-size:12px;line-height:15px;color:var(--wk-ink-2)} .wapp-row-r svg{width:16px;height:16px;flex:none;color:var(--wk-ink-3)} .wapp-tag{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:4px;font-size:10px;line-height:15px;font-weight:600;font-style:normal;background:var(--wk-fill);color:var(--wk-ink-2);white-space:nowrap;flex:none} .wapp-tag.is-ok{background:rgba(11,107,67,.10);color:var(--wk-ok)} .wapp-tag.is-warn{background:rgba(180,83,9,.10);color:var(--wk-warn)} .wapp-tag.is-mute{background:transparent;border:1px dashed var(--wk-line);color:var(--wk-ink-3)} :root[data-theme="dark"] .wapp-tag.is-ok{background:rgba(87,217,154,.14);color:var(--wk-ok)} :root[data-theme="dark"] .wapp-tag.is-warn{background:rgba(240,178,90,.14);color:#f0b25a} .wapp-btn-s{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 14px;border:1px solid var(--wk-line);border-radius:999px;background:transparent;color:var(--wk-ink);font-size:12px;line-height:15px;font-weight:500;cursor:pointer;white-space:nowrap} .wapp-btn-s.is-primary{background:var(--wk-accent);border-color:var(--wk-accent);color:var(--wk-on-accent)} .wapp-btn-s:disabled{opacity:.45;cursor:default} .wapp-thumbs{display:flex;gap:8px;margin:0 0 4px} .wapp-thumbs img{width:64px;height:64px;border-radius:8px;object-fit:cover;background:var(--wk-fill);cursor:pointer;border:1px solid var(--wk-line)} /* 考官考核卡：头（申请人 + 目标）→ 截图 → 尾（时间 + 动作） */ .wapp-exam{padding:16px 0} .wapp-exam + .wapp-exam{border-top:1px solid var(--wk-line)} .wapp-exam-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px} .wapp-exam-who{display:flex;flex-direction:column;gap:2px;min-width:0} .wapp-exam-who b{font-size:13px;line-height:17px;font-weight:600;color:var(--wk-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wapp-exam-who i{font-style:normal;font-size:11px;line-height:14px;color:var(--wk-ink-2)} .wapp-exam-ft{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px} .wapp-exam-ft em{font-style:normal;font-size:11px;line-height:14px;color:var(--wk-ink-3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wapp-exam-acts{display:flex;gap:8px;flex:none} /* 申请弹层里的实力截图（必填） */ .wapp-shots{margin-top:16px} .wapp-shots-hd{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;font-size:12px;line-height:15px;font-weight:500;color:var(--wk-ink)} .wapp-shots-hd i{font-style:normal;font-size:10px;line-height:14px;font-weight:400;color:var(--wk-ink-3)} .wapp-shots-g{display:flex;flex-wrap:wrap;gap:8px} .wapp-shot{position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden;background:var(--wk-fill)} .wapp-shot img{width:100%;height:100%;object-fit:cover} .wapp-shot-x{position:absolute;top:2px;right:2px;width:18px;height:18px;border:0;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;line-height:14px;padding:0;cursor:pointer} .wapp-shot-add{width:72px;height:72px;border:1px dashed var(--wk-line);border-radius:8px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--wk-ink-3);cursor:pointer} .wapp-shot-add svg{width:18px;height:18px} .wapp-shot-add i{font-style:normal;font-size:10px;line-height:14px} /* 商品页资质软提示 */ .wapp-qualneed{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding:12px 16px;border:1px solid var(--wk-line);border-radius:12px;background:var(--wk-fill);color:var(--wk-ink-2);font-size:11px;line-height:14px;cursor:pointer} .wapp-qualneed span{display:flex;align-items:center;gap:6px;min-width:0} .wapp-qualneed svg{width:16px;height:16px;flex:none;color:var(--wk-ink-3)} .wapp-qualneed b{font-weight:600;font-size:12px;color:var(--wk-ink);white-space:nowrap;flex:none} /* ══════════════════════════════════════════════════════════════════ 排版归一（v=384）—— 全站字号 / 点击区 / 状态色收敛 背景：全站扫了一遍，发现 15/17/22/10px 与 16.38px(em 基准) 混用， chip/分段控件点击区只有 27–32，绿状态标对比度 2.37:1。这里统一压平： 字号只留 11/12/13/14/16/20/24；控件点击区 ≥36；状态色固定。 ══════════════════════════════════════════════════════════════════ */ .wapp-frame h2, .wapp-frame .wapp-sechd b, .wapp-frame .wapp-sec-hd h2, .wapp-frame .wapp-econ-hd h2, .wapp-frame .wapp-doc h2 { font-size:13px; line-height:19px; font-weight: 600; } .wapp-frame .wapp-mcard-t { font-size:13px; line-height:15px; } .wapp-frame .wapp-wal-main b, .wapp-frame .wapp-econ-cell b, .wapp-frame .wapp-cs-kpi b, .wapp-frame .wapp-mcard-r .wapp-price b { font-size:16px; line-height:22px; font-weight: 700; } .wapp-frame .wapp-doc p, .wapp-frame .wapp-doc li, .wapp-frame .wapp-doc div { font-size:13px; line-height:17px; } /* 点击区：视觉高度不变，但可点区域 ≥36（dot 用伪元素扩热区） */ .wapp-frame .wk-chip { min-height: 36px; } .wapp-frame .wk-seg__item { min-height: 36px; display: inline-flex; align-items: center; justify-content: center} .wapp-frame .wapp-mtab { min-height: 36px; } /* 状态色：成功绿在白底只有 2.37:1，压深；危险红压深一档 */ .wapp-frame .wk-status--done { color: var(--wk-ok); background: rgba(11, 107, 67, .10); } .wapp-frame .wapp-sw-act.is-danger { background: #b42318; } :root[data-theme="dark"] .wapp-frame .wk-status--done { color: var(--wk-ok); background: rgba(87, 217, 154, .14); } /* 排版归一·补漏（v=385）：库/页面各有更高优先级的选择器，这里用同权重或更高权重压平 */ .wapp-frame .wk-seg .wk-seg__item { font-size:13px; min-height: 36px; } .wapp-frame .wapp-doc h3 { font-size:13px; line-height:19px; font-weight: 600; margin: 20px 0 8px; } .wapp-frame .wapp-doc p, .wapp-frame .wapp-doc li { font-size:13px; line-height:17px; } /* 排版归一·第三轮（v=386）：点击区统一 36，字号用 important 压住库/页面里的历史 15px */ .wapp-frame .wk-seg__item { font-size:13px !important; } .wapp-frame .wk-btn--sm { min-height: 36px; } /* 排版归一·第四轮（v=387）：数量步进器与首页频道条也要 ≥36 点击区 */ .wapp-frame .wk-stepper__btn { min-width: 36px; min-height: 36px; } .wapp-frame .wapp-chan { min-height: 36px; min-width: 36px; } /* 排版归一·第五轮（v=388）：最后一批评测出来的小点击区 */ .wapp-frame .wapp-order-no { min-height: 36px; } .wapp-frame .wapp-sec-hd a, .wapp-frame .wapp-sechd a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 2px; } .wapp-panel > .wapp-qual, .wapp-panel > .wapp-org { padding: 12px 16px; } /* ══ 区块呼吸与贴边（v=390）══════════════════════════════════════ 1) 贴边：.wapp-panel 本身不加内边距（v=362 定），但里面很多块只写了纵向 padding， 文字直接压在卡片描边上。这里把常见内容块补横向 16。 2) 行距：区块标题原来 margin-top:20 + padding:8/10 + margin-bottom:8 = 上下共 46px， 看着"两块之间太空"。改成 上 20 / 下 8，内边距归零。 ══════════════════════════════════════════════════════════════ */ .wapp-panel > .wapp-sec-hd, .wapp-panel > .wapp-sechd, .wapp-panel > .wapp-list, .wapp-panel > .wapp-row, .wapp-panel > .wapp-task, .wapp-panel > .wapp-row-s, .wapp-panel > .wapp-kpis, .wapp-panel > .wapp-btnrow, .wapp-panel > .wapp-galgrid, .wapp-panel > .wapp-mrows, .wapp-panel > .wapp-lpwall, .wapp-panel > .wapp-revbox { padding-left: 16px; padding-right: 16px; } .wapp-panel > .wapp-price.wapp-price--xl { padding-left: 16px; padding-right: 16px; } .wapp-panel > .wapp-list { padding-top: 4px; padding-bottom: 4px; } .wapp-body .wapp-sec-hd {} .wapp-body > .wapp-sec-hd:first-child, .wapp-pagecol > .wapp-sec-hd:first-child {} .wapp-body .wapp-sec-hd + .wapp-panel, .wapp-body .wapp-sec-hd + .wapp-list { margin-top: 0; } /* 贴边收尾（v=391）：上一条被 .wapp-body .wapp-sec-hd{padding:0} 覆盖了，这里提高权重补回来； .wapp-list / .wapp-row 谁当卡片谁负责横向 16；大神主页四格与话题 chips 也补上。 */ .wapp-body .wapp-panel > .wapp-sec-hd, .wapp-body .wapp-panel > .wapp-sechd {} .wapp-list > .wapp-row, .wapp-panel > .wapp-row, .wapp-panel > .wapp-list > .wapp-row { padding-left: 16px; padding-right: 16px; } .wapp-panel > .wapp-list { padding-left: 0; padding-right: 0; } .wapp-tstat { padding: 4px 8px; } /* 大神主页四格：.wapp-mpage .wapp-tstat 的 padding:12px 0 优先级更高，补成 12 / 8 */ .wapp-mpage .wapp-tstat { padding: 12px 8px; } /* ══ 区块标题节奏基线（v=393）══════════════════════════════════ 历史上有 4 处 .wapp-sec-hd 规则互相打架（padding 8/10、margin 20/8、16/2…）， 结果同一个"标题"在不同页面上下间距 2–46px 不等，看着忽大忽小。这里定死： 页面级标题 = 上 20 / 下 8；卡片内标题 = 上 0 / 下 8（卡自己给 16 内边距）。 ══════════════════════════════════════════════════════════ */ .wapp-body .wapp-sec-hd { margin: 20px 0 8px !important; padding: 0 !important; } .wapp-body .wapp-panel > .wapp-sec-hd, .wapp-body .wapp-panel > .wapp-sechd { margin: 0 !important; padding: 14px 16px 8px !important; } .wapp-body > .wapp-sec-hd:first-child, .wapp-pagecol > .wapp-sec-hd:first-child { margin-top: 0 !important; } /* 收尾（v=394）：大神主页相册角标 / 价目区间 / 我的帖子删除，仍是 10·15·17·22 与 28–22 高点击区 */ .wapp-frame .wapp-gal-main { font-size:10px; } .wapp-frame .wapp-gal-x { font-size:12px; min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; } .wapp-frame .wapp-lpwall b, .wapp-frame .wapp-mrows .wapp-price b { font-size:13px; } .wapp-frame .wapp-shot-add i, .wapp-frame .wapp-gal-add i { font-size:10px; } .wapp-frame .wapp-mypost__del { min-height: 36px; padding: 0 8px; } /* ══ 对标小黑盒（v=395）：密度、层级、反馈 ══════════════════════════ 实测小黑盒社区（xiaoheihe.cn/app/bbs/home，430 宽）： · 正文 13/15（行高仅 1.15）+ 元信息 11/15 + 标题 17/25 字重 700 · 底色 var(--wk-bg)、主字 var(--wk-ink)、次级 var(--wk-ink-3)、强调红 var(--wk-danger) · 列表=透明底 + 1px 分割线（不是白卡）；头像 46×46、圆角 5px · 间距直方图：8 / 10 / 14 / 16；圆角 5 最多，卡片最大 8 所以我们不是"全站统一 16/14/22"，而是：信息流紧（13/20 + 11/16）， 详情页留松（14/22 阅读），卡片圆角分层（信息流 8 / 区块 12）。 ══════════════════════════════════════════════════════════════ */ /* 层级：标题更黑 */ .wapp-body .wapp-sec-hd h2, .wapp-body .wapp-card-hd b { font-weight: 700; } /* 信息流密度：列表摘要 13/19、元信息 11/16；详情页正文反而要松（小黑盒详情正文 15/23） */ .wapp-card-b { line-height:17px} .wapp-card-by, .wapp-card-tm, .wapp-card-stats { font-size:10px; line-height:14px; } .wapp-post-body { font-size:13px; line-height:20px; } /* 信息流卡片圆角收到 8（小黑盒卡片最大 8；12 留给区块卡/弹层） */ .wapp-card { border-radius: 8px; } /* 反馈：按下整行变暗（小黑盒的 tap 反馈是"内容区变灰"，不是缩放） */ .wapp-post, .wapp-card, .wapp-mcard, .wapp-mrow, .wapp-pcard, .wapp-conv { -webkit-tap-highlight-color: transparent; transition: background-color .12s ease; } .wapp-post:active, .wapp-mcard:active, .wapp-mrow:active { background: var(--wk-fill); } /* 图片淡入：避免图片区先白后图（小黑盒图片都是渐显） */ @keyframes wk-img-in { from { opacity: 0 } to { opacity: 1 } } .wapp-body img { animation: wk-img-in .18s ease both; } /* 热度/点赞用强调红，和主色区分（小黑盒 var(--wk-danger) 只给点赞与热度） */ .wapp-post-ft .is-hot, .wapp-like-on { color: var(--wk-danger); } /* 帖子详情：标题按小黑盒 17/25/700，时间戳 11/16（正文 15/23 已对上） */ .wapp-post-h { font-size:13px; line-height:22px; font-weight: 700; } /* 帖子详情标题：.wapp-frame h2 是 (0,1,1)，比 .wapp-post-h (0,1,0) 高，这里补到 (0,2,0) */ .wapp-frame .wapp-post-h { font-size:13px; line-height:22px; font-weight: 700; } /* ══ 按"页面类型"给节奏（v=399）══════════════════════════════════ 依据：小黑盒 APK 各页面 layout 的间距直方图（aapt2 解 res/layout） · 搜索页 12/10 为主 · 消息行 10/8/14 · 用户主页 8/12/18 · 游戏中心 10/32 · 信息流 12/17 · 我的页入口行 11/8 · 字号档：10/11/12/13/14/16/17/20/22/24（1px 阶梯，主力 14） ══════════════════════════════════════════════════════════════ */ /* 消息列表：行内 10 / 14（小黑盒消息行），头像 44 */ .wapp-conv { padding: 10px 14px; } .wapp-conv img, .wapp-conv .wapp-avatar { width: 44px; height: 44px; } /* 我的页入口行：纵向 11（小黑盒 item_home_menu 是 11dp） */ /* 大神主页（= 小黑盒"用户主页"）：区块间 12、四格内 8、资料行 18 */ .wapp-mpage .wapp-sechd { padding: 12px 16px 8px; } .wapp-mpage .wapp-card + .wapp-card { margin-top: 12px; } .wapp-mpage .wapp-tstat > div { gap: 2px; } /* 商品详情：价格走 22px 档（小黑盒价格 22sp） */ .wapp-price b, .wapp-pdp-price b { font-size:18px; line-height:23px; } /* ══ v=400：四项按页面类型对齐（可回滚：本段整体删除即可）══════════ 依据 APK：游戏中心 卡内 10 / 大区块 32；搜索 12/10； 我的页头部 4/12 密排；会话行 10；购物车行 12/10。 ── ① 大厅 / 交易行：卡内 10、卡与卡 10（原 16/12） ── ② 搜索：页边距 12、结果行 10/12 ── ③ 帖子流：透明底 + 1px 分割线（原白卡 + 8 圆角） ── ④ 我的页头部密排 4/12 ══════════════════════════════════════════════════════════════ */ /* ① 大厅 / 交易行 */ .wapp-body > .wapp-cards { margin-top: 16px; } .wapp-tr-quote { padding: 16px 14px; } .wapp-tr-trend { padding: 12px 14px 14px; } .wapp-sr-row + .wapp-sr-row { border-top: 1px solid var(--wk-line); } /* ③ 帖子流：线式（小黑盒 feed 的形态：透明底 + 分割线，无圆角无描边） */ .wapp-feed > .wapp-card { border: 0; margin-bottom: 0} .wapp-feed > .wapp-card + .wapp-card { border-top: 1px solid var(--wk-line); } .wapp-feed > .wapp-card:active { background: var(--wk-fill); } /* 线式 feed：图片与文字同缩进（小黑盒图片不吃满卡片，与其他内容对齐）*/ .wapp-feed > .wapp-card .wapp-card-media { margin: 0 16px; border-radius: 8px; overflow: hidden; } /* 修正：media 是 width:100%，加 margin 会右溢出 ⇒ 宽度改为 auto */ .wapp-feed > .wapp-card .wapp-card-media { width: auto; aspect-ratio: 4 / 3; } /* 搜索页结果行：10/12（小黑盒搜索结果 12/7）；我的页头部 12/16/8 提权生效 */ .wapp-searchbar ~ .wapp-card { padding: 10px 12px; } /* 搜索页结果在 .wapp-flow 里：行内 10/12、卡片 8 圆角、卡间 10 */ .wapp-searchbar ~ .wapp-flow { gap: 10px; } .wapp-searchbar ~ .wapp-flow > .wapp-card { padding: 10px 12px; border-radius: 8px; } /* 我的页入口行：纵向 11（小黑盒 item_home_menu 11dp） */ .wapp-body .wapp-row { padding-top: 11px; padding-bottom: 11px; } /* ══ v=406：帖子卡改小黑盒形态 + 我的页头图压边 ══════════════════ */ /* 1) 帖子卡：头像/昵称在标题上面（原来在底部） */ .wapp-card-hd { display: flex; gap: 8px; padding: 12px 16px 0 } .wapp-card-hdmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .wapp-card-hdmain .wapp-card-by { font-size:12px; line-height:17px; font-weight: 600; color: var(--wk-ink); } .wapp-card-hdmain .wapp-card-tm { color: var(--wk-ink-3) } /* 2) 图片：1 张大图 / 2–9 张九宫格（小黑盒 feed 的两形态） */ .wapp-pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative } .wapp-pgrid[data-n="2"], .wapp-pgrid[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wapp-pgrid img { object-fit: cover; display: block } /* 3) 我的页：头图 + 头像压边（品牌规则：纯色不用渐变） */ /* v=407 我的页头部修正：头像单独上提压边，昵称/UID 整体落在头图下方（不再被色块切开） */ /* v=408 我的页头部精修：头图满宽（与卡片同边）、头像加 3px 卡色描边，脱离"贴上去"的感觉 */ /* v=409 头像与头图左沿对齐（头像框自身有 17px 内衬，所以 hd 横向 padding 归零） */ /* v=410 我的页头部：头像框装饰会外溢，整体右移 4px；描边加一道发丝线在白底上可见；头像与昵称留 16 */ /* v=411 全量挖掘结论落地：APK 里 12sp 是最高频字号（1137 次，14sp 只有 554）， 所以「元信息/标签」统一到 12/17，而不是 11；页面留 16 是因为我们 CSS 宽 430 ≈ 小黑盒 390dp × 1.1， 16px@430 折算约 14.5dp，和他们 14 一档。 */ .wapp-card-hdmain .wapp-card-tm { font-size:11px; line-height:15px; } .wk-chip--sm { line-height:15px } /* ══ v=412 首页观感修（按视觉审阅的具体问题）════════════════════ */ /* 1) Banner 文字压图对比度不足：加文字阴影 + 副标题不再半透明 */ /* 2) 双图/多图统一方格，不再一高一矮 */ .wapp-pgrid {} .wapp-pgrid img {} /* 3) 分类 tab 与首帖之间给呼吸（原来紧贴头像） */ .wapp-feed {} /* 4) 卡片底部数据：降一档灰度、用点分隔，没分割符时也更整齐 */ .wapp-card-stats { font-variant-numeric: tabular-nums } .wapp-card-stats > span + span::before { color: var(--wk-ink-4) } /* v=413 商品详情：段位 4 列（7 档排成 4+3 不再孤行）、标签改中性、价格提到 28 */ .wapp-seg-wrap { display: grid } .wapp-seg-wrap .wk-seg__item { font-size:11px; line-height:14px; border-radius: 10px; text-align: center; overflow: hidden; text-overflow: ellipsis } .wapp-panel .wk-badge { background: var(--wk-fill); color: var(--wk-ink-2); box-shadow: none; border: 0; } .wapp-price em { font-size:11px; } /* v=414 订单卡：取消态用中性灰（原来红点红字太像告警），金额降级，行距收紧 */ .wapp-body .wk-status--cancel { background: var(--wk-fill)} .wapp-body .wk-status--cancel .wk-status__dot {} .wapp-price.is-mute b { font-size:14px; line-height:19px; color: var(--wk-ink-3); } .wapp-price.is-mute i { color: var(--wk-ink-3); } .wapp-order-note { margin-top: 6px; font-size:11px; line-height:14px; color: var(--wk-ink-3); } .wapp-order-no { margin-top: 8px; } /* 库里的 .wk-status--cancel 颜色带 !important 或内联，这里强制中性 */ .wapp-body .wk-status--cancel { color: var(--wk-ink-2) !important; } .wapp-body .wk-status--cancel .wk-status__dot { background: var(--wk-ink-3) !important; } /* ══ v=416 大神主页：封面不再"灰块"、头像压边、底部栏 1:2 ══════════ */ .wapp-mcover { margin-bottom: 0; /* 比 16:9 更扁，首屏把资料露出来 */ } .wapp-mhero { margin-top: -30px; align-items: flex-end; padding-bottom: 12px; } .wapp-mhero-av { box-shadow: 0 0 0 3px var(--wk-card), 0 0 0 4px var(--wk-line); border-radius: 999px; display: inline-flex; } .wapp-mhero-t { font-size:14px; } /* 底部操作栏：私信 : 立即下单 = 1 : 2，且页面底部留出等高空白 */ .wapp-dock2 .wk-btn { height: 44px; } .wapp-dock2 > *:first-child { flex: 0 0 33%; } .wapp-mpage { padding-bottom: 8px; } /* 底部操作栏 1:2 真正生效（第一颗是固定宽度而非 flex-basis） */ .wapp-dock2 .wk-btn:first-child { flex: 0 0 34%; width: 34%; } .wapp-dock2 .wk-btn:last-child { flex: 1 1 auto; } /* 底部私信按钮原来写死 96px，改成 34% 形成 1:2 */ .wapp-dock2 .wapp-dock2__dm {} /* 空封面放品牌水印，避免一整块灰 */ .wapp-mcover.is-empty { position: relative; align-items: center; justify-content: center } .wapp-mcover.is-empty::after { font-size:18px; line-height: 1; letter-spacing: .28em; font-weight: 800; color: var(--wk-ink-4); opacity: .7 } /* 既有规则带 !important（flex:0 0 96px），这里同权重覆盖到 34%（1:2） */ .wapp-dock2 .wapp-dock2__dm { flex: 0 0 34% !important; } /* ══════════════════════════════════════════════════════════════════ v=420 视觉设计层（不是修 bug，是立"语言"） 角色化字阶： display 28/36/800 —— 价格、关键金额 h1 18/26/800 —— 页面主标题（详情页商品名） h2 16/24/700 —— 区块标题 h3 15/21/600 —— 卡片标题 body 14/22/400 —— 正文 meta 12/17/400 —— 辅助/时间/单位 label 12/16/500 —— 标签、胶囊 节奏：区块间 20 / 卡间 12 / 卡内 16 / 行内 12 颜色：黑=主动作；蓝=仅焦点；红=仅错误；绿=仅成功/在线 ══════════════════════════════════════════════════════════════════ */ /* 字阶落地 */ .wapp-h1 { margin: 0 0 8px } .wapp-card-t { letter-spacing: 0 } .wapp-sec-hd h2 { font-size:13px; line-height:19px; font-weight: 700; letter-spacing: 0; } .wapp-body { font-variant-numeric: tabular-nums; }/* 数字：所有金额/统计走等宽数字，避免跳动 */.wapp-price b .wapp-tstat b .wapp-tr-rate { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* 卡片体系：统一 1px 描边 + 12 圆角，禁止额外阴影 */ .wapp-panel { box-shadow: none; } /* 状态胶囊统一高度 20，圆点 4px */ .wapp-body .wk-status { height: 20px; padding: 0 8px; font-size:11px; line-height:15px; border-radius: 999px; } .wapp-body .wk-status__dot { width: 4px; height: 4px; } /* 标签胶囊统一 12/16，两档高度（sm 20 / 常规 24） */ .wapp-body .wk-chip { font-size:11px; line-height:14px; } .wapp-body .wk-chip--sm { height: 20px; padding: 0 8px; } /* 微交互：只保留按下反馈（页面级淡入在 fill() 重渲染时会重复触发，去掉） */ .wapp-row, .wapp-card, .wapp-conv, .wapp-pcard, .wapp-mcard, .wapp-order { transition: background-color .12s ease, transform .12s ease; } .wapp-quick .wapp-q { display: flex; flex-direction: column; align-items: center; background: transparent } .wapp-quick .wapp-q { min-height: 52px; gap: 6px; padding: 0; border-radius: 8px } .wapp-quick .wapp-q span { font-size:11px; line-height:14px; color: var(--wk-ink-2); } .wapp-h1 { font-size:13px; line-height:22px; font-weight: 700; letter-spacing: 0; } .wapp-card-t { font-weight: 700} .wapp-mcover { border-radius: 8px; aspect-ratio: 16 / 9; background: var(--wk-fill); } .wapp-mcover.is-empty { display: flex; } .wapp-mcover.is-empty::after { content: none; } /* 信息流作者头像：小黑盒是小圆角方形（46px/5 → 我们 32px 取 6） */ .wapp-card-hd .wk-avatar, .wapp-card-hd .wk-avatar-wrap > * { border-radius:8px; } /* 补齐：信息流标题 700、大神主页卡圆角也收到 8 */ .wapp-feed > .wapp-card .wapp-card-t { font-weight: 700; } .wapp-mpage .wapp-panel { border-radius: 8px; } .wapp-circles::-webkit-scrollbar { display: none; } .wapp-circles .wapp-circle { flex: none; padding: 0 12px; border-radius: 999px; border: 1px solid var(--wk-line); background: var(--wk-card); font-size:12px; color: var(--wk-ink-2); white-space: nowrap } .wapp-circles .wapp-circle.is-on { background: var(--wk-ink); border-color: var(--wk-ink); color: #fff; font-weight: 600; } /* v=427 圈子=看哪个游戏，频道=看哪类内容；排序独立成右侧小切换（小黑盒的分工） */ .wapp-feedbar { align-items: center; gap: 8px } @media (min-width: 900px) { .wapp-only-mob { display: none; } } .wapp-tscroll::-webkit-scrollbar { display: none; } .wapp-tcard { flex-direction: column } .wapp-tcard-av { margin-bottom: 2px } .wapp-tcard-av .wapp-on-dot { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border: 2px solid var(--wk-card); } .wapp-tcard-n { max-width: 100% } .wapp-tcard-lv { max-width: 100% } .wapp-tcard-p { font-variant-numeric: tabular-nums } .wapp-tcard-m { font-variant-numeric: tabular-nums } .wapp-tcard-go { margin-top: 6px } .wapp-cscroll::-webkit-scrollbar { display: none; } .wapp-ccard { flex-direction: column } .wapp-ccard-tags { min-height: 20px } .wapp-ccard-go { width: 100% } .wapp-rv:last-child { border-bottom: 0; } /* v=432 信息流接服务端推荐：加载态 */ .wapp-feed-load { padding: 24px 0; text-align: center; font-size:11px; line-height:15px; color: var(--wk-ink-3); } /* v=434 接单大厅：推荐给我 / 可抢单 / 我的接单 */ .wapp-grab-seg { margin: 0 0 12px; } .wapp-grab { padding: 14px 16px; margin-bottom: 10px; } .wapp-grab-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .wapp-grab-sv { font-size:13px; line-height:19px; font-weight: 700; color: var(--wk-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-grab-amt { flex: none; font-size:18px; line-height:23px; font-weight: 700; font-variant-numeric: tabular-nums; } .wapp-grab-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .wapp-grab-meta i { font-style: normal; font-size:10px; line-height:14px; padding: 0 6px; border-radius: 4px; background: var(--wk-fill); color: var(--wk-ink-2); } .wapp-grab-meta i.is-hot { background: #FFEDEF; color: #D92B3F; } .wapp-grab-note { margin: 8px 0 0; font-size:12px; line-height:17px; color: var(--wk-ink-2); } .wapp-grab-ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; } /* v=435 派单选择层：候选人一行一个，右边明确"派给 TA" */ .wapp-candlist { display: flex; flex-direction: column; } .wapp-cand { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 0; border: 0; border-bottom: 1px solid var(--wk-line); background: transparent; } .wapp-cand:last-child { border-bottom: 0; } .wapp-cand-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .wapp-cand-n { display: flex; align-items: center; gap: 6px; font-size:13px; line-height:15px; font-weight: 600; color: var(--wk-ink); } .wapp-cand-s { font-size:11px; line-height:15px; color: var(--wk-ink-3); font-variant-numeric: tabular-nums; } .wapp-cand-go { flex: none; font-size:12px; line-height:15px; font-weight: 600; color: var(--wk-accent-ink); } .wapp-grab-tip { margin: 0 0 10px; font-size:11px; line-height:15px; color: var(--wk-ink-3); } /* v=437 指定接单人：商品页一行，点开选人 */ .wapp-assignee { width: 100%; border: 0; background: transparent; text-align: left; padding: 0; } .wapp-assignee .wapp-assignee-v { flex: 1; min-width: 0; text-align: right; font-size:13px; line-height:17px; color: var(--wk-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 我的页背景大图（v=443）：有图显示图 + 轻微下压渐变，无图保持品牌色块；右上角常驻「上传/更换背景」 */ /* v=444 我的页精修：头图底部融进卡片、右上按钮恒定对比度、底栏加号补图标 */ /* v=446 我的页/底栏三处硬伤：头图圆角跟随卡片、头像与昵称组对齐、底栏加号不再被裁切 */ /* v=450 我的页：背景图底边柔和过渡 + 头像悬浮感 */ /* v=453 底栏图标：SVG 统一 22px（原来跟 11px 字号一起缩成 11px，看起来像没图标） */ /* v=455 首页精简：宫格 4 等分 + 大神/俱乐部文字切换 */ .wapp-quick .wapp-q { flex: 1 1 0; min-width: 0; } .wapp-sec-hd--seg { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .wapp-seg { display: flex; align-items: center; gap: 18px; } .wapp-seg__b { position: relative; padding: 0 0 6px; background: none; border: 0; cursor: pointer; font-family: inherit; font-size:13px; line-height:17px; font-weight: 600; color: var(--wk-ink-3); } .wapp-seg__b.is-on { color: var(--wk-ink); font-weight: 700; } .wapp-seg__b.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius:4px; background: var(--wk-accent); } .wapp-sec-hd--seg > a { font-size:11px; line-height:14px; color: var(--wk-ink-3); } /* v=456 发布按钮下方那圈「黑色月牙」= 内层 ICON('plus') 生成的 也命中了 `.wapp-tabplus i`（38px 黑圆）→ 叠成第二个偏移的圆 */ /* v=462 首页大神/俱乐部卡改横排：头像(logo) 左、信息右，价格贴右上、按钮压右下 */ .wapp-tcard { flex: none; width: 248px; padding: 12px; display: flex; gap: 10px; background: var(--wk-card); border: 1px solid var(--wk-line); border-radius: 8px; text-align: left } .wapp-tcard-av { position: relative; flex: none; width: 44px; height: 44px; display: block; } .wapp-tcard-av .wk-avatar { width: 44px; height: 44px; } .wapp-tcard-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .wapp-tcard-r { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .wapp-tcard-n { font-size:13px; line-height:15px; font-weight: 700; color: var(--wk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .wapp-tcard-p { flex: none; font-size:12px; line-height:15px; font-weight: 700; color: var(--wk-ink); } .wapp-tcard-lv { font-size:11px; line-height:15px; color: var(--wk-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-tcard-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } .wapp-tcard-m { font-size:11px; line-height:15px; color: var(--wk-ink-3); white-space: nowrap; } .wapp-tcard-go { flex: none } .wapp-ccard { flex: none; width: 248px; padding: 12px; display: flex; gap: 10px; align-items: flex-start } .wapp-ccard-logo { flex: none; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--wk-fill, #F2F3F5); font-size:13px; font-weight: 700; color: var(--wk-ink-2); } .wapp-ccard-logo img { width: 100%; height: 100%; object-fit: cover; } .wapp-ccard-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .wapp-ccard-r { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .wapp-ccard-n { font-size:13px; line-height:15px; font-weight: 700; color: var(--wk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .wapp-ccard-em { font-size:11px; line-height:15px; color: var(--wk-ink-3); } .wapp-ccard-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; } .wapp-ccard-tags i { font-style: normal; font-size:10px; line-height:14px; padding: 0 6px; border-radius: 4px; background: var(--wk-fill, #F2F3F5); color: var(--wk-ink-2); } .wapp-ccard-go { flex: none } /* v=463 覆盖旧版竖排遗留：flex-direction:column / 按钮 width:100% */ .wapp-tcard, .wapp-ccard { flex-direction: row; } .wapp-tcard-go, .wapp-ccard-go { width: auto; } .wapp-tcard-f { width: 100%; } /* v=464 卡片按钮收到 28px，与两行信息同一节奏 */ .wapp-tcard-go, .wapp-ccard-go { height: 28px; line-height:21px; padding: 0 10px; } /* v=468 我的页「接单与资质」合并卡：资质行可点、底部一条申请入口 */ .wapp-qual { width: 100%; border: 0; border-bottom: 1px solid var(--wk-line); background: none; font-family: inherit; text-align: left; cursor: pointer; color: inherit; } .wapp-qual:active { background: var(--wk-fill); } /* v=471 背景图多张：计数胶囊 + 大图查看器导航 */ .wapp-cv-nav { display: flex; gap: 10px; justify-content: center; margin-top: 10px; } .wapp-cv-nav .wk-btn { flex: 1; } /* v=473 大图查看：.wapp-zoom 之前按原图 1200px 溢出弹层（图比遮罩还宽，压到页面内容） */ .wk-sheet .wapp-zoom, .wk-dialog .wapp-zoom { display: block; width: 100%; max-width: 100%; height: auto; max-height: 62vh; object-fit: contain; border-radius: 8px; background: var(--wk-fill); } /* v=475 首页轮播对齐小黑盒：通栏（顶到屏幕两边）、高度压到 430 宽约 156px、直角无圆角 */ @media (min-width: 900px) { .wapp-banner { margin: 0 0 12px; border-radius: 12px; aspect-ratio: 3.2 / 1; } } /* ══════════════════════════════════════════════════════════════════ v=476 向小黑盒对齐（间距层） 依据 APK 全量 2803 个 layout 统计：dp 最高频 12(3449) / 10(2455) / 8(1190) / 6(944)， sp 最高频 12(1336) / 14(686) / 10(641) / 11(461) / 13(389) / 16(356)。 字号阶梯已在这一版统一到 10/11/12/13/14/16/18/20/22；这里把间距收到 12 主导。 ══════════════════════════════════════════════════════════════════ */ .wk-page--tabbar .wapp-body {} .wapp-sec-hd { margin: 16px 0 8px; } .wapp-row { padding: 8px 12px; }.wapp-panel > .wapp-qual .wapp-panel > .wapp-org { padding-left: 12px; padding-right: 12px; } @media (min-width: 900px) { .wapp-body {} .wapp-banner { margin-left: 0; margin-right: 0; } } /* v=479 点击区补到 36（小黑盒/支付宝系同口径）：导航图标、圈子胶囊、排序、切换 tab、背景图按钮 */ .wapp-circles .wapp-circle { height: 36px; line-height:31px; } .wapp-feedbar__sort { min-height: 36px; display: inline-flex; align-items: center } .wapp-seg__b { min-height: 36px; display: inline-flex; align-items: flex-end; } /* 交易行板块条：版心改 12 后补偿值也要跟着改，否则右侧被切 4px */ .wapp-tr-secs { margin: 0 -12px; padding-left: 12px; padding-right: 12px; } /* v=480 返回键与轮播点：可视尺寸不变，命中区补到 36 */ /* v=481 信息流卡内缩进 16 → 12（跟版心 12 同一条网格）；长图封面限高 */ .wapp-feed > .wapp-card .wapp-pgrid { padding: 0 12px; } .wapp-card-media { width: auto } .wapp-card-media img { object-fit: cover } .wapp-feedbar {} /* v=482 竖屏封面再压一档（一屏至少露出下一条的标题）；控制链条间距再收 2px；隐藏桌面滚动条 */ .wapp-card-media img { max-height: 180px; } .wapp-scroll, .wapp-body { scrollbar-width: none; } .wapp-scroll::-webkit-scrollbar, .wapp-body::-webkit-scrollbar, html::-webkit-scrollbar { width: 0; height: 0; } /* v=483 服务卡（下单大厅/交易行）：图 4:3 → 3:2 且限高 140，卡内 12，标题行高 20，徽标去红 */ .wapp-pcard-body { gap: 4px } .wapp-pcard-t { min-height: 40px } [data-theme="light"] .wapp-pcard .wk-badge, :root:not([data-theme="dark"]) .wapp-pcard .wk-badge, [data-theme="dark"] .wapp-pcard .wk-badge, .wapp-pcard .wk-badge { background: var(--wk-fill); color: var(--wk-ink-2); font-weight: 500; box-shadow: none; } /* v=485 服务详情：段位规格改两行（名/价），4 列 × 2 行——原来一列 87px 塞「王牌 · ¥188」被截成「¥18」，价格会读错 */ .wapp-seg-wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .wapp-seg-wrap .wk-seg__item { height: auto; min-height: 48px; padding: 6px 4px; white-space: normal; display: flex; flex-direction: column; align-items: center; gap: 1px } .wapp-seg-wrap .wk-seg__item.is-on .wapp-seg-p { color: inherit; opacity: .82; } /* 「指定接单人」整行可点，命中区补到 44 */ .wapp-assignee { min-height: 44px; align-items: center; } /* v=486 接入小黑盒图标（APK 资源，PNG + mask 单色着色，随 currentColor 走明暗两套主题） */ .xi { display: inline-block; flex: none; vertical-align: middle; background-color: currentColor; background-repeat: no-repeat; -webkit-mask: var(--xi) center / contain no-repeat; mask: var(--xi) center / contain no-repeat } .xi.xi--14 { width: 14px; height: 14px; } .xi.xi--16 { width: 16px; height: 16px; } .xi.xi--18 { width: 18px; height: 18px; } .xi.xi--20 { width: 20px; height: 20px; } .xi.xi--24 { width: 24px; height: 24px; } .wapp-i.xi { display: inline-block; } .wapp-q .wapp-i.xi { width: 22px; height: 22px; } .wk-cell__arrow .wapp-i.xi, .wapp-row-arrow .wapp-i.xi { width: 14px; height: 14px; } /* ══════════════════════════════════════════════════════════════════ v=490 XHH 复刻层（结构，不是皮肤）：白底 + 无卡片 + 1px 分割线 依据 p09 实测：页面底色纯白、帖子无边框无圆角、靠 var(--wk-line) 细线分隔、 标题 18sp、正文 14sp、图片圆角 8。我们之前是「灰底 + 白卡片 + 12 圆角 + 描边」， 这是"不像小黑盒"的最大来源。 ══════════════════════════════════════════════════════════════════ */ :root, html[data-theme="light"], html[data-theme="dark"] { --wk-bg: #FFFFFF; } .wapp-body { background: var(--wk-bg); } /* 卡片/面板：去掉描边与圆角，改成白底块，用分割线切分 */ .wapp-card, .wapp-panel, .wapp-list, .wapp-note, .wapp-qual, .wapp-org, .wapp-pcard, .wapp-tcard, .wapp-ccard, .wapp-feed > .wapp-card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: var(--wk-card) !important; } .wapp-card-media { margin-left: 0 !important; margin-right: 0 !important; } /* 字阶按 p09 实测往上一档：标题 18/25，正文 14/21 */ .wapp-card-t { font-size:14px !important; line-height:22px !important; -webkit-line-clamp: 3; } .wapp-card-b { font-size:13px !important } .wapp-card-by { font-size:12px; } .wapp-card-tm { font-size:10px; } /* 图片圆角 8、双图并排 1:1 */ .wapp-pgrid img, .wapp-card-media img { border-radius: 8px !important; } .wapp-card-media { border-radius: 8px } /* v=491 修 pgrid 撑高（v=490 去掉左右 padding 后 grid-auto-rows:1fr + img height:100% 把行撑成巨高空白） */ .wapp-pgrid img {} /* 互动行：图标 + 数字（对齐小黑盒），右对齐 */ .wapp-card-stats { margin-left: auto } .wapp-card-stats span { display: inline-flex; align-items: center; gap: 4px; } .wapp-card-stats .xi { width: 16px; height: 16px; opacity: .85; } .wapp-gstrip::-webkit-scrollbar { display: none; } .wapp-gico { overflow: hidden; background: var(--wk-fill); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px transparent } .wapp-gico img { width: 100%; height: 100%; object-fit: cover; display: block; } .wapp-gico b { font-size:13px; font-weight: 600; color: var(--wk-ink-2); } .wapp-gico .xi { color: var(--wk-ink-2); } .wapp-gitem.is-on em { color: var(--wk-ink); font-weight: 600; } /* v=493 信息流细节对齐小黑盒：左「游戏 + 类型」标签、右 赞/评/分享 图标；双图数量角标；密度收紧 */ .wapp-card-meta { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .wapp-card-game { display: inline-flex; align-items: center; gap: 4px; font-size:11px; line-height:15px; color: var(--wk-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; } .wapp-feed > .wapp-card { padding: 10px 0 12px !important; } .wapp-pgrid { margin-top: 8px; gap: 6px; } .wapp-pgrid[data-n] { position: relative; } .wapp-pgrid[data-n]::after { content: attr(data-n) ' 图'; position: absolute; right: 8px; bottom: 8px; z-index: 2; height: 20px; padding: 0 7px; border-radius: 10px; background: rgba(0,0,0,.55); color: #fff; font-size:10px; line-height:15px; pointer-events: none; } /* 分类条选中态收轻：1px 描边，不再叠加重字重 */ .wapp-gitem.is-on .wapp-gico { box-shadow: inset 0 0 0 1px var(--wk-ink); } /* v=494 二级页导航：小黑盒是「返回 + 居中标题 + 右侧动作」，我们原来标题靠左 */ /* 列表行按小黑盒密度：56 基准、标题 15、说明 12、右侧 16 箭头 */ .wapp-row { min-height: 56px; padding-top: 10px; padding-bottom: 10px; } .wapp-row-t { font-size:14px; line-height:19px; } .wapp-row-s { font-size:11px; line-height:15px; } /* v=495 会话/列表行对齐小黑盒：行间 1px 分割线、右侧细箭头、客服类圆形浅底图标 */ .wapp-conv { border-bottom: 1px solid var(--wk-line); } .wapp-conv:last-child { border-bottom: 0; } .wapp-conv-ft .wapp-i.xi { width: 14px; height: 14px; color: var(--wk-ink-4); } .wapp-conv .wk-avatar, .wapp-conv .wapp-conv-ico { width: 44px; height: 44px; flex: none; } .wapp-conv-ico .xi { width: 22px; height: 22px; } .wapp-conv-ico.is-sup { background: #EAF2FF; color: #006EF4; } .wapp-conv-ico.is-sys { background: #EFF1F3; color: var(--wk-ink-3); } /* 空态：小黑盒式 灰块图标 + 标题 + 说明 */ .wk-state__ic { width: 52px; height: 52px; border-radius: 14px; background: var(--wk-fill); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: var(--wk-ink-4); } .wk-state__t { font-size:13px; line-height:15px; color: var(--wk-ink-2); } .wk-state__d { font-size:11px; line-height:15px; color: var(--wk-ink-3); margin-top: 4px; } /* ══════════════════════════════════════════════════════════════════ v=496 纠正 v=490 的一刀切： 小黑盒是**两套**——社区信息流页 = 白底通栏无卡；其它页（首页/我的/列表/详情）= 浅灰底 + 白卡。 我之前把所有页面都去卡片化了，导致首页大神卡、公告散架。 ══════════════════════════════════════════════════════════════════ */ :root, html[data-theme="light"] { --wk-bg:#f6f7fb; } html[data-theme="dark"] { --wk-bg: #0E1013; } /* 信息流页（社区）保持白底通栏 */ #view:has(.wapp-feed) { background: #fff; } /* 非信息流页：白卡 + 12 圆角 + 无描边（XHH 卡片无边框，靠底色差分隔） */ .wapp-card, .wapp-panel, .wapp-list, .wapp-note, .wapp-qual, .wapp-org, .wapp-pcard, .wapp-tcard, .wapp-ccard, .wapp-notice { border: 0 !important; box-shadow: none !important; background: var(--wk-card) !important; border-radius: 12px !important; } /* 信息流内：无卡、无圆角、只留分割线 */ .wapp-feed > .wapp-card { border-radius: 0 !important; border-bottom: 1px solid var(--wk-line) !important; background: #fff !important; } .wapp-feed > .wapp-card:last-child { border-bottom: 0 !important; } /* 订单卡：56 基准行高、状态胶囊 20 高、金额 17/700、操作按钮 36 */ .wapp-order { padding: 12px 0 10px; } .wapp-order-hd b { font-size:14px; line-height:19px; } .wapp-order-ft { margin-top: 10px; } .wapp-order .wk-badge, .wapp-order-hd .wk-badge { height: 20px; line-height:15px; padding: 0 8px; font-size:10px; } .wapp-order .wapp-price b { line-height: 17px } /* ══════════════════════════════════════════════════════════════════ v=501 「直接复刻」标定层：数值全部取自小黑盒 APK dimens（不是目测） feeds_img_radius = 2dp → 信息流图片圆角 2（原来我拍 8） heybox_tab_height = 42dp → 频道条 42 高 list_item_height = 46dp → 列表行 46 home_bottom_tab_bar_height=56 → 底栏 56（沿用） comm_normal_font_size = 18sp → 正文 18 档 / small 16 divider_width = 1dp → 分割线 1 general_size_radius_5 = 12dp → 卡片圆角 12 24dp 图标体系 → 图标 24 ══════════════════════════════════════════════════════════════════ */ .wapp-card-media, .wapp-card-media img, .wapp-pcard-media, .wapp-pcard-media img, .wapp-pgrid img, .wapp-post-img, .wapp-pimg, .wapp-trade-img, .wapp-prod-img { border-radius:4px !important; } .wapp-chan { height: 30px; padding: 0 2px } .wapp-row, .wapp-list .wapp-row, .wapp-set-row { min-height: 46px; } .wapp-tab i, .wapp-tab svg, .wapp-tabi { width: 24px; height: 24px; } .wapp-tab span, .wapp-tab em { font-size:10px; line-height:11px; } /* v=502 修：多图网格被 grid-auto-rows:1fr + img height:100% 压成空白（v491 遗留） */ .wapp-pgrid { grid-auto-rows: auto !important; align-items: start !important; } .wapp-pgrid img { height: auto !important; width: 100% !important; aspect-ratio: 1 / 1 !important; } /* 互动栏：固定 36 高一行、图标 16 着色、项间 14 */ .wapp-card-stats { display: flex; align-items: center } .wapp-card-stats > span { display: inline-flex; align-items: center } .wapp-card-stats .wapp-xhh { background: currentColor; display: inline-block } .wapp-card-stats > span + span::before { content: none !important; margin: 0 !important; } /* v=503 破图兜底：图挂了也要有灰底占位（小黑盒同样有占位块），不出现纯白空洞 */ .wapp-pgrid img, .wapp-card-media img, .wapp-pcard-media img { background: var(--wk-fill); } /* ══════════════════════════════════════════════════════════════════ v=504 整套配色换成小黑盒 APK 的 color_value_gray_* 真值（light） gray_1000 var(--wk-ink) 主字 / gray_910 var(--wk-ink-3) 正文 / gray_800 var(--wk-ink-3) 次字 gray_700 var(--wk-ink-4) 脚注 / gray_600 var(--wk-line) 分割线 / gray_400 var(--wk-fill) 填充 gray_300 var(--wk-bg) 页面底 / gray_10 #FFFFFF 卡片 脚注行按 layout_concept_feeds_item_bottombar_v2：行高 20dp、图标 20dp、数字 12sp、色 gray_700 ══════════════════════════════════════════════════════════════════ */ .wapp-card-stats { gap: 12px; font-size:11px; line-height:15px; color: var(--wk-ink-3); } .wapp-card-stats > span { gap: 4px; } .wapp-card-stats .wapp-xhh, .wapp-card-stats i, .wapp-card-stats svg { color: var(--wk-ink-4); flex: none } /* ══════════════════════════════════════════════════════════════════ v=505 布局与位置按 p09 逐块量测复刻（dp，屏幕宽 360） XHH 实测：作者行 y200 h20 · 标题 y228(14)/244(16) · 单图 y268 h111 宽228 x8 分类图标条 y82 h46 名 y136 · 频道 tab y176 h16 我们原：作者行 h32 · 图 406×200 全宽 · 分类条 h97 · tab 之前多一行排序 ══════════════════════════════════════════════════════════════════ */ /* 1) 信息流单图：不铺满，左对齐 8，2.05:1 */ .wapp-feed .wapp-card-media { width: 63% !important; margin-left: 8px !important; margin-right: 0 !important; } .wapp-feed .wapp-card-media img { max-height: none !important } /* 2) 多图网格：同样左对齐 8、只占 63% 宽（原来铺满到 418） */ .wapp-feed > .wapp-card .wapp-pgrid { padding-left: 8px !important; padding-right: 0 !important } /* 3) 作者行压到 20dp（原来 32） */ .wapp-feed .wapp-card-hd { margin-bottom: 6px} .wapp-feed .wapp-card-hd img, .wapp-feed .wapp-card-hd .wapp-ava { width: 20px; height: 20px; } .wapp-feed .wapp-card-hd b { font-size:11px; line-height:15px; } /* 4) 分类图标条：图标 46、名 12、整条收 12 */ .wapp-gico { width: 46px; height: 46px; border-radius: 10px; } /* 5) 频道 tab 文字 16、行高 16（原来 42 高的条已对，只收内部） */ .wapp-chan {} /* v=506 修容器比例没生效 & 作者行没压下去 */ .wapp-feed .wapp-card-media { aspect-ratio: 228 / 111 !important; height: auto !important; overflow: hidden; } .wapp-feed .wapp-card-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; aspect-ratio: auto !important; } .wapp-feed .wapp-card-hd { display: flex !important; gap: 6px; flex-wrap: nowrap !important; overflow: hidden } .wapp-feed .wapp-card-hd > * { flex: none; } .wapp-feed .wapp-card-hd b { flex: 0 1 auto } /* v=507 头部压缩：去掉「全部圈子 · 推荐」那行（XHH 主信息流没有这行），排序按钮并到频道条右侧 */ .wapp-feedbar { min-height: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible; position: relative; } .wapp-feedbar__sort { position: absolute; right: 0; top: -34px; height: 26px; line-height:21px } .wapp-feed { margin-top: 8px !important; } /* v=508 修作者行左右错位 + 多图不该套单图 63% 宽度 + 脚注贴近媒体 */ .wapp-feed .wapp-card-hd { justify-content: flex-start !important; } .wapp-feed .wapp-card-hd > b, .wapp-feed .wapp-card-hd > .wapp-card-nm { flex: 0 1 auto !important; min-width: 0; } .wapp-feed .wapp-card-hd > span:last-child, .wapp-feed .wapp-card-hd > .wapp-card-time { margin-left: auto; } .wapp-feed .wapp-card-hd > i, .wapp-feed .wapp-card-hd > .wapp-card-ava { margin-right: 6px; } .wapp-feed > .wapp-card .wapp-pgrid { width: 78% !important; } /* v=509 空态按 p12 复刻：2×2 灰块（右下虚线）+「暂无内容」浅灰居���，不放按钮 */ .wk-empty-grid { display: inline-grid; grid-template-columns: repeat(2, 1fr); gap: 4px; width: 44px; height: 44px; } .wk-empty-grid i { background: var(--wk-line); border-radius: 3px; display: block; } .wk-empty-grid i:nth-child(4) { background: transparent; border: 1px dashed var(--wk-line); } .wk-state__title { margin-top: 12px; line-height:14px } /* ══════════════════════════════════════════════════════════════════ v=510 消息中心按 p11 复刻：4 个快捷入口（彩色浅底圆图标 + 12sp 标签 + 红角标） ＋ 通知列表卡片（彩色圆图标 / 主标题 / 副标题 2 行 / 时间 / 未读红点） ══════════════════════════════════════════════════════════════════ */ .wapp-inboxq { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 14px 8px 6px; background: var(--wk-card); border-radius: 12px; margin-bottom: 12px; } .wapp-inboxq__i { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: transparent; padding: 4px 0 6px; min-height: 36px; } .wapp-inboxq__ico { position: relative; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ic); background: color-mix(in srgb, var(--ic) 12%, #fff); } .wapp-inboxq__ico svg, .wapp-inboxq__ico i, .wapp-inboxq__ico .wapp-xhh { width: 22px; height: 22px; } .wapp-inboxq__ico b { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; line-height:14px; padding: 0 4px; border-radius: 8px; background: var(--wk-danger); color: #fff; font-size:10px; font-weight: 600; text-align: center; } .wapp-inboxq__i em { font-style: normal; font-size:11px; line-height:14px; color: var(--wk-ink-2); } /* 通知列表 */ .wapp-inbox { padding-top: 4px; } .wapp-inbox__hd { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px 10px; font-size:11px; color: var(--wk-ink-3); } .wapp-inbox__all { border: 0; background: transparent; font-size:11px; color: var(--wk-ink-2); padding: 6px 2px; } .wapp-ncard { display: flex; gap: 10px; background: var(--wk-card); border-radius: 12px; padding: 12px; margin-bottom: 8px; position: relative; } .wapp-ncard__ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ic); background: color-mix(in srgb, var(--ic) 12%, #fff); } .wapp-ncard__ico svg, .wapp-ncard__ico i { width: 20px; height: 20px; } .wapp-ncard__bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .wapp-ncard__bd b { font-size:13px; line-height:15px; font-weight: 600; color: var(--wk-ink); } .wapp-ncard__bd em { font-style: normal; font-size:11px; line-height:15px; color: var(--wk-ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wapp-ncard__bd i { font-style: normal; font-size:10px; line-height:14px; color: var(--wk-ink-4); } .wapp-ncard__dot { position: absolute; top: 14px; right: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--wk-danger); } .wapp-ncard.is-unread { background: #FCFDFF; } /* v=511 用户行按 p15 复刻：行高 72、右侧浅灰胶囊按钮 28 高；底栏选中态加粗成"实心感" */ .wapp-urow { min-height: 72px !important; padding: 12px 12px !important; gap: 10px; } .wapp-urow .wapp-row-t { font-size:14px; line-height:19px; } .wapp-urow .wapp-row-s { font-size:11px; line-height:15px; color: var(--wk-ink-3); } .wapp-upill { flex: none; height: 28px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--wk-fill); color: var(--wk-ink); font-size:11px; } .wapp-upill[disabled] { color: var(--wk-ink-3); } .wapp-tab.is-on svg, .wapp-tab.is-on .wapp-xhh { stroke-width: 2.6; } .wapp-tab.is-on span, .wapp-tab.is-on em { font-weight: 600; color: var(--wk-ink); } /* v=512 榜单行按 p10 复刻：前 3 名带彩色序号的排名标记（1 橙红 / 2 紫 / 3 蓝），其余灰 */ .wapp-mc { position: relative; } /* v=513 视频媒体独立一档（小黑盒视频封面比单图宽）：78% 宽、16:9 */ .wapp-feed .wapp-card-media.is-video { width: 78% !important; aspect-ratio: 16 / 9 !important; } /* v=514 互动记录（我评论的）按 p13 复刻：用户行 + 评论正文 + 引用原帖卡（灰底圆角 + 缩略图 + 标题单行） */ .wapp-mycmt { padding-top: 4px; } .wapp-citem { background: var(--wk-card); border-radius: 12px; padding: 12px; margin-bottom: 8px; } .wapp-citem__hd { display: flex; align-items: center; gap: 8px; } .wapp-citem__hd b { flex: 1; min-width: 0; font-size:13px; line-height:15px; font-weight: 600; color: var(--wk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-citem__hd i { font-style: normal; font-size:10px; color: var(--wk-ink-4); } .wapp-citem__tx { margin: 8px 0 0; font-size:13px; line-height:19px; color: var(--wk-ink-2); } .wapp-quote { display: flex; align-items: center; gap: 8px; margin-top: 10px; border-radius: 8px; background: var(--wk-bg) } .wapp-quote img, .wapp-quote__ph { flex: none; width: 40px; height: 40px; border-radius:8px; object-fit: cover; background: var(--wk-fill); } .wapp-quote em { font-style: normal; font-size:11px; line-height:15px; color: var(--wk-ink-2); -webkit-box-orient: vertical } /* v=515 破图占位 + 引用卡标题强制单行截断 */ img.is-broken { background: var(--wk-fill); } .wapp-quote em { white-space: nowrap; text-overflow: ellipsis; display: block; overflow: hidden; -webkit-line-clamp: none; } .wapp-quote { padding: 10px; } /* ══════════════════════════════════════════════════════════════════ v=516 帖子详情页骨架按小黑盒（APK: activity_base_post_page 的 BottomEditorBar 常驻底部） · 评论输入条固定在底部（白底 + 1px 上边线 + 安全区） · 标题 20/28、正文 16/27（详情页比信息流更松） · 互动行 44 高、图标 22 ══════════════════════════════════════════════════════════════════ */ body:has(.wapp-cbar) .wapp-cmtpad { height: 8px !important; } .wapp-cbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--wk-card); border-top: 1px solid var(--wk-line); margin: 0 } .wapp-cbar-row { display: flex; align-items: center; gap: 8px; } .wapp-cbar-in { flex: 1; min-height: 36px; max-height: 96px; padding: 7px 12px; border-radius: 999px; background: var(--wk-fill); border: 0; font-size:13px; line-height:17px; color: var(--wk-ink); resize: none; } .wapp-cbar-send { flex: none; height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--wk-accent); color: var(--wk-on-accent); font-size:13px; font-weight: 600; } .wapp-cbar-ico { flex: none; width: 36px; height: 36px; border: 0; background: transparent; color: var(--wk-ink-2); display: flex; align-items: center; justify-content: center; } /* 详情页文字层级：标题 20、正文 16（信息流是 18/14） */ .wapp-post-title, .wapp-frame .wapp-post-h { font-size:16px !important; line-height:22px !important; font-weight: 700 !important; } .wapp-post-body, .wapp-post-content, .wapp-post-text { font-size:13px !important; line-height:22px !important; } .wapp-post-acts { min-height: 44px; align-items: center; } .wapp-pact { height: 36px; } .wapp-pact svg, .wapp-pact i { width: 22px; height: 22px; } /* ══════════════════════════════════════════════════════════════════ v=517 顶栏/底栏按 XHH 实测重做（用户点名的两处） 底栏（p09 实测）：总高 64.5dp、5 等分中心 36/108/180/252/324、图标 24、标签 10、顶线 #F9F9F9 顶栏（p09/p12 实测）：高 44、左右 12–21、标题 17/600 居中（一级页 20/700 左对齐）、图标 24、底线极浅 ══════════════════════════════════════════════════════════════════ */ /* 底栏 */ /* ══════════════════════════════════════════════════════════════════ v=518 顶栏/底栏继续贴 XHH： · 顶栏不要 logo 小方块 + 品牌字混排（XHH 顶栏是纯文字标题，无图标 logo） · 一级页标题 20/700；二级页 17/600 居中 · 底栏图标笔画 1.6（XHH 24dp 图标线条更细）、顶线 var(--wk-fill) ══════════════════════════════════════════════════════════════════ */ /* v=519 底栏中间发布按 XHH：黑色实心圆 40、白色加号 20、凸出 12、不带文字标签 */ /* v=520 修中间按钮没凸出：flex 下 margin-top 不生效，改绝对定位 */ /* v=521 中间按钮再上移：目标凸出底栏顶边约 10px */ /* v=522 底栏选中用实心图标（XHH 选中=实心）；底栏高度含安全区 */ /* ══════════════════════════════════════════════════════════════════ v=526 服务详情底部购买条按小黑盒商品详情（activity_mall_product_detail： 内容区 + 常驻底部按钮条 + 1px 分割线） ══════════════════════════════════════════════════════════════════ */ .wapp-buybar { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--wk-card); display: flex; align-items: center; gap: 12px; margin: 0 !important } .wapp-buybar .wk-btn { border-radius: 22px } .wapp-buybar .wapp-price b { font-size:18px; line-height:21px; } .wapp-buybar-amt { flex: none; display: flex; flex-direction: column; gap: 0; } .wapp-buybar-amt .wapp-row-s { font-size:10px; line-height:13px; color: var(--wk-ink-3); } .wapp-home-games .wapp-gico {} /* ══════════════════════════════════════════════════════════════════ v=528 首页大神横卡重排（XHH 用户卡语法：头像 + 名称/副信息两行 + 底行价格·操作） —— 原来价格贴右上、按钮压右下，视线打架 ══════════════════════════════════════════════════════════════════ */ .wapp-tcard .wapp-tcard-r { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .wapp-tcard .wapp-tcard-n { font-size:13px; line-height:15px; font-weight: 600; color: var(--wk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wapp-tcard .wapp-tcard-m { white-space: nowrap } .wapp-tcard .wapp-tcard-lv {} .wapp-tcard .wapp-tcard-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } .wapp-tcard .wapp-tcard-p { font-weight: 700; color: var(--wk-ink)} .wapp-tcard .wapp-tcard-go { padding: 0 12px; border-radius: 14px; font-size:11px} /* v=529 卡内按钮 28（.wk-btn--sm 有 36 的 min-height，必须同权重覆盖） */ .wapp-tcard .wapp-tcard-go { height: 28px !important; min-height: 28px !important; line-height:22px !important; } /* v=530 大神卡改为三行信息网格：名称 / 段位 / 评分·单数，价格与按钮落底行；分类条名称宽 56 */ .wapp-tcard .wapp-tcard-r { justify-content: flex-start; } .wapp-tcard .wapp-tcard-m { display: block; font-size:10px; line-height:13px; color: var(--wk-ink-3) } .wapp-hpc { display: flex; flex-direction: column; gap: 6px; border-radius: 10px; overflow: hidden } .wapp-hpc-t { padding: 0 8px; min-height: 36px } .wapp-hpc-f { padding: 0 8px 8px } .wapp-hpc-f em { line-height:13px } .wapp-hpc-ph .wapp-i svg, .wapp-hpc-ph svg { width: 24px; height: 24px; } /* v=535 大神卡：段位做成浅灰标签（与评分行区分层级，XHH 的信息标签语法） */ .wapp-tcard .wapp-tcard-lv { display: inline-block !important; font-size:10px; line-height:14px; padding: 0 6px; border-radius: 4px; background: var(--wk-fill); color: var(--wk-ink-2); margin-top: 4px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wapp-tcard .wapp-tcard-m { margin-top: 4px; } /* ══════════════════════════════════════════════════════════════════ v=536 顶栏/底栏再对齐 XHH（这次是逐像素看放大图得出的） 顶栏：XHH 首页 = 左「动态 / 推荐」两个文字 tab（选中黑加粗、未选中浅灰、无下划线）+ 右侧两图标 → 我们首页顶栏换成「大神 / 俱乐部」文字 tab，去掉 WAKE logo 底栏：XHH 中间是**圆角方形深色底 + 白加号**（不是圆），四栏有文字、中间无文字 ══════════════════════════════════════════════════════════════════ */ /* 中间发布：圆形 → 圆角方形（squircle）34、radius 11 */ /* ══════════════════════════════════════════════════════════════════ v=537 顶栏 tab 字号层级 + 中间按钮几何按 p09 实测 顶栏：未选 17/400 灰、选中 20/700 黑（p09 实测字高 12.5 vs 16dp），间距 19 底栏：XHH 中间按钮 43×40.5、**从底栏顶线往下、不凸出**、圆角方 ══════════════════════════════════════════════════════════════════ */ /* v=538 中间按钮贴底栏顶线：按钮容器必须撑满栏高，否则 top:0 仍在图标区 */ /* ══════════════════════════════════════════════════════════════════ v=539 底栏两处收口（用户：我说的都改） ① 图标顶距 19 → 13、文字落在 49 附近（XHH p09：栏 67、图标 24@13、文字 10@49） ② 四栏图标统一自绘（TABICON 只认 SITE_ICON），描边统一 1.9，尺寸 24 ══════════════════════════════════════════════════════════════════ */ /* v=540 底栏图标顶距精确到 13（padding 9 + gap 11，文字仍落 48） */ /* ══════════════════════════════════════════════════════════════════ v=541 订单卡改小黑盒结构：单号+状态 / 缩略图+标题+对方+时间 / 右侧金额 / 底部操作 （后端 /order/mine 已补 products{name,cover}） ══════════════════════════════════════════════════════════════════ */ .wapp-order-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .wapp-order-hd .wapp-order-no { margin: 0; font-size:10px; line-height:14px; color: var(--wk-ink-3); display: inline-flex; align-items: center; gap: 6px; } .wapp-order-main { display: flex; align-items: flex-start; gap: 10px; } .wapp-order-thumb { flex: none; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--wk-fill); display: flex; align-items: center; justify-content: center; color: var(--wk-ink-3); } .wapp-order-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .wapp-order-thumb svg, .wapp-order-thumb .wapp-i { width: 22px; height: 22px; } .wapp-order-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .wapp-order-title { font-weight: 600; color: var(--wk-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .wapp-order-peer { display: flex; align-items: center; gap: 6px; min-width: 0; } .wapp-order-peer-av { display: inline-flex; } .wapp-order-peer-nm { font-size:11px; line-height:14px; color: var(--wk-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wapp-order-peer-rl { flex: none; font-size: 10px; line-height: 13px; padding: 0 4px; border-radius: 3px; background: var(--wk-fill) } .wapp-order-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size:10px; line-height:13px; color: var(--wk-ink-3); } .wapp-order-amt { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 62px; } .wapp-order-amt b { line-height: 15px; font-weight: 700; color: var(--wk-ink) } .wapp-order-amt b i { font-style: normal; font-size:10px; margin-right: 1px; } .wapp-order-amt b.is-mute { color: var(--wk-ink-3); text-decoration: line-through; } .wapp-order-amt em { font-style: normal; font-size:10px; line-height:12px; color: var(--wk-ink-3); } /* ══════════════════════════════════════════════════════════════════ v=543 帖子详情页骨架按小黑盒：作者行（头像32 + 昵称/时间两行 + 关注） → 标题 20/700 → 正文 16/27 → 图（单图 16:9 满宽、多图 3 列）→ 数据 → 互动 修：破图时图片区塌成 0 高（原来只在流里兜底，详情页没有） ══════════════════════════════════════════════════════════════════ */ .wapp-post-auth { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; } .wapp-post-auth-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .wapp-post-auth-nm { font-size:12px; line-height:14px; font-weight: 600; color: var(--wk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wapp-post-auth-tm { font-size:10px; line-height:14px; color: var(--wk-ink-3); } .wapp-post-auth-acts { flex: none; display: flex; gap: 6px; } .wapp-post-auth-acts .wk-btn { height: 28px !important; min-height: 28px !important; border-radius: 14px; font-size:11px; padding: 0 12px; } .wapp-post-h { margin: 0 0 8px; } .wapp-post-body { margin: 0 0 10px; } .wapp-post-imgs { display: grid; gap: 4px; margin: 0 0 12px; } .wapp-post-imgs.is-one { grid-template-columns: 1fr; } .wapp-post-imgs.is-two { grid-template-columns: 1fr 1fr; } .wapp-post-imgs.is-many { grid-template-columns: repeat(3, 1fr); } .wapp-post-imgs img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--wk-fill); display: block; } .wapp-post-imgs.is-two img, .wapp-post-imgs.is-many img { aspect-ratio: 1 / 1; } /* ══════════════════════════════════════════════════════════════════ v=544 全站巡检修复：字阶 15→16、命中区补 36（轮播点/分页点/卡内小按钮） ══════════════════════════════════════════════════════════════════ */ .wapp-tcard .wapp-tcard-p { font-size:13px !important; line-height:15px !important; } /* 轮播点：视觉 6px，命中区扩到 36 */ /* 卡内 28 高按钮：视觉不变，命中区 36 */ .wk-btn--sm { position: relative; } .wk-btn--sm::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 36px; transform: translateY(-50%); } /* 互动小按钮（赞/回复/举报）命中区 36 */ .wapp-pact { position: relative; } .wapp-pact::after { content: ''; position: absolute; inset: -8px -6px; } .wapp-order .wapp-price b { font-size:13px !important; } /* v=546 字阶收口 2：频道 tab 15→16、主按钮 15→16（全站只剩 9 档） */ .wapp-chan { font-size:13px !important; } .wk-btn--sm { font-size:12px !important; } /* v=547 服务详情购买条按钮 15→16（v526 的 .wapp-buybar .wk-btn 权重更高） */ /* ══════════════════════════════════════════════════════════════════ v=548 有底栏的页面统一留出底部安全距离（原来只有首页有 96，我的/交易行末项被栏压住） ══════════════════════════════════════════════════════════════════ */ .wk-page--tabbar .wapp-body { padding-bottom: calc(66px + 24px + env(safe-area-inset-bottom, 0px)) !important; } .wk-page--tabbar .wapp-body > *:last-child { margin-bottom: 0 !important; } /* ══════════════════════════════════════════════════════════════════ v=549 新增 赏金大厅 / 活动中心（补 v300 已有、v400 缺的两块） ══════════════════════════════════════════════════════════════════ */ .wapp-bintro { font-size:11px; line-height:14px; color: var(--wk-ink-3); background: var(--wk-fill); border-radius: 8px; padding: 8px 10px; margin: 0 0 12px; } .wapp-blist { display: flex; flex-direction: column; gap: 8px; } .wapp-bcard { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; border: 0; padding: 12px; } .wapp-bcard-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .wapp-bcard-hd b { font-size:14px; line-height:19px; font-weight: 600; color: var(--wk-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-bcard-desc { font-size:12px; line-height:17px; color: var(--wk-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wapp-bcard-ft { display: flex; align-items: baseline; gap: 8px; } .wapp-bcard-amt { font-size:13px; line-height:15px; font-weight: 700; color: var(--wk-ink); } .wapp-bcard-ft em { font-style: normal; font-size:10px; color: var(--wk-ink-3); } .wapp-bcard-ft i { margin-left: auto; font-style: normal; font-size:10px; color: var(--wk-ink-3); } .wapp-bmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size:10px; line-height:14px; color: var(--wk-ink-3); margin: 0 0 12px; } .wapp-bamt { display: flex; align-items: baseline; gap: 4px; margin: 0 0 12px; } .wapp-bamt i { font-style: normal; font-size:13px; color: var(--wk-ink); } .wapp-bamt b { font-size:18px; line-height:22px; font-weight: 700; color: var(--wk-ink); } .wapp-bamt em { font-style: normal; font-size:10px; color: var(--wk-ink-3); margin-left: 6px; } .wapp-acard { display: flex; gap: 10px; width: 100%; text-align: left; border: 0; padding: 10px; } .wapp-acard-m { flex: none; width: 96px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--wk-fill); display: flex; align-items: center; justify-content: center; color: var(--wk-ink-3); } .wapp-acard-m img { width: 100%; height: 100%; object-fit: cover; display: block; } .wapp-acard-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .wapp-acard-hd { display: flex; align-items: center; gap: 8px; } .wapp-acard-hd b { font-size:13px; line-height:15px; font-weight: 600; color: var(--wk-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-acard-sub { font-size:11px; line-height:15px; color: var(--wk-ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wapp-acard-ft { display: flex; align-items: center; gap: 8px; font-size:10px; color: var(--wk-ink-3); } .wapp-acard-ft i { font-style: normal; } .wapp-acover { border-radius: 8px; overflow: hidden; margin: 0 0 12px; background: var(--wk-fill); } .wapp-acover img { width: 100%; display: block; } .wapp-areward { font-size:12px; line-height:15px; color: var(--wk-ink-2); background: var(--wk-fill); border-radius: 8px; padding: 8px 10px; margin: 0 0 12px; } .wapp-cbar-acts { display: flex; gap: 8px; } /* v=550 好友页（搜索 + 待处理 + 好友列表） */ .wapp-fsearch { display: flex; gap: 8px; margin: 0 0 12px; } .wapp-fsearch .wapp-input { flex: 1 1 auto; height: 36px; } .wapp-flist { display: flex; flex-direction: column; gap: 0; } .wapp-frow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--wk-line); } .wapp-frow:last-child { border-bottom: 0; } .wapp-frow-av { flex: none; } .wapp-frow-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .wapp-frow-b b { font-size:13px; line-height:15px; font-weight: 600; color: var(--wk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-frow-b em { font-style: normal; font-size:10px; line-height:14px; color: var(--wk-ink-3); } .wapp-fr-acts { flex: none; display: flex; gap: 6px; } /* ===== v=555 通用列表/表单/看板（补齐页面用） ===== */ .wapp-li-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .wapp-li-r { flex: none; display: flex; align-items: center; gap: 6px } .wapp-li-after { font-style: normal; font-size:10px; color: var(--wk-ink-3); } .wapp-li-r b.up { color: var(--wk-ok); font-size:13px; } .wapp-li-r b.down { color: var(--wk-danger); font-size:13px; } .wapp-kpis { display: flex; gap: 12px; } .wapp-kpi { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; } .wapp-kpi b { font-size:16px; line-height:21px; font-weight: 700; color: var(--wk-ink); } .wapp-kpi span { font-size:10px; line-height:14px; color: var(--wk-ink-3); } .wapp-tip { margin: 8px 0 0; font-size:11px; line-height:17px; color: var(--wk-ink-3); } .wapp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .wapp-field > span { font-size:11px; line-height:14px; color: var(--wk-ink-2); } .wapp-credit-hd { display: flex; align-items: baseline; gap: 6px; } .wapp-credit-hd b { font-size:18px; line-height:31px; font-weight: 700; color: var(--wk-ink); } .wapp-credit-hd span { font-size:11px; color: var(--wk-ink-3); } .wapp-credit-hd i { margin-left: auto; font-style: normal; font-size:11px; padding: 2px 8px; border-radius: 4px; } .wapp-credit-hd i.ok { color: var(--wk-ok); background: rgba(22,163,74,.08); } .wapp-credit-hd i.bad { color: var(--wk-danger); background: rgba(255,48,78,.08); } .wapp-credit-bar { position: relative; height: 6px; border-radius: 3px; background: var(--wk-bg-2); margin-top: 12px; overflow: hidden; } .wapp-credit-bar i { display: block; height: 100%; border-radius: 3px; background: var(--wk-ink); } .wapp-credit-bar u { position: absolute; top: -2px; width: 2px; height: 10px; background: var(--wk-danger); } .wapp-tk-meta { margin: 4px 0 0; font-size:10px; line-height:14px; color: var(--wk-ink-3); } .wapp-tk-body { margin-top: 10px; font-size:13px; line-height:17px; color: var(--wk-ink); white-space: pre-wrap; } .wapp-tk-res { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--wk-bg-2); } .wapp-tk-res b { display: block; font-size:11px; color: var(--wk-ink-2); margin-bottom: 4px; } .wapp-tk-res p { margin: 0; font-size:12px; line-height:15px; color: var(--wk-ink); } .wapp-tk-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .wapp-form { display: flex; flex-direction: column; } .wapp-qa { padding: 12px 0; border-bottom: 1px solid var(--wk-line); } .wapp-qa:last-child { border-bottom: 0; } .wapp-qa b { display: block; font-size:13px; line-height:15px; font-weight: 600; } .wapp-qa p { margin: 6px 0 0; font-size:12px; line-height:19px; color: var(--wk-ink-2); } .wapp-qa-at { display: block; margin-top: 4px; font-style: normal; font-size:10px; color: var(--wk-ink-3); } .wapp-help-body { font-size:13px; line-height:20px; color: var(--wk-ink); } .wapp-hot { font-style: normal; font-size:10px; color: var(--wk-danger); border: 1px solid var(--wk-danger); border-radius: 3px; padding: 0 3px; margin-left: 4px; } .wapp-author { display: flex; align-items: center; gap: 10px; } .wapp-rev { padding: 10px 0; border-bottom: 1px solid var(--wk-line); } .wapp-rev:last-child { border-bottom: 0; } .wapp-rev-hd { display: flex; align-items: center; gap: 6px; } .wapp-rev-hd b { font-size:12px; font-weight: 600; } .wapp-rev-hd i { font-style: normal; font-size:10px; color: #F59E0B; letter-spacing: 1px; } .wapp-rev-hd em { margin-left: auto; font-style: normal; font-size:10px; color: var(--wk-ink-3); } .wapp-rev p { margin: 6px 0 0; font-size:12px; line-height:15px; color: var(--wk-ink); } .wapp-rev-empty { padding: 16px 0; text-align: center; font-size:11px; color: var(--wk-ink-3); } /* v=559 游戏主页 + 精选 */ .wapp-ghero { position: relative; overflow: hidden; padding: 0; } .wapp-ghero-bg { width: 100%; height: 108px; object-fit: cover; display: block; } .wapp-ghero-b { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } .wapp-ghero-ico { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; } .wapp-ghero-b b { font-size:13px; line-height:17px; font-weight: 700; color: var(--wk-ink); } .wapp-ghero-b em { font-style: normal; font-size:10px; color: var(--wk-ink-3); margin-left: auto; } .wapp-hotcard { width: 168px } .wapp-hotcard em { display: block; margin-top: 4px } /* v=561 资料库 */ .wapp-gdbgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .wapp-gdbcell { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-radius: 8px; background: var(--wk-bg-2); border: 0; text-align: center; } .wapp-gdbcell b { font-size:12px; line-height:14px; font-weight: 600; color: var(--wk-ink); } .wapp-gdbcell em { font-style: normal; font-size:10px; color: var(--wk-ink-3); } .wapp-gdbico { width: 34px; height: 34px; border-radius:8px; object-fit: contain; background: var(--wk-bg-2); flex: none; } .wapp-gdbp { font-size:12px; font-weight: 600; color: var(--wk-ink); } .wapp-li-r em.up { color: var(--wk-ok); } .wapp-li-r em.down { color: var(--wk-danger); } .wapp-more { padding: 12px; } /* ══════════════════════════════════════════════════════════════════ v=568 密度改造（用户：小而精致、信息密度要大） 做法：全站字号/行高整体降一档（22→20、20→18、18→16、16→14）， 顶栏/底栏图标与点击区各收 2–4px，卡片内边距 12→10。 ══════════════════════════════════════════════════════════════════ */ /* 顶栏：高 42、tab 14 / 选中 17、图标 20、点击区 40 */ /* 底栏：高 60、图标 22、标签 10、中间按钮 40×36 */ /* 卡片与面板内边距收一档：14/12/10 → 12/10/8，让一屏多看一两条 */ .wapp-panel, .wapp-card, .wapp-sec { padding-left: 10px; padding-right: 10px; } .wapp-list-row, .wapp-li { padding-top: 8px; padding-bottom: 8px; } .wapp-sec-hd { padding-top: 10px; padding-bottom: 8px; } /* v=569 密度第二档：轮播压扁、区块间距 16→12、宫格与标题更紧 */ .wapp-sec { margin-top: 12px !important; } .wapp-sec-hd { padding: 0 0 6px !important; } /* v=570 密度第三档：轮播再压到 3.1:1、卡圆角 12→10、卡内边距收 2px */ .wapp-card, .wapp-panel, .wapp-row, .wapp-li, .wapp-taker { border-radius: 10px !important; } .wapp-card { padding: 10px !important; } /* v=571 顶栏/底栏再收一档（用户：小而精致）· 顶栏 40、tab 13/16、图标 18、点击区 36；底栏 56、图标 20 */ /* v=572 底栏覆盖要打同级选择器（.wk-tabbar__item .wapp-tabi 权重 0,2,0 + !important）*/ /* v=574 密度改造副作用：.wapp-card-hd 固定 20px 高把「昵称+时间」两行裁掉（社区流 clip 36 处） */ .wapp-card-hd { height: auto !important; min-height: 18px !important; align-items: flex-start; } /* v=575 社区流作者行：.wapp-feed .wapp-card-hd 有一条 (0,2,0)!important 的 height:20px， 把「昵称 + 时间」两行裁掉 —— 用同级选择器覆盖 */ .wapp-feed .wapp-card-hd { height: auto !important; min-height: 20px !important; align-items: flex-start !important; } /* v=576 社区流昵称被 max-width:40% 截成「用..」 —— 放宽到自适应，只留省略号兜底 */ .wapp-feed .wapp-card-by, .wapp-feed .wapp-card-tm { max-width: none !important; } .wapp-feed .wapp-card-hd b { max-width: 62% !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* v=578 各页面收尾：价格/标题/KPI 数字再降一档，底栏 56→54 */ .wapp-price b, .wapp-task-exp b, .wapp-post-h, .wapp-sup-hero__t { font-size:14px !important; line-height:20px; } .wapp-price--xl b, .wapp-tr-rate, .wapp-wal-main b, .wapp-cs-kpi b, .wapp-econ-cell b, .wapp-login-h { font-size:16px !important; line-height:22px; } .wapp-price--xl b { line-height:22px !important; } /* v=579 底栏精细化：52 高、图标文字间距 2、中间按钮 36×36 正形居中、加号 16 */ /* v=580 中间加号居中：v=519 留了 margin-top:-12 的凸出补偿，现在不凸出了必须归零 */ /* v=581 中间加号真正居中：容器撑满栏高 + align-items:center（底栏是 flex-end，光 justify 不生效）*/ /* v=582 加号归位：v=520 为「凸出」把它设成 position:absolute/top:0，现在要静态居中 */ /* v=583 加号用绝对居中兜底：容器自身盒高受底栏 padding 影响，translate 居中不受干扰 */ /* v=584 次要文字对比度：#8C9196/#8C9198 在白底只有 3.18:1（10–13px 太小看不清） 统一到 var(--wk-ink-3)（白底 5.0、页面底 4.7、填充底 4.46），层级靠字号/字重区分 */ /* v=585 深色档收口：卡片与底几乎同色、描边看不见、底栏顶线竟是近白 */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="dark"] .wk-tabbar { border-top-color: #2b2e34 !important; } html[data-theme="dark"] .wk-nav { border-bottom-color: #2b2e34 !important; } /* v=586 深色档中间加号：黑底黑圆看不见 → 白底深字（主操作） */ /* v=587 ①有底栏页面底部被压 52px ②深色卡片描边 ③深色滚动条 ④接单图标换对勾 */ .wapp-frame:has(.wk-tabbar) { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } html[data-theme="dark"] .wapp-card, html[data-theme="dark"] .wapp-panel { border-color: var(--wk-ink)73e !important; } html[data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3e45; border-radius: 3px; } /* v=588 游戏入口只有 2–4 个时右侧大片空白 → 均分铺满（多游戏仍横滑 68 宽） */ .wapp-home-games .wapp-gstrip.is-fill { display: grid; overflow: visible; gap: 8px} .wapp-home-games .wapp-gstrip.is-fill .wapp-gitem { width: auto; } /* v=589 裂图降级：不显示浏览器默认破图标，改成与卡片同色的占位块 */ img.wapp-img-broken { background: var(--wk-fill) !important; object-fit: cover; } img.wapp-img-broken::after { content: ""; } /* ══════════ v5 设计语言（全站重设，覆盖在旧规则之上）══════════ */ :root, [data-theme="light"] { --wk-bg:#F5F6F7; --wk-card:#FFFFFF; --wk-fill:#F2F3F5; --wk-ink:#141821; --wk-ink-2:#4a5266; --wk-ink-3:#767f92; --wk-ink-4:#c3c9d6; --wk-accent:var(--wk-ink); --wk-on-accent:#FFFFFF; --v5-r:10px; --v5-r-ctl:8px; --v5-pad:12px } /* 容器与骨架 */ .wapp-frame{ background:var(--wk-bg); } .wapp-body{ padding:0 var(--v5-pad) 24px; } .wapp-panel,.wapp-card{ background:var(--wk-card); border:1px solid var(--wk-line); border-radius:var(--v5-r); box-shadow:none; } .wapp-panel-pad{ padding:var(--v5-pad); } .wapp-sec-hd,.wapp-sechd{ padding:0; margin:0 0 8px; font:600 14px/20px var(--wk-font); color:var(--wk-ink); } .wapp-sec-hd > b,.wapp-sechd > b{ font-size:13px; font-weight:600; } .wapp-sec-hd .wk-btn--text,.wapp-sechd .wk-btn--text{ font-size:11px; color:var(--wk-ink-3); } /* 顶栏 */ /* 列表行 */ .wk-cell,.wapp-li{ min-height:48px; padding:0 var(--v5-pad); background:var(--wk-card); border-bottom:1px solid var(--wk-line); font-size:13px; } .wk-cell:last-child,.wapp-li:last-child{ border-bottom:0; } .wk-cell__bd,.wapp-li-t{ font-size:13px; line-height:18px; color:var(--wk-ink); } .wk-cell__ft,.wapp-li-s{ font-size:12px; line-height:16px; color:var(--wk-ink-2); } .wapp-li-b{ font-size:12px; line-height:15px; color:var(--wk-ink-3); } /* 表单 */ .wk-input,.wapp-input,.wk-field input,.wk-field textarea{ height:38px; border-radius:var(--v5-r-ctl); background:var(--wk-fill); border:1px solid transparent; font-size:13px; padding:0 10px; } .wk-field textarea{ height:auto; padding:10px; } .wk-field input:focus,.wk-field textarea:focus,.wapp-input:focus{ background:var(--wk-card); border-color:var(--wk-ink); } .wk-field__label,.wapp-field > label{ font-size:11px; font-weight:500; color:var(--wk-ink-3); margin-bottom:6px; } .wk-field__hint{ font-size:10px; color:var(--wk-ink-3); } /* 按钮：主=黑实心，次=浅灰，幽灵=描边，文字=纯文字 */ .wk-btn { font:600 14px/1 var(--wk-font); border:0 } .wk-btn--primary:active{ opacity:.82; } .wk-btn--ghost { color:var(--wk-ink) } .wk-btn--text{ background:transparent; color:var(--wk-ink-2); padding:0 4px; height:auto; font-weight:500; } .wk-btn--sm { border-radius: 8px } .wk-btn--block{ width:100%; } .wk-btn[disabled]{ opacity:.4; } /* 标签 / 分段 / 徽标 */ .wk-chip{ border-radius:12px; background:var(--wk-fill); color:var(--wk-ink-2); border:0} .wk-chip--sm{ height:22px; font-size:10px; padding:0 8px; } .wk-seg {} .wk-seg__item { color:var(--wk-ink-2) } .wk-seg__item.is-on { font-weight:600 } .wk-badge{ height:16px; padding:0 4px; border-radius:4px; font-size:10px; font-weight:600; line-height:14px; } /* 价格 */ .wapp-price{ font-size:10px; color:var(--wk-ink); } .wapp-price b{ font:700 16px/20px var(--wk-font); } .wapp-price i{ font-size:10px; font-style:normal; color:var(--wk-ink-3); } /* 图片统一 */ .wapp-panel img,.wapp-card img,.wapp-li img{ border-radius:8px; } /* ══ v5 第二轮：首页模块 / 卡片 / 横滑 ══ */ .wapp-sec{} .wapp-sec-hd a,.wapp-sec-hd .wapp-more { font-size:11px; font-weight:500 } .wapp-hpscroll::-webkit-scrollbar{ display:none; } .wapp-hpc{ width:132px; flex:0 0 132px; background:transparent; border:0; padding:0; text-align:left; } .wapp-hpc-m{ display:block; width:132px; height:88px; border-radius:8px; overflow:hidden; background:var(--wk-fill); } .wapp-hpc-m img{ width:100%; height:100%; object-fit:cover; display:block; } .wapp-hpc-t{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; height:36px; margin-top:6px; font-size:12px; line-height:16px; color:var(--wk-ink); } .wapp-hpc-f{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin-top:4px; } .wapp-hpc-f b{ font: 700 15px/20px var(--wk-font) } .wapp-hpc-f em{ font-style:normal; font-size:10px; color:var(--wk-ink-3); max-width:66px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wapp-tcard-go,.wapp-ccard-go{ height:28px !important; min-height:28px !important; font-size:11px !important; padding:0 10px !important; border-radius:8px !important; } .wapp-q{ flex:1; gap:6px; font-size:10px; color:var(--wk-ink-2); } html[data-theme="dark"] .wapp-hpc-ph{ background:linear-gradient(135deg,#22262B,#1B1E22); } html[data-theme="dark"] .wapp-hpc-ph b{ color:#3A4048; } .wapp-home-games .wapp-gstrip.is-fill{ margin:0; padding:0; } .wapp-home-games .wapp-gstrip.is-fill .wapp-gico{ width:56px; height:56px; border-radius:14px; } .wapp-home-games .wapp-gstrip.is-fill .wapp-gitem em{ max-width:none; font-size:11px; line-height:14px; margin-top:8px; } .wapp-tcard{ align-items:stretch; } .wapp-tcard-go{ align-self:flex-end; } /* ══ v5 第四轮：大厅卡等高 / 占位 / 计费单位弱化 ══ */ .wapp-pcard{ display:flex; flex-direction:column; background:var(--wk-card); border:1px solid var(--wk-line); border-radius:var(--v5-r); overflow:hidden; height:100%; } .wapp-pcard-media{ position:relative; background:var(--wk-fill); } .wapp-pcard-media img{ width:100%; display:block; } .wapp-pcard-body{ display:flex; flex-direction:column; flex:1; padding:10px 10px 12px; } .wapp-pcard-t{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; height:36px; font-size:12px; line-height:16px; font-weight:600; color:var(--wk-ink); } .wapp-pcard-s{ margin-top:4px; font-size:10px; line-height:14px; color:var(--wk-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wapp-pcard-ft{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin-top:auto; padding-top:8px; } .wapp-pcard-unit{ font-size:10px; color:var(--wk-ink-3); } .wapp-pgrid{} html[data-theme="dark"] .wapp-pcard-ph{ background:linear-gradient(135deg,#22262B,#1B1E22); } html[data-theme="dark"] .wapp-pcard-ph b{ color:#3A4048; } .wapp-topicbar::-webkit-scrollbar{ display:none; } .wapp-topicbar .wapp-chip{ flex:none; height:24px; font-size:10px; padding:0 9px; border-radius:12px; } .wapp-feedbar{ display:flex; justify-content:flex-end} .wapp-feedbar__sort{ font-size:11px; color:var(--wk-ink-3); background:none; border:0; padding:0 2px; } .wapp-feedbar__sort.is-on{ color:var(--wk-ink); font-weight:600; } .wapp-card-media img,.wapp-card-media video{ max-height:240px; object-fit:cover; } .wapp-card-media{ max-height:240px; overflow:hidden; } .wapp-card-stats > span:empty,.wapp-card-stats b:empty{ display:none; } /* ══ v5 第七轮：社区精选横滑（原来 6 张硬塞一行被裁）══ */ .wapp-hotstrip{ display:flex; gap:8px; overflow-x:auto; padding:0 0 2px; scrollbar-width:none; } .wapp-hotstrip::-webkit-scrollbar{ display:none; } .wapp-hotcard{ flex:0 0 62%; display:flex; flex-direction:column; gap:6px; padding:10px; border-radius:var(--v5-r); background:var(--wk-card); border:1px solid var(--wk-line); text-align:left; } .wapp-hotcard-t{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; line-height:16px; font-weight:600; color:var(--wk-ink); } .wapp-hotcard em{ font-style:normal; font-size:10px; color:var(--wk-ink-3); } /* ══ v5.1 对齐语音服务器的设计系统（品牌蓝 + 更大圆角 + 44 控件）══ */ :root,[data-theme="light"] { --wk-bg:#f6f7fb; --wk-card:#FFFFFF; --wk-line:#e2e6ef; --wk-fill:#eef1f7; --wk-ink:#141821; --wk-on-accent:#FFFFFF; --wk-ok:#16a34a; --wk-warn:#f5a524; --wk-danger:#e5484d; --v5-r:14px; --v5-r-ctl:10px; --v5-pad:16px } :root[data-theme="dark"] { --wk-on-accent:#0d1017; --wk-ok:#4ade80; --wk-warn:#fbbf24; --wk-danger:#f87171 } /* 控件尺寸向语音服务器靠：按钮 36、输入 44、分段 32、卡片圆角 14 */ .wk-btn--primary{ background:var(--wk-brand); color:#fff; } .wk-btn--secondary{ background:var(--wk-fill); color:var(--wk-ink); } .wk-btn--ghost{ border:1px solid var(--wk-line); background:var(--wk-card); } .wk-input,.wapp-input,.wk-field input{ height:44px; border-radius:var(--v5-r-ctl); background:var(--wk-card); border:1px solid var(--wk-line); } .wk-seg{ background: var(--wk-fill) } .wk-seg__item{} .wk-seg__item.is-on{ background:var(--wk-card); color:var(--wk-brand); box-shadow:0 0 0 1px var(--wk-line) inset; } .wk-chip.is-on,.wk-chip--on{ background:var(--wk-brand); color:#fff; }.wapp-panel .wapp-card .wapp-pcard .wapp-home-games { border-radius:var(--v5-r); border-color:var(--wk-line); } .wapp-price b,.wapp-hpc-f b{ color:var(--wk-brand); } .wapp-sec-hd a,.wapp-sec-hd .wapp-more{ color:var(--wk-ink-3); } /* v=603 Banner 改品牌蓝 + 底栏加号纳入品牌色 + 主按钮统一 */ html[data-theme="dark"] .wk-tabbar .wapp-tabplus i{ background:var(--wk-brand) !important; color:#0d1017 !important; } .wapp-tcard-go{ background:var(--wk-brand) !important; color:#fff !important; border:0 !important; } /* v=604 价格统一回主字黑色（蓝色只服务交互：按钮/选中/链接）*/ .wapp-price b,.wapp-hpc-f b,.wapp-pcard-ft .wapp-price b{ color:var(--wk-ink) !important; } /* v=605 Banner 上的 CTA 统一为「白底 + 品牌蓝字」 */ /* ══════════ v6 页面模板层（所有页面统一走这套骨架）══════════ */ .p-head { display:flex; align-items:flex-end; justify-content:space-between; gap:10px } .p-head h1{ margin: 0; font: 700 20px/26px var(--wk-font); color: var(--wk-ink) } .p-head .p-sub { margin-top:2px; color:var(--wk-ink-3) } .p-head .p-acts{ display:flex; align-items:center; gap:8px; } .p-sec { display:flex; align-items:center; justify-content:space-between; padding:0 var(--v5-pad) } .p-sec h2{ margin:0; font:600 14px/20px var(--wk-font); color:var(--wk-ink); } .p-sec .p-more{ font-size:11px; color:var(--wk-ink-3); } .p-card{ background:var(--wk-card); border:1px solid var(--wk-line); border-radius:var(--v5-r); overflow:hidden; } .p-card + .p-card{ margin-top:10px; } .p-body{ padding:0 var(--v5-pad) 24px; } .p-row { display:flex; align-items:center; background:var(--wk-card); border-bottom:1px solid var(--wk-line) } .p-row:last-child{ border-bottom:0; } .p-row:active{ background:var(--wk-fill); } .p-row__ico { display:grid; place-items:center; background:var(--wk-fill); color:var(--wk-ink-2); flex:none } .p-row__bd{ flex:1; min-width:0; } .p-row__t { color:var(--wk-ink); font-weight:500 } .p-row__s { margin-top:2px; color:var(--wk-ink-3) } .p-row__ft { display:flex; align-items:center; gap:6px; color:var(--wk-ink-2); flex:none } .p-row__chev { color:var(--wk-ink-4); flex:none } .p-tabs{ display:flex; gap:18px; padding:0 var(--v5-pad); border-bottom:1px solid var(--wk-line); background:var(--wk-card); } .p-tabs button { position:relative; color:var(--wk-ink-3); background:none; border:0 } .p-tabs button.is-on{ color:var(--wk-ink); font-weight:600; } .p-tabs button.is-on::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:4px; background:var(--wk-brand); } .p-cta .p-price{ flex:1; font-size:10px; color:var(--wk-ink-3); } .p-cta .p-price b{ font:700 18px/22px var(--wk-font); color:var(--wk-ink); margin-left:2px; } .p-stat{ display:grid; grid-template-columns:repeat(3,1fr); text-align:center; padding:14px 0; } .p-stat b{ display:block; font:700 18px/24px var(--wk-font); color:var(--wk-ink); } .p-stat span{ font-size:10px; color:var(--wk-ink-3); } .p-badge{ display:inline-flex; align-items:center; height:18px; padding:0 6px; border-radius:5px; font-size:10px; font-weight:600; background:var(--wk-fill); color:var(--wk-ink-2); } /* 旧组件映射到新模板 */ .wapp-panel{ background:var(--wk-card); border:1px solid var(--wk-line); border-radius:var(--v5-r); overflow:hidden; } .wapp-li { display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--wk-line) } .wapp-li:last-child{ border-bottom:0; } .wapp-li-b b { font-weight:500; color:var(--wk-ink) } .wapp-li-b em { margin-top:2px; line-height:14px; color:var(--wk-ink-3); font-style:normal } .wapp-li-r{ font-size:12px; color:var(--wk-ink-2); } .wapp-arrow{ width:16px; height:16px; color:var(--wk-ink-4); } .p-filter::-webkit-scrollbar{ display:none; } .p-filter .wk-chip{ flex:none; } .wapp-panel:has(.p-row){ padding:0; } .wapp-panel .p-row:first-child{ border-top-left-radius:var(--v5-r); border-top-right-radius:var(--v5-r); } .wapp-panel .p-row:last-child{ border-bottom-left-radius:var(--v5-r); border-bottom-right-radius:var(--v5-r); } /* v6 订单列表容器 */ .p-list{ padding:12px var(--v5-pad) 24px; display:flex; flex-direction:column; gap:10px; } .p-list > .wapp-panel{ margin:0; } .p-list .wapp-ocard, .p-list .wapp-ord{ background:var(--wk-card); border:1px solid var(--wk-line); border-radius:var(--v5-r); } /* v6 顶栏去重：页面已有大标题时隐藏顶栏标题文字（保留返回与图标） */ /* v6 小黑盒发现页：搜索发现 + 热榜（p10 实测规格） */ .x-disc{ padding:16px var(--v5-pad) 0; } .x-disc-hd{ display:flex; align-items:center; justify-content:space-between; height:24px; } .x-disc-hd h2{ margin:0; font:700 16px/24px var(--wk-font); color:var(--wk-ink); } .x-refresh{ border:0; background:none; font-size:11px; color:var(--wk-ink-3); } .x-finds { display:grid; column-gap:20px; row-gap:12px; margin-top:12px } .x-find{ border:0; background:none; padding:0; text-align:left; font-size:13px; line-height:18px; color:var(--wk-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .x-rank{ margin-top:24px; } .x-rank-tabs { display:flex; gap:20px; padding:0 var(--v5-pad); align-items:center; border-bottom:1px solid var(--wk-line) } .x-rank-tabs button{ border:0; background:none; padding:0; font-size:14px; color:var(--wk-ink-3); } .x-rank-tabs button.is-on{ font-weight:700; color:var(--wk-ink); } .x-rank-tabs button.is-on::after{ content:''; } .x-rank-list{ padding:4px var(--v5-pad) 0; } .x-rank-row{ display:flex; align-items:center; gap:10px; width:100%; border:0; background:none; padding:9px 0; text-align:left; } .x-no{ width:20px; flex:none; text-align:right; font-size:13px; color:var(--wk-ink-3); } .x-no.n1{ font-size:14px; font-weight:700; color:#F5A623; } .x-no.n2{ font-size:14px; font-weight:700; color:#D0021B; } .x-no.n3{ font-size:14px; font-weight:700; color:#4A90E2; } .x-rank-ico { flex:none; border-radius:4px; background:var(--wk-fill); display:grid; place-items:center; color:var(--wk-ink-3) } .x-rank-ico i,.x-rank-ico svg{ width:18px; height:18px; } .x-rank-bd{ flex:1; min-width:0; } .x-rank-bd b{ display:block; font-size:14px; font-weight:400; line-height:18px; color:var(--wk-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .x-rank-bd em{ display:block; margin-top:1px; font-size:10px; font-style:normal; line-height:14px; color:var(--wk-ink-3); } html[data-theme="dark"] .x-find, html[data-theme="dark"] .x-rank-bd b{ color:var(--wk-ink); } .x-rank-ico{ overflow:hidden; } .x-rank-ico img{ width:100%; height:100%; object-fit:cover; display:block; } .x-finds{ grid-template-columns:repeat(2,minmax(0,1fr)); } /* 发现页：搜索框不抢戏（小黑盒发现页无独立搜索按钮） */ .wapp-searchbar .wk-btn{ display:none; } .wapp-searchbar{ padding:8px var(--v5-pad); } /* ══ v=612 整体缩一档（对齐 wakevoice 尺度：控件 40/42、正文 13、图标 18、卡片 r12）══ */ :root,[data-theme="light"],:root[data-theme="dark"]{ --v5-pad:14px; --v5-r:12px; --v5-r-ctl:8px; } .p-head{ padding:12px var(--v5-pad) 6px; } .p-head h1{ font-size:18px; line-height:24px; } .p-head .p-sub{ font-size:11px; line-height:15px; } .p-sec{ margin:12px 0 6px; } .p-sec h2{ font-size:13px; line-height:18px; } .p-row{ min-height:50px; padding:7px var(--v5-pad); gap:9px; } .p-row__ico{ width:30px; height:30px; border-radius:8px; } .p-row__ico i,.p-row__ico svg{ width:16px; height:16px; } .p-row__t{ font-size:13px; line-height:18px; } .p-row__s{ font-size:11px; line-height:15px; } .p-row__ft{ font-size:12px; } .p-row__chev{ width:14px; height:14px; } .p-tabs button{ font-size:13px; padding:9px 0; } .p-cta .p-price b{ font-size:16px; line-height:20px; } .wapp-li{ min-height:48px; padding:7px var(--v5-pad); } .wapp-li-b b{ font-size:13px; line-height:18px; } .wapp-li-b em{ font-size:11px; } .wk-btn{} .wk-btn--sm{ height:28px} .wk-input{} .xi{ width:18px; height:18px; } .wapp-card-stats .wapp-xhh, .wapp-card-stats i, .wapp-card-stats svg{ width:16px; height:16px; } .wk-state__ic .xi{ width:22px; height:22px; } .x-rank-tabs{ height:36px; } .x-rank-ico{ width:30px; height:30px; } /* v=613 局部再收：游戏瓦 48、头像 40、中间加号 32、服务图 16:10 */ .wapp-tcard-av, .wapp-tcard-av .wk-avatar{ width:40px; height:40px; } .wapp-pcard-media{ aspect-ratio:16 / 10; max-height:120px; } .wapp-home-games .wapp-gstrip.is-fill{ grid-template-columns:repeat(auto-fit,minmax(0,1fr)) !important; } .wapp-home-games .wapp-gico{ width:32px !important; height:32px !important; border-radius:8px !important; flex:none !important; } /* ══ v=615 控件全站归一（按钮 32/28/40、chip 24、分段 28、输入 40、圆角 4/8/12）══ */ .wk-btn{ height:32px !important; min-height:32px !important; font-size:13px !important; border-radius:8px !important; padding:0 14px !important; } .wk-btn--sm, .wk-btn--xs{ height:28px !important; min-height:28px !important; font-size:12px !important; padding:0 10px !important; } .wk-chip{ height:24px !important; font-size:12px !important; padding:0 10px !important; } .wk-seg{ height:32px !important; padding:3px !important; border-radius:8px !important; } .wk-seg__item{ height:26px !important; font-size:12px !important; border-radius:6px !important; } .wk-input{ height:40px !important; font-size:13px !important; border-radius:8px !important; } .wapp-pcard-media b, .wapp-pcard-media span, .wapp-card-media b{ font-size:20px !important; } /* v=615 Banner 收高：3.2:1 → 3.6:1，主文案 17、副文案 11、CTA 26 高 */ @media (min-width:900px){ .wapp-banner{ aspect-ratio:4 / 1 !important; } } /* ══ v=616 控件 min-height 兜底（旧规则带 min-height:36 压住 height）══ */ #view .wk-chip, .p-filter .wk-chip, .wapp-frame .wk-chip{ height:24px; min-height:24px; line-height:22px; padding:0 10px; font-size:12px; } #view .wapp-chan{ height:28px !important; min-height:28px !important; padding:0 10px !important; font-size:12px !important; border-radius:14px !important; } #view .wapp-feedbar__sort{ height:28px !important; min-height:28px !important; font-size:12px !important; } #view .wk-btn{ min-height:32px !important; } #view .wk-btn--sm{ min-height:28px !important; } #view .wk-seg__item{ min-height:26px !important; } .wapp-tabi{ font-size:10px !important; } .wapp-gitem .wapp-gico{ width:36px !important; height:36px !important; border-radius:10px !important; } /* v=618 同级标题统一深色 600；交易行主数值收一档 */ .wapp-sec-hd h2, .wapp-frame .wapp-sec-hd h2, .wapp-tr-quote-t, .wapp-tr-card-h{ color:var(--wk-ink); font-weight:600; font-size:13px; } .wapp-tr-quote-v, .wapp-tr-quote b{ font-size:22px !important; line-height:26px !important; } .wapp-tr-quote-s{ font-size: 11px !important } /* ══ v=619 布局节奏统一（正文 3 行截断、区块上距 12、底部安全区、卡内边 14）══ */ .wapp-card-b{ -webkit-line-clamp:3 !important; line-height:17px !important; height:auto !important; max-height:51px !important; } .wapp-sec-hd, .wapp-sechd, .x-disc, .wapp-home-games{ margin-top:12px !important; } .wapp-card-body{ padding:10px 14px 0 !important; } #view:has(.p-head){ padding-top:0; } .wapp-frame.wapp-body, #view{ padding-bottom:calc(52px + 12px); } .wapp-flow, .wapp-cards, .p-list{ row-gap:10px; } /* v=620 区块上距真正压到 12（原 .wapp-me .wapp-sec-hd 带 !important 20px） */ #view .wapp-sec-hd:first-child, #view .wapp-sechd:first-child{ margin-top:0 !important; } /* v=621 底部安全区足量 + 头部浮层不贴边（我的页最后一条被底栏压住） */ /* ══ v=622 详情页语法：底部购买条不遮内容、规格条吃满、面板节奏统一 ══ */ #view:has(.wapp-buybar), .wk-page__body:has(.wapp-buybar){ padding-bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important; } .wapp-buybar{ height:56px !important; padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px)) !important; border-top:1px solid var(--wk-line) !important; background:var(--wk-card) !important; gap:10px !important; } .wapp-buybar .wk-btn{ height:36px !important; min-height:36px !important; font-size:14px !important; flex:1; } .wapp-seg-wrap, .wapp-seg-wrap .wk-seg{ width:100% !important; } .wapp-panel{ border-radius:12px !important; } .wapp-panel-pad{ padding:12px 14px !important; } .wapp-panel + .wapp-panel, .wapp-panel + .wapp-buybar-sp{ margin-top:10px !important; } .wapp-frame .wapp-sec-hd h2{ font-size:13px !important; } /* ══ v=623 表单与旧行组件统一（label 11、输入 40、行 50）══ */ .wk-field{ margin-top:10px !important; } .wk-field:first-child{ margin-top:0 !important; } .wk-field__label{ display:block; margin-bottom:5px !important; font-size:11px !important; line-height:15px !important; color:var(--wk-ink-3) !important; } .wk-textarea{ border-radius:8px !important; font-size:13px !important; padding:10px 12px !important; min-height:76px !important; } .wapp-row{ min-height:50px !important; } .wapp-row-t{ font-size:13px !important; line-height:18px !important; } .wapp-row-s{ font-size:11px !important; line-height:15px !important; } .wk-field .wk-chip{ margin:0 6px 6px 0 !important; } /* v=624 规格条真吃满（.wk-seg 不是 flex 容器，item flex:1 无效） */ .wapp-seg-wrap .wk-seg{ display:flex !important; width:100% !important; } /* v=625 修正选择器：.wapp-seg-wrap 与 .wk-seg 是同一个元素 */ .wapp-seg-wrap{ display:flex !important; width:100% !important; } .wapp-seg-wrap .wk-seg__item{ flex:1 1 0 !important; width:auto !important; min-width:0 !important; justify-content:center !important; } /* ══ v=626 帖子详情：压缩留白、评论紧凑、输入条不再压评论 ══ */ #view:has(.wapp-cbar){ padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)) !important; } .wapp-cbar{ height:52px !important; padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px)) !important; gap:8px !important; } .wapp-cbar .wk-input{ height:36px !important; font-size:13px !important; } .wapp-cmt-title{ margin:0 0 4px !important; font-size:13px !important; line-height:18px !important; } .wapp-cmt .wapp-cmt-list > *, .wapp-cmt > div > *{ padding-top:10px !important; padding-bottom:10px !important; } .wapp-panel-pad > .wapp-post-h{ margin:6px 0 4px !important; font-size:15px !important; line-height:21px !important; } .wapp-card-ft .wk-avatar { width: 20px; height: 20px; font-size:10px; } .wapp-card-hd, .wapp-card-body, .wapp-card-ft { padding-left: 12px; padding-right: 12px; } .wapp-card-hd, .wapp-card-body, .wapp-card-ft, .wapp-feed > .wapp-card .wapp-pgrid { padding-left: 0 !important; padding-right: 0 !important; } .wapp-card-ft .wapp-card-game { font-size:11px; color: var(--wk-ink-3); } .wapp-feed .wapp-card-ft { margin-top: 6px !important; } .wapp-card-ft { padding:10px 14px 0 !important; padding-top: 12px; display: flex; gap: 8px; min-height: 20px !important; align-items: center; margin-top: 8px; } .wapp-panel-pad .wapp-card-ft { padding:8px 0 0 !important; } .wapp-cmt-sub, .wapp-cmt .wapp-reply{ margin-top:6px !important; padding:6px 8px !important; border-radius:8px !important; } /* ══ v=627 聊天气泡 + 订单卡收口 ══ */ .wapp-msg-b{ max-width:74% !important; padding:8px 11px !important; border-radius:14px !important; font-size:13px !important; line-height:19px !important; } .wapp-msg.is-me .wapp-msg-b{ background:var(--wk-brand) !important; color:#fff !important; border-bottom-right-radius:5px !important; } .wapp-msg:not(.is-me) .wapp-msg-b{ border-bottom-left-radius:5px !important; } .wapp-msg-t{ font-size:10px !important; line-height:14px !important; } .wapp-order{ padding:10px 12px !important; border-radius:12px !important; } .wapp-order-note{ margin-top:6px !important; font-size:11px !important; line-height:15px !important; color:var(--wk-ink-3) !important; } .wapp-order-ft{ margin-top:8px !important; gap:8px !important; } .wapp-order-ft .wk-btn{ height:28px !important; min-height:28px !important; font-size:12px !important; } .wapp-order-title{ font-size:13px !important; line-height:18px !important; } .wapp-order-amt b{ font-size:16px !important; } /* ══ v=628 聊天气泡修正（自己的消息是 .wapp-msgrow.is-me 下的 .wapp-msg-b）══ */ .wapp-msgrow.is-me .wapp-msg-b{ background:var(--wk-brand) !important; color:#fff !important; border-bottom-right-radius:5px !important; } .wapp-msgrow.is-me .wapp-msg-b a, .wapp-msgrow.is-me .wapp-msg-b *{ color:#fff !important; } .wapp-msgrow:not(.is-me) .wapp-msg-b{ border-bottom-left-radius:5px !important; } .wapp-msgrow .wapp-msg-t{ color:var(--wk-ink-2) !important; } .wapp-msgrow.no-av .wk-avatar{ visibility:hidden !important; } /* ══════════════════════════════════════════════════════════════ v=629 视觉标准层（对齐 Vant 4 ★24.4k + shadcn/ui ★127k 的真实约定） 字体 10/12/14/16/20 · 行高 14/18/20/22/28 · 数字等宽 · 分隔线 rgba 圆角 卡片10/控件8/胶囊999 · 交互 active/disabled/focus 三态 · 阴影只给浮层 ══════════════════════════════════════════════════════════════ */ :root, [data-theme="light"]{ --wk-line:rgba(17,20,25,.07); --wk-line-strong:rgba(17,20,25,.12); --wk-active:rgba(17,20,25,.05); } :root[data-theme="dark"] { --wk-line-strong:rgba(255,255,255,.16); --wk-active:rgba(255,255,255,.06) } html{ -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; } body, .wapp-frame, #view{ font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:'tnum' 0; } h1,h2,h3,.p-head h1,.p-sec h2{ letter-spacing:-.2px; } .wk-btn, .p-row, .wapp-li, .wapp-chip, .wk-chip, .wk-seg__item, .x-rank-row, .wapp-conv{ transition:background-color .16s ease, opacity .16s ease, transform .12s ease; } .wk-btn:active, .wapp-chip:active, .wk-chip:active, .wapp-pcard:active, .x-rank-row:active{ transform:scale(.985); } .wk-btn.is-disabled, .wk-btn[disabled], .wk-btn[aria-disabled='true']{ opacity:.5 !important; pointer-events:none; } :focus-visible{ outline:2px solid color-mix(in srgb, var(--wk-brand) 55%, transparent); outline-offset:2px; border-radius:6px; } .wk-pop, .wk-sheet, .wk-dialog, .wapp-drawer, .wk-modal{ box-shadow:0 8px 28px rgba(16,24,40,.14) !important; } ::selection{ background:color-mix(in srgb, var(--wk-brand) 22%, transparent); } /* v=630 次要文字对比度按 Vant gray 层级重排：正文次要 4.9:1、图标 3:1 仅装饰 */ :root,[data-theme="light"] { --wk-ink-2:#414a5c; --wk-ink-4:#9aa1ac } /* v=631 品牌蓝按 AA 校色：#3563e0 白字仅 4.44:1 → #3563e0 为 5.23:1 */ :root,[data-theme="light"]{ --wk-brand:#3563e0; --wk-accent:#3563e0; } :root[data-theme="dark"]{ --wk-brand:#6b93ff; --wk-accent:#6b93ff; } /* v=632 语义色分「填充版 / 文字版」（文字版满足 4.5:1） */ :root,[data-theme="light"]{ --wk-ok-ink:#0b7a34; --wk-danger-ink:#c4251a; --wk-warn-ink:#8a5a00; } :root[data-theme="dark"]{ --wk-ok-ink:#5ee08a; --wk-danger-ink:#ff8a80; --wk-warn-ink:#ffc861; } .is-in, .wapp-row-amt.is-in, .wapp-order-note .is-in{ color:var(--wk-ok-ink) !important; } .wapp-order-note .is-warn{ color:var(--wk-warn-ink) !important; } .wk-btn--danger{ color:var(--wk-danger-ink) !important; } .wk-btn--danger.wk-btn--primary, .wk-btn--danger-solid{ background:var(--wk-danger) !important; color:#fff !important; } .wapp-order-peer-rl{ color:#5b6473 !important; } .wapp-tr-quote-s, .wapp-order-meta span{ color:var(--wk-ink-3); } /* v=633 文字色统一到「文字版语义色 + 对比度达标」 */ :root,[data-theme="light"]{ --wk-ink-3:#5f6673; } .wk-status--cancel, .wk-status--warn, .wk-status--pending, .wapp-status--warn{ color:var(--wk-danger-ink) !important; } .wk-status--done, .wk-status--ok{ color:var(--wk-ok-ink) !important; } .is-out, .is-neg, .wapp-amt.is-out{ color:var(--wk-danger-ink) !important; } [style*="color:var(--wk-danger)"]{ color:var(--wk-danger-ink) !important; } .wapp-slogout{ color:var(--wk-danger-ink) !important; font-weight:600 !important; } /* ══════════════════════════════════════════════════════════════ v=635 方法与令牌：Open Props (★5.6k) 缓动/阴影 · Radix Colors (被 shadcn ★127k 采用) 12 级暗色 + 无障碍动效开关 + 骨架屏 + 长文本/滚动容器健壮性 ══════════════════════════════════════════════════════════════ */ :root{ --ease-out:cubic-bezier(.25,0,.3,1); --ease-spring:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.4,0,.2,1); --dur-1:120ms; --dur-2:180ms; --dur-3:240ms; --elev-1:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10); --elev-2:0 4px 12px rgba(16,24,40,.10),0 2px 4px rgba(16,24,40,.06); --elev-3:0 12px 32px rgba(16,24,40,.16),0 4px 8px rgba(16,24,40,.08); --z-nav:20; --z-tabbar:30; --z-sheet:60; --z-toast:80; } /* Radix 12 级暗色：1 底 → 3 卡 → 4 hover → 6 线 → 8 强线 → 11 次字 → 12 主字 */ :root[data-theme="dark"] { --wk-bg:#0f1116; --wk-card:#1b1f29; --wk-fill:#222836; --wk-ink:#eef2f8; --wk-ink-2:#b7c0cf; --wk-ink-3:#a3adbe } /* 动效统一走令牌；系统要求减弱动效时全部关掉 */ .wk-btn,.p-row,.wapp-li,.wk-chip,.x-rank-row,.wapp-conv,.wapp-pcard,.wapp-tabbar__item{ transition-duration:var(--dur-2); transition-timing-function:var(--ease-out); } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } .wk-pop,.wk-sheet,.wk-dialog,.wapp-drawer{ box-shadow:var(--elev-3) !important; z-index:var(--z-sheet); } .wk-toast,.wapp-toast{ z-index:var(--z-toast) !important; box-shadow:var(--elev-2) !important; } /* 骨架屏：is-loading 容器内占位块扫光 */ .wk-skel{ position:relative; overflow:hidden; background:var(--wk-fill); border-radius:8px; } .wk-skel::after{ content:''; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); animation:wkShimmer 1.2s var(--ease-in-out) infinite; } :root[data-theme="dark"] .wk-skel::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); } @keyframes wkShimmer{ 100%{ transform:translateX(100%); } } /* 健壮性：长英文/URL 不撑破卡片；滚动容器不把页面带着滚 */ .wapp-card-b,.p-row__t,.wapp-order-title,.x-rank-bd b,.wapp-msg-b{ overflow-wrap:anywhere; } .p-filter,.x-rank-list,.wapp-gstrip,.wapp-hotstrip{ overscroll-behavior-x:contain; } img{ max-width:100%; } /* v=636 无障碍基线：sr-only、chip 触控区外扩到 36、图标按钮最小 36×36 */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .wk-chip{ position:relative; } .wk-chip::after{ content:''; position:absolute; inset:-6px; } .wapp-chip{ position:relative; } .wapp-chip::after{ content:''; position:absolute; inset:-6px; } /* v=637 深色卡片边界与占位图（#1b1f29 在 #0f1116 上边界偏弱、占位图发灰） */ :root[data-theme="dark"]{ --wk-line:#2f3746; } :root[data-theme="dark"] .wapp-pcard, :root[data-theme="dark"] .p-card, :root[data-theme="dark"] .wapp-panel{ border-color:#2f3746 !important; } :root[data-theme="dark"] .wapp-pcard-media, :root[data-theme="dark"] .wapp-card-media{ background:linear-gradient(145deg,#202636,#171b26) !important; color:#4b5568 !important; } :root[data-theme="dark"] .wapp-pcard-media b, :root[data-theme="dark"] .wapp-card-media b{ color:#39414f !important; } /* v=639 表单语法（对齐 Vant 4 Field/Cell 的节奏）：标签 12/600、字段间距 12、输入 40、错误态 */ #view .wk-field{ margin-top:12px !important; } #view .wk-field:first-child{ margin-top:0; } #view .wk-field > label, #view .wk-field-label{ font-size:12px; font-weight:600; color:var(--wk-ink-2); margin-bottom:6px; } #view .wk-field .wk-hint, #view .wk-field small{ font-size:11px; color:var(--wk-ink-3); margin-top:4px; } #view .wk-field input, #view .wk-field select, #view .wk-field textarea{ font-size:13px; border-radius:8px; } #view .wk-field textarea{ min-height:88px; line-height:19px; padding:10px 12px; } #view .wk-field input::placeholder, #view .wk-field textarea::placeholder{ color:#98a1b0; } #view .wk-field.is-err input, #view .wk-field.is-err select, #view .wk-field.is-err textarea{ border-color:var(--wk-danger-ink) !important; box-shadow:0 0 0 3px rgba(196,37,26,.10); } #view .wk-field.is-err .wk-hint{ color:var(--wk-danger-ink); } #view .wk-req::after{ content:'*'; color:var(--wk-danger-ink); margin-left:2px; } @media (max-width:380px){ #view .wk-field{ margin-top:10px !important; } } /* v=640 编辑器：提交按钮常驻底部（不用滚到底才能发），表单页底部留白同步 */ #view [data-act="nlsave"], #view [data-act="psave"], #view [data-act="tsave"], #view [data-act="qsave"]{ position:sticky; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:6; margin-top:16px !important; box-shadow:0 6px 18px rgba(16,24,40,.14); } #view:has([data-act="nlsave"]), #view:has([data-act="psave"]){ padding-bottom:calc(26px + env(safe-area-inset-bottom)); } #view .wk-field__hint, #view .wapp-sup-tip{ font-size:11px; line-height:16px; } /* v=641 深色可读性收口：四级字提到 4.5:1；Banner CTA 在深色下仍用品牌蓝字 */ :root[data-theme="dark"]{ --wk-ink-4:#8b95a8; } :root[data-theme="dark"] .wapp-order-note, :root[data-theme="dark"] .wapp-hint{ color:#9aa4b6 !important; } /* v=642 深色：填充按钮统一用「填充蓝 #3563e0 + 白字」（品牌色在深色下偏亮，白字只有 2.9:1） */ :root{ --wk-brand-fill:#3563e0; } :root[data-theme="dark"] .wk-btn--primary, :root[data-theme="dark"] .wapp-tcard-cta, :root[data-theme="dark"] .wapp-cta, :root[data-theme="dark"] .wapp-tabplus{ background:var(--wk-brand-fill) !important; color:#fff !important; } :root[data-theme="dark"] .wapp-tabplus i{ background:transparent !important; color:#fff !important; } .wapp-me-badges .wk-chip { cursor: pointer; }[data-theme="dark"] .wapp-cmt-op { background: var(--wk-accent-weak); color: var(--wk-ink); }.wapp-frame .wapp-me-badgerow .wapp-frame .wapp-notice { min-height: 36px; }.wapp-frame .wapp-me-more { display: inline-flex; align-items: center; min-height: 36px; padding: 0 2px; } .wapp-me .wk-cell, .wapp-mine .wk-cell { padding-top: 11px; padding-bottom: 11px; }.wapp-card-tm .wapp-card-stats .wapp-post-meta .wapp-post-ft { font-size:11px; line-height:15px; } .wapp-me-coverbtn:active { background: rgba(0,0,0,.5); } .wapp-me-coverbtn::before { content: ''; position: absolute; inset: -6px -4px; } #view .wapp-sec-hd, #view .wapp-sechd, .wapp-me .wapp-sec-hd { margin-top:12px !important; } .wapp-me-list .p-row:last-child { border-bottom:0; }.wapp-price b .wapp-kpi b .p-stat b .wapp-order-amt b .wapp-tr-quote-v .x-no .wapp-me-stat b .wapp-order-no .wapp-card-tm time { font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; } #view .p-row__ico, #view .wapp-cellico, #view .wapp-meico, #view .wapp-sico { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none; background:var(--wk-fill); color:var(--wk-ink-2); } #view .p-row__ico i, #view .p-row__ico svg, #view .wapp-cellico i, #view .wapp-cellico svg, #view .wapp-meico i, #view .wapp-meico svg, #view .wapp-sico i, #view .wapp-sico svg { width:18px; height:18px; } #view .wapp-gico{ width:34px; height:34px; border-radius:9px; } /* v=644 详情页购买条：深色层次 + 白/暗两档分隔 */ .wapp-buybar{ border-top:1px solid var(--wk-line); box-shadow:0 -2px 12px rgba(16,24,40,.06); } :root[data-theme="dark"] .wapp-buybar{ background:#1b1f29 !important; border-top-color:#2f3746 !important; box-shadow:0 -2px 16px rgba(0,0,0,.5); } :root[data-theme="dark"] .wapp-buybar .wapp-buybar-price b{ color:#fff !important; } /* v=645 骨架屏轮廓（与卡片同尺寸，加载完不跳版） */ .wapp-sk--card{ display:flex; flex-direction:column; gap:10px; } .wapp-skcard{ background:var(--wk-card); border:1px solid var(--wk-line); border-radius:12px; padding:10px; display:flex; gap:10px; } .wapp-skcard__media{ width:76px; height:76px; flex:none; border-radius:10px; } .wapp-skcard__bd{ flex:1; min-width:0; padding-top:6px; } .wapp-sk .wk-skeleton{ height:14px; border-radius:6px; } /* 空状态统一：40 图标 + 14 标题 + 12 说明，垂直居中不顶到顶栏 */ .wk-state{ padding:40px 24px; text-align:center; } .wk-state__icon{ width:56px; height:56px; margin:0 auto 10px; display:grid; place-items:center; color:var(--wk-ink-4); } .wk-state__title{ font-size:14px; font-weight:600; color:var(--wk-ink); } .wk-state__desc{ font-size:12px; color:var(--wk-ink-3); margin-top:4px; line-height:18px; } .wk-state__act{ margin-top:14px; display:flex; justify-content:center; } /* v=646 图标砖真统一：站内实际存在的 9 类图标容器，全部 30 / r9 / 18 图标 */ #view :is(.wapp-tool-ico,.wapp-pub-ico,.wapp-asset-ico,.wapp-econ-ico,.wapp-voice-ico,.wapp-cbar-ico,.wapp-composer-ico,.wapp-gdbico,.wapp-nav-ico){ width:30px; height:30px; border-radius:9px; display:inline-grid; place-items:center; flex:none; background:var(--wk-fill); color:var(--wk-ink-2); } #view :is(.wapp-tool-ico,.wapp-pub-ico,.wapp-asset-ico,.wapp-econ-ico,.wapp-voice-ico,.wapp-cbar-ico,.wapp-composer-ico,.wapp-gdbico) svg, #view :is(.wapp-tool-ico,.wapp-pub-ico,.wapp-asset-ico,.wapp-econ-ico,.wapp-voice-ico,.wapp-cbar-ico,.wapp-composer-ico,.wapp-gdbico) i{ width:18px; height:18px; } /* 底栏/顶栏的图标按钮不铺底色，保持透明 */ #view .wapp-cbar-ico{ background:transparent; } /* v=647 设置页行与 .p-row 同一把尺（50 高 / 14·12 字阶 / 14 箭头 / 右侧值次级色） */ #view .wapp-srow{ display:flex; height:50px; } #view .wapp-srow + .wapp-srow{ border-top:1px solid var(--wk-line); } #view .wapp-srow__v{ margin-left: auto } #view .wapp-srow .wapp-cell__arrow{ width:14px; height:14px; margin-left:6px; opacity:.55; } :root[data-theme="dark"] #view .wapp-srow:active{ background:rgba(255,255,255,.06); } #view .wapp-home-games::-webkit-scrollbar{ display:none; } #view .wapp-tcard { display:flex !important; border:1px solid var(--wk-line); border-radius:12px; background:var(--wk-card) } #view .wapp-tcard .wk-avatar{ width:44px !important; height:44px !important; flex:none; } /* 3) 区块标题与「更多」统一 */ #view .wapp-sec-hd b{ font-size:15px; font-weight:600; letter-spacing:-.2px; } #view .wapp-sec-hd a{ } #view .wapp-home-games .wapp-gico, #view .wapp-home-games .wapp-gico img, #view .wapp-home-games .wapp-gico i{ width:16px !important; height:16px !important; border-radius:4px !important; font-size:10px !important; } :root[data-theme="dark"] #view .wapp-hsearch{ background:#1b1f29; border-color:#2f3746; } #view .wapp-hpscroll > * > *:not(img):not([class*="ph"]){ padding:0 10px; } /* v=653 按评审返工三处：游戏胶囊去空图标、头像兜底、标签改成小 chip、推荐卡收紧 */ /* 1) 游戏胶囊：图标没素材就不要留空块，纯文字胶囊 28 高 */ #view .wapp-home-games .wapp-gico{ display:none !important; } #view .wapp-home-games .wapp-gitem.is-on{ background:var(--wk-ink) !important; color:#fff !important; border-color:var(--wk-ink) !important; } /* 2) 头像兜底：没有图时用品牌色底 + 名字首字，不再是白块 */ #view .wapp-tcard .wk-avatar{ background:linear-gradient(135deg,#4b74e8,#2f56c8) !important; color:#fff !important; font-size:16px !important; font-weight:600; } /* 3) 标签改成小 chip（不再拉成整条浅色骨架），卡片收紧 */ #view .wapp-tcard{ padding:12px !important; gap:8px !important; align-items:flex-start !important; } #view .wapp-tcard > *{ align-self:center; } #view .wapp-tcard .wapp-tcard-tag, #view .wapp-tcard [class*="tag"], #view .wapp-tcard [class*="badge"]{ display:inline-flex !important; width:auto !important; align-self:flex-start !important; padding:0 6px !important; height:18px !important; line-height:18px !important; font-size:10px !important; border-radius:4px !important; background:color-mix(in srgb, var(--wk-brand) 10%, transparent) !important; color:var(--wk-brand) !important; } /* v=656 首页去掉游戏胶囊条：图标缺素材、文字被挤断，且与「快捷入口/大厅」重复。 游戏筛选放到下单大厅页（那里本来就是按游戏分区），首页不再放一条半成品。 */ /* ══════════════════════════════════════════════════════════════ v=657 首页 v2 · 全量重写（hx- 前缀，独立一套类名，不复用旧首页组件） 结构：搜索 → 快捷入口 → 主推位 → 为你推荐（人列表）→ 热门服务（双列）→ 公告 ══════════════════════════════════════════════════════════════ */ #view .hx{ display:flex; flex-direction:column; gap:14px; padding:0; } /* 主推位（沿用轮播组件，只收外壳） */ #view .hp-hero{ border-radius:12px; overflow:hidden; } .wapp-banner-track { display: flex; height: 100%; transition: transform .3s ease; will-change: transform; } .wapp-banner-slide { flex: 0 0 100%; position: relative; display: block; overflow: hidden; } .wapp-banner-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .wapp-banner-slide::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .18) 46%, rgba(0, 0, 0, 0) 72%); } .wapp-banner-dot.is-on { width: 14px; background: var(--wapp-on-media); } .wapp-game { display: flex; align-items: center; gap: 6px; width: 132px; padding: 8px 10px; border: 1px solid var(--wk-line); border-radius: 10px; background: var(--wk-card); font-family: inherit; font-size:11px; line-height:14px; color: var(--wk-ink-2); cursor: pointer; text-align: left; } .wapp-game span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wapp-game.is-on { border-color: var(--wk-accent); background: var(--wk-accent); color: var(--wk-on-accent); font-weight: 700; } .wapp-game.is-on .wapp-gamegl { background: rgba(255,255,255,.18); color: var(--wk-on-accent); } .wapp-gamegl { flex: none; width: 22px; height: 22px; border-radius:8px; background: var(--wk-fill); color: var(--wk-ink-3); display: flex; align-items: center; justify-content: center; font-size:10px; font-weight: 700; font-style: normal; } .wapp-ggrid.is-two .wapp-game { width: 132px; } .wapp-ggrid .wapp-game { flex: none; } .wapp-game.is-soon { color: var(--wk-ink-2); background: var(--wk-bg); border-color: var(--wk-line); } .wapp-gpage .wapp-game.is-soon { background: var(--wk-card); border: 1px dashed var(--wk-line-2, #d5d9df); color: var(--wk-ink-3); opacity: .85; } .wapp-gpage .wapp-game.is-on { background: var(--wk-accent); color: var(--wk-on-accent); } .wapp-gpage .wapp-game .wapp-gico { object-fit: cover; flex: none; display: block } .wapp-gamegl--sm { flex: none; width: 18px; height: 18px; border-radius: 5px; font-size:10px; } .wapp-gpage .wapp-game .wapp-gamegl { flex: none } .wapp-gpage .wapp-game { flex-direction: row; width: auto; justify-content: flex-start; text-align: left; background: var(--wk-fill); border-color: transparent; height: 44px; padding: 0 10px; gap: 6px; border-radius: 10px; } .wapp-gpage .wapp-game span { white-space: nowrap; overflow: hidden; text-overflow: clip; min-width: 0; -webkit-mask-image: linear-gradient(90deg, var(--wk-ink) 62%, rgba(0,0,0,0) 99%); mask-image: linear-gradient(90deg, var(--wk-ink) 62%, rgba(0,0,0,0) 99%); font-size:11px; line-height:15px; } .wapp-gpage .wapp-game .wapp-gico, .wapp-gpage .wapp-game .wapp-gamegl { width: 18px; height: 18px; border-radius:8px; font-size:10px; } .wapp-frame .wapp-gpage .wapp-game .wapp-gamegl, .wapp-frame .wapp-gamegl--sm { font-size:10px; } .wapp-frame .wapp-gamegl, .wapp-frame .wapp-mc-live, .wapp-frame .wapp-v3-lv, .wapp-frame .wapp-banner-tag, .wapp-frame .wapp-tag { font-size:10px; } .wapp-frame .wapp-gdot, .wapp-frame .wapp-banner-dot { position: relative; } .wapp-frame .wapp-gdot::before, .wapp-frame .wapp-banner-dot::before { content: ''; position: absolute; inset: -12px -8px; } .wapp-banner-t b, .wapp-banner-t em { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); } .wapp-banner-t { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, var(--wapp-shade) 0%, var(--wapp-shade) 14%, var(--wapp-shade-0) 100%); color: var(--wapp-on-media); text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 28px 16px 12px; padding-right: 92px; } .wapp-banner-tag { position: absolute; padding: 2px 8px; border-radius: 4px; background: var(--wapp-on-media); color: var(--wapp-cta-ink); font-size:10px; line-height:14px; font-weight: 700; left: 16px; top: 10px; } .wapp-banner-dots { position: absolute; display: flex; align-items: center; gap: 4px; right: 16px; top: 10px; } .wapp-frame .wapp-banner-dot::before { inset: -15px -12px; } .wapp-banner-dot { width: 6px; height: 6px; padding: 0; border-radius: 999px; background: var(--wapp-dot); transition: width .2s ease, background .2s ease; position: relative; } .wapp-banner-dot::after { content: ''; position: absolute; left: -14px; right: -14px; top: -15px; bottom: -15px; } .wapp-banner > * { position:relative; z-index:1; } .wapp-banner::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(10,20,60,.55) 0%,rgba(10,20,60,.20) 60%,rgba(0,0,0,0) 100%); } .wapp-banner .wapp-bn-cta,.wapp-banner .wk-btn { color:var(--wk-brand) !important; } .wapp-banner { overflow: hidden; background: var(--wk-fill); touch-action: pan-y; margin:0 0 10px !important; border-radius:12px !important; aspect-ratio:3.6 / 1 !important; margin-left: -12px; margin-right: -12px; position:relative; } .wapp-banner-t b { font-weight: 700; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:17px !important; line-height:22px !important; } .wapp-banner-t em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1; font-size:11px !important; line-height:15px !important; } :root[data-theme="dark"] .wapp-banner-cta, :root[data-theme="dark"] .wapp-hero-cta { color:#3563e0 !important; background:#fff !important; } #view:has(.wapp-banner) { display:flex; flex-direction:column; gap:10px; } #view:has(.wapp-banner) > .wapp-quick { order:2; } #view:has(.wapp-banner) > .wapp-banner { order:3; } #view:has(.wapp-banner) > .wapp-notice { order:4; } #view:has(.wapp-banner) > .wapp-sec { order:5; } #view:has(.wapp-banner) > .sr-only { order:0; } #view .wapp-banner { aspect-ratio:3.6/1; max-height:88px; border-radius:12px; } #view:has(.wapp-banner) > .wapp-home-games { order:1; display:none !important; } #view .hp-hero .wapp-banner { margin: 0 !important } #view .hx-p{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--wk-card); border:1px solid var(--wk-line); border-radius:12px; text-align:left; } #view .hx-p__chev{ width:12px; height:12px; border-right:1.8px solid var(--wk-ink-4); border-top:1.8px solid var(--wk-ink-4); transform:rotate(45deg); flex:none; } /* v=658 首页两处收口：无价显示「面议」；服务占位改成浅色品牌底，不再是高饱和大蓝块 */ #view .hx-p__pr.is-na{ font-size:12px; color:var(--wk-ink-3); } :root[data-theme="dark"] #view .hx-c__img{ background:#222836 !important; color:#8aa6f2 !important; }