/* ============================================================ 星语者 · 全站样式 配色：深靛（主）+ 香槟金（强调），米白底。 ⚠️ 配色走过一轮来回，别再凭感觉改： 2026-10-07 上午 原「深靛 + 暖金」查出三处对比度不达标 （主按钮白字 3.13、辅助文字 2.93、金色标签 2.69）， 换成方案 A「夜空蓝 + 星辉金」（冷灰中性色）。 2026-10-07 下午 用户拍板**回到方案 B「深靛 + 香槟金」**—— 它不是老配色，而是老配色的**合规修正版**： 深靛一个色号不动（#1B1830），只把金色加深到 #8A6A2F（白底 5.02:1 达标）、 辅助文字加深到 #736C85、米白提亮到 #F8F7F4。观感熟悉，但每行字都合规。 🔴 两条铁律（方案 A 这轮换色换出来的教训）： 1. **主按钮用深色底白字**，金色只标记星辉时刻（生日/年度信/逾期/选中态）； 金色当层级色刷满全屏，既掉对比度又显廉价。 2. 中性灰要**跟着主色走暖冷**。方案 B 是暖调（米白 #F8F7F4 / 暖灰 #E2DED6）， 留下冷灰（#F5F6F8 / #DDE1E8）会「看着差不多，就是发脏」。 一次性迁移脚本：design/apply-palette.py（映射表写死在里面，跑完即弃）。 校验脚本：design/contrast-check.py，改色后请复跑。 ============================================================ */ :root { --ink: #1b1830; --ink-2: #2a2547; --ink-3: #4a4468; --gold: #8a6a2f; --gold-soft: #faf4e8; --gold-line: #e6d5b4; --bg: #f8f7f4; --card: #FFFFFF; --line: #e2ded6; --line-2: #cfc9be; /* 🔴 新增第三档分隔线（2026-10-07）。 为什么要分两档：--line 是**卡片外边界**（躺在页面底 #f8f7f4 上）， 而卡片**内部**的分区分隔线躺的是纯白卡底 —— 同样的颜色在白底上更淡。 实测：--line #e2ded6 on #fff = 1.34，而列表行原来用的 #edeae3 on #fff = **1.20**， 基本等于看不见 → 8 张卡片糊成一片、"卡片边界几乎隐形"。 现在卡片内分隔统一用 --line-3（#ddd8ce on #fff = 1.43），边界感回来。 ⚠️ 别再往卡片内部用 #edeae3 那种更浅的值。 */ --line-3: #ddd8ce; --text: #1b1830; --text-2: #565171; --text-3: #736c85; --ok: #3a7350; --warn: #a6701c; --danger: #a83a3a; --radius: 14px; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; } a { color: var(--gold); text-decoration: none; } .hidden { display: none !important; } /* ---------- 通用组件 ---------- 2026-10-07 视觉改版：只动质感、不动色相 —— 深靛 + 暖金的调子保留（用户认可），改的是： ① 主按钮加纵向微渐变 + 投影，压得住白卡片； ② 统一 hover/active 反馈（以前按钮点了没有任何反应）; ③ 圆角、间距、字重拉出一套一致的层级。 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 11px; padding: 11px 20px; font-size: 14.5px; font-weight: 500; letter-spacing: .01em; background: linear-gradient(180deg, #262348 0%, var(--ink) 100%); color: #fff; box-shadow: 0 2px 10px rgba(27, 24, 48, .16); transition: transform .12s, box-shadow .15s, filter .15s, opacity .15s; } .btn:hover { filter: brightness(1.08); } .btn:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(27,24,48,.2); filter: none; } .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } .btn.gold { background: linear-gradient(180deg, #8f6d2c 0%, var(--gold) 100%); box-shadow: 0 2px 10px rgba(184, 137, 74, .30); } .btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line-2); box-shadow: none; } .btn.ghost:hover { border-color: var(--gold); color: var(--gold); filter: none; } .btn.sm { padding: 7px 14px; font-size: 13px; border-radius: 9px; } .btn.wide { width: 100%; } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } /* ---------- 卡片分级（2026-10-07，B 方案「层级手段」） ---------- 🔴 设计稿原话：「8 张卡片同尺寸、同白底、同圆角、同字重，视觉权重完全相同， 眼睛没有落点 —— 改版方向不是把按钮画得更精致，而是**给它们排队**」。 排队的手段是**留白 > 分隔 > 字重 > 颜色**，所以这里**不用颜色分层**， 只动两样：卡片的「实」度（边框深浅 / 底色）与「重量」（内边距）。 · .card.pri 主卡 —— 这一屏只有一张，是"现在要动手的事"（今天要做） 边框最深 + 内边距最大 + 卡头也大一号 · （默认卡） 常规卡 —— 在管客户 / 最近解读 · .card.quiet 辅助卡 —— 预测与工具（年度复购雷达 / 数据与工具） 底色沉到页面同色 + 无边框，视觉上"退到背景里" 合法用途是把**这一屏的主角顶出来**，不是装饰。 */ .card.pri { border-color: var(--line-2); padding: 17px 16px 15px; box-shadow: 0 1px 3px rgba(27, 24, 48, .05); } .card.pri > .card-title { font-size: 15.5px; } .card.quiet { background: transparent; border-color: transparent; padding: 4px 0 0; } /* 辅助卡之间的间距要比常规卡**更松**（B 方案：留白 > 分隔）。 因为它们已经去掉边框了，再挤在一起就成了"一堆文字堆叠"， 反而比原来更乱 —— 去掉的分隔线必须用留白补回来。 */ .card.quiet + .card.quiet, .card.quiet + .fold { margin-top: 4px; } .card.quiet > .card-title { font-size: 13.5px; color: var(--text-2); /* 辅助卡已经"透明化"了，卡头再带一条通栏分隔线会显得悬空 —— 去掉， 靠上下留白和字号差把它跟上面的常规卡分开（留白 > 分隔）。 */ border-bottom: none; padding-bottom: 0; margin-bottom: 9px; } /* 登录页的卡片现在是
（为了让手机密码管理器认得），浏览器会给 form 元素默认上下 margin，卡片会比原来的 div 往下沉一截。归零。 */ /* 认证页表单卡：比工作台内部的卡更「浮」一点 —— 这是产品门面， 一屏只有一张卡，值得一点投影把它托起来。 */ form.card { margin: 0; box-shadow: 0 2px 16px rgba(27,24,48,.07); } /* 登录主按钮：加一道极淡的顶部高光（inset），深色渐变不再是一片死板 */ .auth-wrap .btn.wide { padding: 12px 20px; box-shadow: 0 2px 10px rgba(27,24,48,.16), inset 0 1px 0 rgba(255,255,255,.10); } /* 卡片标题（B 方案字号阶梯：**卡标题 14.5** / 正文 15 / 次要 12.5 / 辅助 11.5）。 🔴 中途我提过一次 17px→16px（跟着「大字」走），2026-10-07 回滚到设计稿阶梯。 原因：设计稿早就警告过「卡片标题与正文都是 14.5～15，靠字重和颜色区分层次， 容易糊成一片」，而它给的药方是**留白与分隔**，不是把字号硬放大 —— 放大字号等于又拿字号当层级用，正是它批评的毛病。 🔴 所以「标题不显眼」是靠这两样解决的，**别再改字号**： ① 底部细分隔线（--line-3）→ 标题成为"这一块的头"，跟正文分成两级； ② 卡片分档（.card.pri / .quiet）→ 一屏里有主次，眼睛才有落点。 对比度实测：分区线 #ddd8ce on 卡底 #fff = 1.43（原 #edeae3 只有 1.20，几乎隐形）。 */ .card-title { font-size: 14.5px; font-weight: 600; color: var(--ink); letter-spacing: .2px; margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line-3); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } /* 🔴 标题右侧的状态/计数是**次要**信息，不许跟着标题一起变大。 .badge-ok/.badge-warn 本身没定字号 → 直接继承 .card-title 的 17px， 于是「1 位待出信」和卡片标题一样大 = 没有层级，这才是"乱"的来源之一。 */ .card-title .badge-ok, .card-title .badge-warn, .card-title .badge-danger { font-size: 13px; font-weight: 600; } .field { margin-bottom: 12px; } .field label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 5px; } .field input, .field textarea, .field select { width: 100%; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; color: var(--text); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); } .field textarea { min-height: 84px; resize: vertical; line-height: 1.6; } .muted { font-size: 12.5px; color: var(--text-3); line-height: 1.7; } /* 「正在给已有账号补密码」的提示条。 出现在用户点过密码登录、收到 PASSWORD_NOT_SET 之后， 目的是解释为什么突然被带到注册 tab —— 不解释的话用户以为走错了页面。 */ .reg-hint { margin: 0 0 14px; padding: 10px 12px; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); background: #f4f1ea; border-radius: 8px; border-left: 3px solid var(--gold, #c9a227); } .reg-hint[hidden] { display: none !important; } .empty-line { font-size: 14px; color: var(--text-3); text-align: center; padding: 26px 0; } /* 主卡里的空态：主卡本身已经"实"了，空态再留 26px 上下 = 一张空荡荡的大白卡， 反而把首屏最贵的位置浪费掉。收紧到 16px，并且**左对齐**跟卡头呼应 （居中排版在"这一块要做的事"语境里会显得像说明书）。 */ .card.pri > .empty-line { text-align: left; padding: 15px 0 13px; font-size: 13.5px; } .chip { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-line); } .badge-ok { color: var(--ok); font-weight: 500; } .badge-warn { color: var(--warn); font-weight: 500; } .badge-danger { color: var(--danger); font-weight: 500; } /* ---------- 码库存 / 平台发码 / 购买套餐 ---------- */ .quota-bar { border: 1px solid var(--gold-line); background: var(--gold-soft); } .quota-num { display: flex; align-items: center; gap: 10px; } .quota-num .badge-ok, .quota-num .badge-warn { font-size: 14px; font-weight: 600; } .quota-acts { display: flex; gap: 8px; margin-top: 11px; } .quota-acts .btn { flex: 1; } /* 两个发码入口并排：主操作（平台发码）在右，与「＋」按钮既有视觉一致 */ .code-acts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .pack-list { display: flex; flex-direction: column; gap: 8px; } .pack-row { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r, 10px); background: #fff; cursor: pointer; } .pack-row:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); } .pack-main { display: flex; flex: 1; align-items: baseline; justify-content: space-between; gap: 10px; } .pack-main b { font-size: 14px; font-weight: 500; } /* ---------- 卡片底部「看全部」文字链 ---------- 2026-10-07 用户指出首页「内容杂乱」。原来这里是一个 `.btn.wide.ghost` 通栏描边大按钮 —— 整屏最重的一块视觉权重，压在卡片最下方， 跟内容抢视线，而且空框子本身没什么信息量。 改成：一条分隔线 + 居中小字 + 箭头，hover 才泛金。 */ .card-more { width: 100%; margin-top: 13px; padding: 11px 0 1px; border: none; border-top: 1px solid var(--line); background: none; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; } .card-more i { font-style: normal; color: var(--text-3); } .card-more:hover, .card-more:hover i { color: var(--gold); } /* 卡片标题左侧：图标 + 文字先包一层。 .card-title 是 flex + align-items:baseline + space-between， 图标直接塞进去会被 baseline 压歪。 */ .card-title .ct-l { display: inline-flex; align-items: center; gap: 7px; min-width: 0; } .card-title .ct-l svg { flex-shrink: 0; color: var(--gold); } /* ---------- 洞察条（卡片内的「一句话结论」） ---------- 2026-10-07 用户指出「年度复购雷达」那段说明是灰字注脚 = 不醒目。 它讲的其实是这块卡片的灵魂（生日/年度信为什么能年年卖）， 用 muted 排版等于让人默认跳过。改成浅金底的洞察条。 🔴 不破「金色只标记星辉时刻」—— 这里标的正是生日/年度信本身。 🔴 底用 --gold-soft（#faf4e8），**不要**改成实心金色块： 实心金上压深字对比度只剩 4.5 上下，且首屏已有深靛 hero，会显廉价。 对比度实测（design/contrast-check 口径）：主句深靛 15.7:1、辅句 4.55:1、 金色图标 4.58:1（图形只需 3:1）。 */ .insight { display: flex; gap: 9px; align-items: flex-start; background: var(--gold-soft); border: 1px solid var(--gold-line); border-left: 3px solid var(--gold); border-radius: 10px; padding: 11px 13px; margin: 0 0 13px; } .insight .is-ic { flex-shrink: 0; color: var(--gold); display: flex; margin-top: 3px; } .insight .is-tx { min-width: 0; } .insight .is-tx b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.6; } .insight .is-tx span { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 3px; line-height: 1.6; } /* ---------- 提示条 ---------- */ .toast { position: fixed; left: 50%; bottom: 42px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 11px 22px; border-radius: 10px; font-size: 14px; z-index: 999; max-width: 88vw; text-align: center; box-shadow: 0 8px 26px rgba(27,24,48,.28); } /* ---------- 弹层 ---------- */ .mask { position: fixed; inset: 0; background: rgba(27,24,48,.5); display: flex; align-items: center; justify-content: center; z-index: 500; padding: 18px; } .modal { background: #fff; border-radius: 16px; width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto; padding: 20px; } /* 星盘图这类横向内容要更宽，但不超过工作台外壳的 600px，两侧留 20px 呼吸 */ .modal.wide { max-width: 600px; } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .modal-head h3 { margin: 0; font-size: 16.5px; font-weight: 500; } .modal-x { font-size: 22px; color: var(--text-3); line-height: 1; padding: 0 4px; } /* ---------- 认证页 ---------- */ /* 星空氛围层（2026-10-12 登录页精修）： 纯 CSS 多重 radial-gradient 撒星点 + 顶部一束暖金光晕。 🔴 不动配色体系（深靛+香槟金+米白是拍过板的方案 B），只加质感： 星点用 gold 20~30% / ink 12~16% 透明度，1.2~2px，米白底上极淡， 不抢内容；光晕只在顶部 hero 区，不往表单区蔓延。 */ .starfield { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(1.6px 1.6px at 12% 18%, rgba(138,106,47,.30), transparent 100%), radial-gradient(1.4px 1.4px at 84% 12%, rgba(138,106,47,.24), transparent 100%), radial-gradient(2px 2px at 68% 26%, rgba(27,24,48,.16), transparent 100%), radial-gradient(1.4px 1.4px at 26% 8%, rgba(27,24,48,.14), transparent 100%), radial-gradient(1.8px 1.8px at 92% 32%, rgba(138,106,47,.20), transparent 100%), radial-gradient(1.2px 1.2px at 46% 6%, rgba(138,106,47,.22), transparent 100%), radial-gradient(1.6px 1.6px at 8% 34%, rgba(27,24,48,.12), transparent 100%), radial-gradient(1.4px 1.4px at 74% 6%, rgba(27,24,48,.13), transparent 100%), radial-gradient(1.3px 1.3px at 35% 22%, rgba(138,106,47,.18), transparent 100%), radial-gradient(1.5px 1.5px at 58% 14%, rgba(27,24,48,.12), transparent 100%); } .starfield::before { content: ''; position: absolute; left: 50%; top: -200px; transform: translateX(-50%); width: 560px; height: 380px; background: radial-gradient(ellipse at center, rgba(138,106,47,.10) 0%, rgba(138,106,47,.045) 45%, transparent 70%); } .auth-wrap { max-width: 420px; margin: 0 auto; padding: 58px 20px 40px; position: relative; z-index: 1; } .auth-logo { text-align: center; margin-bottom: 26px; } .auth-logo .mark { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 14px; background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%); display: flex; align-items: center; justify-content: center; /* 淡金细环 + 柔光：徽标是品牌第一眼，给一圈「星辉」但不刷金色 */ box-shadow: 0 4px 14px rgba(27,24,48,.18), 0 0 0 1px rgba(138,106,47,.22), 0 0 26px rgba(138,106,47,.10); } .auth-logo h1 { font-size: 24px; font-weight: 500; margin: 0 0 5px; letter-spacing: 3px; text-indent: 3px; /* 中文标题拉开字距；text-indent 补回末字后多出的空隙，保持视觉居中 */ } .auth-logo p { font-size: 13px; color: var(--text-3); margin: 0; } .tabs { display: flex; gap: 4px; background: #eae6de; border-radius: 12px; padding: 5px; margin-bottom: 18px; } .tab { flex: 1; text-align: center; padding: 8px 0; font-size: 14px; color: var(--text-2); border-radius: 8px; transition: background .15s; } .tab.on { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 1px 3px rgba(27,24,48,.10); } /* 线索条数角标：有未跟进线索时才出现，提醒占星师别漏掉 */ .tab .dot { display: inline-block; min-width: 16px; height: 16px; margin-left: 4px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--gold); color: #fff; font-size: 11px; font-style: normal; font-weight: 500; line-height: 16px; vertical-align: 1px; text-align: center; } .err-tip { font-size: 13px; color: var(--danger); background: #FBF0F0; border: 1px solid #F0D8D8; border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; line-height: 1.6; } .ok-tip { font-size: 13px; color: var(--ok); background: #EFF6F1; border: 1px solid #D5E8DC; border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; line-height: 1.6; } .link-line { text-align: center; font-size: 13px; color: var(--text-3); margin-top: 14px; } .link-line a { color: var(--gold); } .code-row { display: flex; gap: 8px; } .code-row input { flex: 1; } .code-row button { white-space: nowrap; } /* 「记住我」勾选行：整行可点，手指目标够大（手机上 16px 的裸 checkbox 很难点中，导致用户其实想勾却勾不上）。 label 包住 input，点文字也能勾。 */ .remember-row { display: flex; align-items: center; gap: 9px; margin: -2px 0 14px; cursor: pointer; user-select: none; font-size: 13px; color: var(--text-2); } .remember-row input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--gold); cursor: pointer; } .remember-row:active { opacity: .7; } /* ---------- 应用外壳 ---------- */ /* 手机：贴满屏（原本的样子，别动）。 桌面：整屏铺满会出现「一条长横条」——一行 45+ 个中文字，眼睛要跨越整个屏幕 回到下一行起点，读长段落很累。但收得过窄也不行：600px 下正文只有约 26 字/行， 段落被切得很碎，看起来像「字挤成一团、卡片窄长一条」，一样不舒服。 → 桌面端该量的不是「屏幕占多少」，是「一行多少字」。排版上的舒适区间是 40~60 个中文字，对应内容宽度 720~900px。取 860px：正文约 40 字/行， 落在区间中段，两侧只留各 8% 留白，视觉上接近铺满但不越界。 改这个值前先量一遍：body 15px 字号、.view 左右各 15px 内边距、卡片再各 14px， 有效行长 = 860 - 15*2 - 14*2 ≈ 802px ÷ 15px ≈ 53 字（卡片内正文 12.5px 时约 64 字）。 若日后改成铺满，务必同步改断点，否则会出现「已放宽却还留着大片空白」的中间态。 */ .app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; max-width: 860px; margin: 0 auto; } /* 视口 ≥ 1040px 才上边框和底色（比 860 宽 180px 留出过渡带， 免得 860~1040 这段内容已经变宽却还顶着 200px 白边）。 ⚠️ 这里是 **视口宽** 不是窗口宽：浏览器带侧栏/边框时约吃掉 64px （实测 900px 窗口 → 836px 视口）。断点必须比 max-width 大一截。 */ @media (min-width: 1040px) { .app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); box-shadow: 0 0 46px rgba(27, 24, 48, .055); } /* 外壳两侧露出一点更深的底色，居中感才立得住 */ body { background: #efebe5; } } /* 注：弹层 .mask 和提示条 .toast 都是 position:fixed 挂在视口上， 定位基准不受 .app 宽度影响，本来就居中——这里不要动它们。 */ /* ---------- 页眉：深靛品牌条（2026-10-07） ---------- 以前这里是「当前 tab 名 + 副题」的白底条。手机上侧栏是隐藏的， 于是打开只看到「今天 / 待办与在管客户」，用户原话「都不知道什么网页」。 现在改成**认得出这是什么**：深靛底 + 香槟金星环四芒星 + 星语者 · 占星师工作台。 当前位置交给底栏高亮 / 侧栏高亮，不再占用最贵的那一行。 ⚠️ 它排在 .app-body 外面，横跨侧栏与内容区，所以两侧都盖得住。 */ .app-head { flex-shrink: 0; display: flex; align-items: center; gap: 9px; padding: 13px 15px; color: #fff; background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%); } /* 底已经是深靛，徽标不再需要那块深色底衬 —— 让星环直接浮在品牌色上 */ .app-head .mark { flex-shrink: 0; display: flex; align-items: center; } .app-head .bh { display: flex; align-items: baseline; gap: 7px; min-width: 0; } .app-head .bh b { font-size: 15.5px; font-weight: 500; letter-spacing: .6px; } .app-head .bh i { font-style: normal; font-size: 12.5px; color: #E8CD98; letter-spacing: .3px; } /* 侧栏 + 内容列的外层：手机竖排（侧栏隐藏），桌面横排 */ .app-body { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; } .app-main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .view { display: none; padding: 16px 15px 22px; } .view.on { display: block; } /* ---------- 底栏 ---------- */ .tabbar { flex-shrink: 0; display: flex; background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 7px; font-size: 11px; color: var(--text-3); position: relative; } .tabbar button.on { color: var(--ink); font-weight: 500; } .tabbar svg { width: 21px; height: 21px; } /* ---------- 工作台首页 ---------- */ /* ---------- 工作台首页 · 大字版（2026-10-07 用户：「这种大字页面好不好啊，喜欢」）---------- 参考「打工人小账本」的读法：一屏之内先给**数**，再给事。 🔴 三条边界，改前先读： 1. 大字**只给首屏 hero 的三个数**（待处理 / 在管客户 / 累计已交付）。 别把正文列表也吹成大字 —— 那会变成「什么都大」＝什么都不突出。 2. 三个数默认白色；**只有「逾期」那一个数**用香槟金 #E8CD98 （守「金色只标记星辉时刻」的规矩：这里是"要你还债"的时刻）。 3. 手机 360px 宽下三个数要并排不换行 → 金额走 moneyShort() 缩写（¥1.3万）， `white-space:nowrap` 只是最后一道保险，别指望它救 5 位数字。 */ /* 🔴 2026-10-07 曾做成「大字版」（h2 23px + 一条 29px 的三数字条）， 同日用户回滚：「把今天的大字回滚到正常吧，仅此一页没啥意思」。 —— 只有「今天」这一页字大一号，别的页没跟上，反而像没做完。 所以字号回到 17.5px，数字条整块撤掉（待处理/在管客户/累计已交付 本来就分别写在「今天要做」「在管客户」「数据与工具」三张卡里， 摆在最上面等于把同样的数说两遍）。**别再重新加回来。** */ .wk-hero { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%); border-radius: 16px; padding: 18px 18px 15px; color: #fff; margin-bottom: 13px; } .wk-hero h2 { margin: 0 0 4px; font-size: 17.5px; font-weight: 500; } .wk-hero p { margin: 0; font-size: 12.5px; opacity: .82; line-height: 1.6; } .quota-line { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; } .quota-line b { font-size: 25px; font-weight: 500; color: var(--ink); } .quota-line span { font-size: 13px; color: var(--text-3); } .bar { height: 6px; background: #e3dfd5; border-radius: 999px; overflow: hidden; } .bar > div { height: 100%; background: var(--gold); border-radius: 999px; transition: width .3s; } /* ---------- 专题快捷区 ---------- 15 个专题分三组（本命单盘 / 时间单盘 / 双人合盘）。 分组不是为了好看 —— 是因为**点法不一样**： 单盘专题直接出稿，合盘专题要先收第二张盘， 混在一排里占星师会以为所有按钮行为一致。 */ .quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 13px; } .quick-grp { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .quick-grp > i { grid-column: 1 / -1; font-style: normal; font-size: 11px; color: var(--text-3); letter-spacing: .06em; padding: 4px 2px 0; display: flex; align-items: center; gap: 8px; } /* 组标题下面一条淡线，眼睛扫过去能分清块 */ .quick-grp > i::after { content: ''; flex: 1; height: 1px; background: var(--line); } .quick-grp:first-child > i { padding-top: 0; } /* 2026-10-07 改版：从「标题被角标顶下来」的 hack 改成正常文档流 —— 标题 → 副标题 →（专题卡才有）底部动作行，三层纵向排布。 hover 用边框变色 + 轻投影给反馈，卡片本身不再做位移。 */ .quick { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 13px 13px 11px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; transition: border-color .15s, box-shadow .15s; } .quick:hover { border-color: var(--gold-line); box-shadow: 0 3px 14px rgba(27, 24, 48, .07); } .quick:active { box-shadow: 0 1px 4px rgba(27, 24, 48, .08); } .quick b { display: block; font-size: 14px; font-weight: 600; letter-spacing: .01em; margin-bottom: 3px; } .quick > span { font-size: 11.5px; color: var(--text-3); line-height: 1.5; } /* 专题卡底部的出稿动作行：客户稿 / 话术。 贴右对齐、胶囊小钮 —— 动作是「次级入口」，视觉分量必须 压过主体（点卡片出思路），但比原来的右上角标好找得多。 */ .q-acts { display: flex; gap: 6px; margin-top: 10px; align-self: flex-end; } .quick-out { font-size: 11px; line-height: 1; padding: 5px 10px; color: #8a6a2f; background: #faf4e8; border: 1px solid #e6d5b4; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: filter .15s, background .15s; } /* 「话术」是实战里最常用的那个，给它更深一点颜色区分 */ .quick-out.alt { color: #fff; background: var(--gold); border-color: var(--gold); } .quick-out:hover { filter: brightness(1.05); background: #F3E4C8; } .quick-out.alt:hover { filter: brightness(1.08); } .quick-out:active { transform: translateY(1px); } .quick.busy { opacity: .55; pointer-events: none; } .quick.busy .quick-out { color: #fff; background: var(--text-3, #999); border-color: var(--text-3, #999); } /* ============================================================ 解盘区·减法版（2026-10-12） 结构：搜索 → 主线四步 → 高频四专题 → 三抽屉 入口从 32 个降到 16 个（每专题 1 卡 + 1 受众切换）。 排版铁律（延续上方配色铁律）： · **主色底白字只用在一处** —— 主线当前步 + 主线按钮。 专题卡保持白底，只有「当前选中态」才上深靛。 深靛是主色，不是选中态的通用色，别把它刷满整屏。 · 中性色跟着主色走暖调：--bg #F8F7F4 / --line #E2DED6， 不引入冷灰，卡片内部分隔用 --line-3。 · 受众药丸选中态用**深靛**，不用金色 —— 金色留给「星辉时刻」（生日/年度信/逾期），铁律 1。 ============================================================ */ .qn { margin-top: 12px; } /* ---------- 搜索直达 ---------- */ .qn-find { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 0 11px; height: 38px; transition: border-color .15s, box-shadow .15s; } .qn-find:focus-within { border-color: var(--ink-3); box-shadow: 0 0 0 3px rgba(27, 24, 48, .06); } .qn-ico { display: flex; color: var(--text-3); flex: none; } .qn-find input { flex: 1; border: 0; outline: none; background: transparent; font-size: 13.5px; color: var(--text); min-width: 0; } .qn-find input::placeholder { color: var(--text-3); } /* 搜索命中区：命中卡平铺，与下方主网格同一套卡样式 */ .qn-hits { margin-top: 10px; } .qn-hits .qn-grid { margin-top: 0; } .qn-hits-t { margin: 0 0 8px; font-size: 11px; color: var(--text-3); letter-spacing: .02em; } /* 🔴 [hidden] 在 flex/grid 容器上**不生效** —— UA 样式是 [hidden]{display:none}，但 .qn-main / .qn-grid 自己写了 display:flex / display:grid，特异性更高，会把 hidden 顶掉。 表现就是「搜索时主线区收不起来」，白改一场。必须显式压。 */ .qn [hidden] { display: none !important; } .qn-none { margin: 0; padding: 14px 13px; font-size: 13px; line-height: 1.6; color: var(--text-2); background: #fff; border: 1px dashed var(--line-2); border-radius: 11px; } .qn-none span { color: var(--text-3); font-size: 12px; } /* ---------- 主线四步 ---------- */ .qn-main { margin-top: 12px; padding: 13px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 12px; } .qn-main-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 11px; } .qn-main-head b { font-size: 14px; font-weight: 600; } .qn-main-head span { font-size: 11px; color: var(--text-3); } .qn-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .qn-step { padding: 9px 4px; text-align: center; border-radius: 9px; border: 1px solid var(--line); background: #FCFBF9; } .qn-step i { display: block; font-style: normal; font-size: 10px; color: var(--text-3); margin-bottom: 3px; letter-spacing: .04em; } .qn-step b { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); } .qn-step em { display: block; font-style: normal; font-size: 10px; color: var(--text-3); margin-top: 2px; } /* 已走的步骤：金色只标一个勾，不给整块上色 */ .qn-step.done i { color: var(--gold); } .qn-step.done b { color: var(--text); } /* 当前步：唯一一处深靛实底 + 白字（配色铁律 1） */ .qn-step.on { background: var(--ink); border-color: var(--ink); } .qn-step.on i, .qn-step.on em { color: #C9C4DE; } .qn-step.on b { color: #fff; } .qn-main-go { display: block; width: 100%; margin-top: 10px; height: 34px; border: 0; border-radius: 9px; cursor: pointer; background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; font-family: inherit; transition: filter .15s; } .qn-main-go:hover { filter: brightness(1.16); } .qn-main-go:active { filter: brightness(.94); } /* ---------- 分组标题 ---------- */ .qn-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 16px 0 8px; } .qn-label b { font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: .02em; } .qn-label i { font-style: normal; font-size: 10.5px; color: var(--text-3); } /* ---------- 专题卡 ---------- */ .qn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .qn-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px 10px; cursor: pointer; text-align: left; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; } .qn-card:hover { border-color: var(--gold-line); box-shadow: 0 3px 14px rgba(27, 24, 48, .07); } .qn-card:active { box-shadow: 0 1px 4px rgba(27, 24, 48, .08); } .qn-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 3px; } .qn-card-top b { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; } .qn-sub { font-size: 10.5px; color: var(--text-3); line-height: 1.5; display: block; min-height: 16px; } /* 「给我思路」是卡片的主动作（点卡 = 出判据链）， 药丸是次级（换交付物）。所以主动作要有明确的可点感： 浅金底 + 深金字 + 右侧小箭头，而不是一行飘着的金字。 */ .qn-do { display: flex; align-items: center; justify-content: space-between; margin: 9px 0 0; padding: 5px 8px; border-radius: 7px; font-size: 11px; color: var(--gold); background: var(--gold-soft); letter-spacing: .02em; align-self: stretch; } .qn-do::after { content: ''; width: 5px; height: 5px; flex: none; border-right: 1.4px solid var(--gold); border-top: 1.4px solid var(--gold); transform: rotate(45deg); } .qn-card:hover .qn-do { background: #F3E8D5; } /* 受众切换条：卡内右上角一条，两颗药丸。 为什么不用两颗独立按钮 —— 独立按钮等于「一张卡三个可点物」， 16 张卡就回到 32 个入口。切换后卡面恒为「一个专题 + 一个受众」。 */ .qn-aud { display: flex; flex: none; gap: 1px; padding: 2px; background: #F1EFEA; border-radius: 7px; } .qn-pill { font-size: 10px; line-height: 1; padding: 4px 6px; border-radius: 5px; color: var(--text-3); cursor: pointer; white-space: nowrap; user-select: none; transition: background .15s, color .15s; position: relative; } /* 🔴 触控热区：药丸视觉上只有 ~18px 高（10px 字 + 4px 上下内边距）， 在手机上远小于可点面积，点不准 —— 会点空、或点到相邻那颗。 不用 padding 撑（那会把视觉体积一起撑大，一排药丸排不下）， 用伪元素把**可点区域**向四周扩到 32px 高，视觉尺寸不变。 ⚠️ 伪元素 absolute 需要父级 position:relative（上面已加）， 锚点定在中心，否则扩出来的区域会整体偏移，反而更难点。 */ .qn-pill::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 32px; transform: translateY(-50%); } .qn-pill:hover { color: var(--text-2); } .qn-pill.on { background: var(--ink); color: #fff; } .qn-pill.busy { opacity: .6; pointer-events: none; } /* 🔴 [hidden] 在 display:flex/grid 的容器上**不生效**： UA 样式表的 [hidden]{display:none} 会被容器自身的 display:flex 顶掉， 于是搜索时该收起的区域收不起来。必须显式压一道 !important。 */ .qn [hidden] { display: none !important; } /* ---------- 三抽屉 ---------- */ .qn-fold { margin-top: 9px; background: #fff; border: 1px solid var(--line); border-radius: 11px; } .qn-fold > summary { display: flex; align-items: center; gap: 8px; padding: 11px 13px; cursor: pointer; list-style: none; } .qn-fold > summary::-webkit-details-marker { display: none; } .qn-fold > summary:hover { background: #FCFBF9; border-radius: 10px; } .qn-fold > summary b { font-size: 13px; font-weight: 600; } .qn-fold > summary span { font-size: 11px; color: var(--text-3); } .qn-caret { margin-left: auto; flex: none; width: 7px; height: 7px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s; } .qn-fold[open] .qn-caret { transform: rotate(-135deg) translate(-2px, -2px); } .qn-fold-body { padding: 0 11px 11px; border-top: 1px solid var(--line-3); margin-top: -1px; padding-top: 11px; } /* 窄屏（手机）两列太挤，降为一列 */ @media (max-width: 420px) { .qn-grid { grid-template-columns: 1fr; } .qn-steps { gap: 4px; } .qn-step em { display: none; } } /* 合盘第二人信息弹窗 */ .pm-form label { display: block; font-size: 12.5px; color: var(--text-2); margin: 10px 0 0; } .pm-form label input { display: block; width: 100%; box-sizing: border-box; margin-top: 5px; padding: 9px 11px; font-size: 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--text); } .pm-form label input:focus { outline: none; border-color: var(--gold, #8a6a2f); } .pm-tip { font-size: 12.5px; line-height: 1.65; color: var(--text-2); background: #faf4e8; border: 1px solid #EFE1C4; border-radius: 9px; padding: 9px 11px; margin: 0 0 4px; } .pm-tip b { color: var(--gold-d, #8a6a2f); font-weight: 600; } /* ---------- 列表项 ---------- */ .row { padding: 12px 0; border-top: 1px solid var(--line-3); cursor: pointer; } .row:first-of-type { border-top: none; } /* 首页「客户交付文稿」里的快捷名单：行内嵌在卡片中，不参与整行点击跳转 */ .row.rp-pick { padding: 9px 0; cursor: default; } .row.rp-pick .row-head { font-size: 13.5px; } .row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .row-head b { font-size: 14.5px; font-weight: 500; } .row-sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; line-height: 1.6; } .row-acts { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; } .mini { font-size: 12px; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--line-2); color: var(--text-2); background: #fff; } .mini.danger { color: var(--danger); border-color: #EDD8D8; } .row-btns { display: flex; gap: 8px; margin-top: 9px; } /* 2026-10-07 改版：一排 4~5 个全金小按钮 = 没有重点。 现在默认中性（灰边灰字，hover 才泛金），只给 「交付文稿」这一类主动作保留金色底（.pri）—— 一行里最多一个金色，视线先落到该落的地方。 */ .mini-btn { font-size: 12px; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--text-2); background: #fff; font-weight: 500; transition: border-color .15s, color .15s, background .15s; } .mini-btn:hover { border-color: var(--gold); color: var(--gold); } .mini-btn.pri { border-color: var(--gold-line); color: #8a6a2f; background: #FBF8F2; } .mini-btn.pri:hover { border-color: var(--gold); color: #8a6a2f; filter: brightness(1.02); } /* ---------- 解盘客户上下文条 ---------- */ .chat-ctx { margin-bottom: 11px; } .ctx-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #FBF8F2; border: 1px solid var(--gold-line); border-radius: 10px; padding: 9px 11px; font-size: 12.5px; } .ctx-bar.empty { background: #f8f7f4; border-color: var(--line-2); } .ctx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; } .ctx-name { font-weight: 500; color: var(--ink); } .ctx-txt { color: var(--text-3); flex: 1 1 auto; min-width: 0; } .ctx-btn { font-size: 12px; padding: 4px 11px; border-radius: 7px; border: 1px solid var(--line-2); background: #fff; color: var(--text-2); flex: 0 0 auto; transition: border-color .16s, color .16s, background .16s; } .ctx-btn:hover { border-color: var(--gold-line); color: var(--gold); background: #FBF8F2; } /* 🔴 空态里的「选择客户」不是注释，是全页唯一的主入口（2026-10-18 用户：按钮不显眼）。 原来它跟「换人 / 解除」共用 11.5px 白底细边，视觉重量等于一条说明文字 —— 没绑客户的人根本不知道该先点它。这里给它全站 .btn 同一支深靛渐变 + 投影。 */ .ctx-btn.pri { font-size: 13px; font-weight: 500; letter-spacing: .3px; padding: 8px 16px; border-radius: 9px; color: #fff; border-color: transparent; background: linear-gradient(180deg, #262348 0%, var(--ink) 100%); box-shadow: 0 3px 10px rgba(27,24,48,.22); } .ctx-btn.pri:hover { filter: brightness(1.1); color: #fff; background: linear-gradient(180deg, #262348 0%, var(--ink) 100%); } .ctx-btn.pri:active { transform: translateY(1px); } /* 窄屏：提示文案换行后，按钮自己占一行撑满，别缩成一个小方块贴在右边 */ @media (max-width: 560px) { .ctx-bar.empty .ctx-btn.pri { width: 100%; margin-top: 2px; } } .pick-list { max-height: 46vh; overflow-y: auto; margin-top: 4px; } .pick-row { padding: 11px 2px; border-top: 1px solid var(--line-3); cursor: pointer; display: flex; flex-direction: column; gap: 2px; } .pick-row:first-child { border-top: none; } .pick-row b { font-size: 14px; font-weight: 500; } .pick-row span { font-size: 12px; color: var(--text-3); } .chat-save-bar { margin: 4px 0 12px; } /* ---------- 推理过程展示 ---------- */ /* 折叠式：默认只留一行「已思考 N 秒」，点开才看细节，正文出来自动收起 */ .think-box { background: #f8f7f4; border-left: 2px solid var(--line-2); border-radius: 0 8px 8px 0; padding: 8px 11px; } .think-head { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); cursor: pointer; user-select: none; } .think-caret { display: inline-block; width: 0; height: 0; border-left: 4px solid currentColor; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; transition: transform .18s ease; } .think-box.open .think-caret { transform: rotate(90deg); } .think-body { font-size: 12.5px; color: var(--text-2); line-height: 1.7; max-height: 240px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line); display: none; } .think-box.open .think-body { display: block; } /* 已收起的思考（正文到达后）：更轻，只作提示 */ .think-done { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); background: #f8f7f4; border-radius: 6px; padding: 4px 9px; margin-bottom: 9px; cursor: pointer; user-select: none; } .think-done:hover { background: #efebe5; } .think-note { font-size: 11.5px; color: var(--warn); margin-bottom: 7px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); } /* 等待期：动效 + 实时计时，避免用户误以为卡死 （模型首包要 7-10 秒，这段时间必须给明确反馈）*/ .wait-line { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 13.5px; } .wait-dots { display: inline-flex; gap: 3px; } .wait-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: .35; animation: waitPulse 1.2s ease-in-out infinite; } .wait-dots i:nth-child(2) { animation-delay: .18s; } .wait-dots i:nth-child(3) { animation-delay: .36s; } @keyframes waitPulse { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .wait-sec { font-variant-numeric: tabular-nums; color: var(--text-3); } .wait-hint { font-size: 11.5px; color: var(--text-3); margin-top: 6px; } /* ---------- 排盘 ---------- */ .ok-chip { background: #EAF3EA; color: #3D7A45; border-color: #CFE3D1; font-size: 11px; padding: 2px 7px; } .chart-preview { font-size: 12px; color: var(--text-2); line-height: 1.7; white-space: pre-wrap; word-break: break-word; max-height: 150px; overflow-y: auto; background: #f9f7f3; border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; } .chart-full { font-size: 13px; line-height: 1.75; color: var(--text); max-height: 60vh; overflow-y: auto; } .chart-full h1 { font-size: 16px; margin: 4px 0 9px; font-weight: 600; } .chart-full h2 { font-size: 14.5px; margin: 15px 0 8px; font-weight: 600; padding-bottom: 5px; border-bottom: 1px solid var(--line); } .chart-full h3 { font-size: 13.5px; margin: 12px 0 6px; font-weight: 600; } .chart-full table { width: 100%; border-collapse: collapse; margin: 9px 0; font-size: 12px; } /* ---------- 专题稿出稿回执 ---------- 出稿那一刻是用户最想看到东西的时刻（稿就在这儿、复制就能发）。 所以弹窗第一行先说「存哪了」，第二行给去档案的路径， 接着才是稿子正文和三个动作按钮。 */ .rp-done-t { font-size: 13.5px; color: var(--text); line-height: 1.7; background: #EAF3EA; border: 1px solid #CFE3D1; border-radius: 9px; padding: 10px 12px; margin-bottom: 8px; } .rp-done-t b { color: var(--ink); } .rp-done-meta { font-size: 12px; color: var(--text-3); margin-bottom: 11px; } .rp-done-md { font-size: 13.5px; line-height: 1.8; color: var(--text); max-height: 42vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; padding: 13px 14px; background: #fcfaf6; } .rp-done-md h1 { font-size: 15px; margin: 2px 0 8px; font-weight: 600; } .rp-done-md h2 { font-size: 14px; margin: 14px 0 7px; font-weight: 600; padding-bottom: 4px; border-bottom: 1px solid var(--line); } .rp-done-md h3 { font-size: 13px; margin: 11px 0 5px; font-weight: 600; } .rp-done-md p { margin: 0 0 9px; } .rp-done-md ul, .rp-done-md ol { margin: 0 0 9px; padding-left: 20px; } .rp-done-md blockquote { margin: 0 0 9px; padding: 2px 0 2px 11px; border-left: 3px solid var(--gold-line); color: var(--text-2); } .rp-done-md table { width: 100%; border-collapse: collapse; margin: 9px 0; font-size: 12.5px; } .rp-done-md th, .rp-done-md td { border: 1px solid var(--line); padding: 5px 7px; text-align: left; } .rp-done-btns { margin-top: 13px; } .rp-done-btns .btn { margin-bottom: 8px; } .chart-full th, .chart-full td { border: 1px solid var(--line); padding: 5px 7px; text-align: left; } .chart-full th { background: #f9f7f3; font-weight: 500; } .chart-full blockquote { margin: 8px 0; padding: 7px 11px; background: #f9f7f3; border-left: 2px solid var(--gold-line); color: var(--text-2); font-size: 12.5px; } .chart-full ul { padding-left: 20px; margin: 6px 0; } .chart-full li { margin-bottom: 3px; } .chart-full hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; } /* ---------- 对话 ---------- */ /* 2026-10-21 消息流挪到快捷指令区之后（页面最后一块），补一个与 .qn 的间距 */ .chat-stream { padding: 4px 0 8px; margin-top: 6px; } .msg { margin-bottom: 14px; display: flex; } .msg.u { justify-content: flex-end; } .bubble { max-width: 85%; padding: 11px 14px; border-radius: 13px; font-size: 14.5px; line-height: 1.72; word-break: break-word; } .msg.u .bubble { background: var(--ink); color: #fff; border-bottom-right-radius: 4px; } .msg.a .bubble { background: #fff; border: 1px solid var(--line); color: var(--text); border-bottom-left-radius: 4px; } .bubble h3 { font-size: 14.5px; font-weight: 500; margin: 12px 0 6px; } .bubble h3:first-child { margin-top: 0; } .bubble p { margin: 0 0 8px; } .bubble ul { margin: 6px 0 8px; padding-left: 20px; } .bubble li { margin-bottom: 3px; } .bubble table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13px; } .bubble th, .bubble td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; } .bubble th { background: #f9f7f3; font-weight: 500; } .thinking { color: var(--text-3); font-size: 13.5px; } .chat-foot { flex-shrink: 0; border-top: 1px solid var(--line); background: #fff; padding: 9px 13px calc(9px + env(safe-area-inset-bottom)); } .chat-in { display: flex; gap: 8px; align-items: flex-end; } .chat-in textarea { flex: 1; border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; font-size: 15px; line-height: 1.5; resize: none; max-height: 110px; color: var(--text); } .chat-in textarea:focus { outline: none; border-color: var(--gold); } .chat-in button { width: 40px; height: 40px; border-radius: 10px; background: var(--ink); color: #fff; flex-shrink: 0; font-size: 17px; } .chat-in button:disabled { opacity: .35; } .foot-note { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--text-3); } /* ---------- 落地页 ---------- */ /* 同上：装饰光晕在窄屏撑宽文档，clip 裁掉但保住 .lp-nav 的 sticky */ .lp { background: #fff; min-height: 100vh; overflow-x: clip; } .lp-nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.93); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .lp-nav-in { max-width: 1040px; margin: 0 auto; padding: 11px 20px; display: flex; align-items: center; gap: 10px; } .lp-logo { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 8px; } .lp-logo .mark { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%); display: flex; align-items: center; justify-content: center; } .lp-logo small { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-3); margin-top: 1px; } .lp-hero-wrap { max-width: 1040px; margin: 0 auto; padding: 42px 20px 28px; display: grid; gap: 34px; align-items: center; } @media (min-width: 880px) { .lp-hero-wrap { grid-template-columns: 1.02fr .98fr; padding-top: 62px; } } .lp-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--gold); font-weight: 500; background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: 999px; padding: 5px 14px; margin-bottom: 16px; } .lp-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } .lp-h1 { margin: 0 0 14px; font-size: clamp(27px, 6.6vw, 44px); line-height: 1.28; font-weight: 500; color: var(--ink); letter-spacing: .2px; } .lp-h1 em { font-style: normal; color: var(--gold); } .lp-sub { margin: 0 0 22px; max-width: 470px; font-size: 15px; line-height: 1.82; color: var(--text-2); } .lp-ctas { display: flex; gap: 11px; flex-wrap: wrap; } .lp-trust { display: flex; gap: 7px 16px; flex-wrap: wrap; margin-top: 17px; font-size: 12.5px; color: var(--text-2); } .lp-trust b { color: var(--gold); font-weight: 500; } .lp-shot { max-width: 470px; margin: 0 auto; } .shot { background: #fff; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; box-shadow: 0 14px 42px rgba(27,24,48,.11); } .shot-bar { display: flex; align-items: center; gap: 6px; padding: 9px 13px; background: #f3f0ea; border-bottom: 1px solid var(--line); } .shot-bar i { width: 9px; height: 9px; border-radius: 50%; } .shot-bar i:nth-child(1) { background: #E8A9A0; } .shot-bar i:nth-child(2) { background: #E8CF9A; } .shot-bar i:nth-child(3) { background: #A9CDB4; } .shot-url { margin-left: 8px; flex: 1; text-align: center; background: #fff; border-radius: 999px; padding: 3px 10px; font-size: 11px; color: var(--text-3); } .shot-body { padding: 15px 15px 13px; } .shot-msg { font-size: 13.5px; line-height: 1.65; padding: 9px 12px; border-radius: 11px; margin-bottom: 9px; } .shot-msg.u { background: var(--ink); color: #fff; margin-left: 40px; } .shot-msg.a { background: #f8f7f4; border: 1px solid var(--line); margin-right: 26px; } .shot-msg b { font-weight: 500; color: var(--gold); } .shot-msg.u b { color: #E8CF9A; } .shot-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; } .shot-grid span { font-size: 12px; padding: 5px 11px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-line); } .shot-tags { display: flex; border-top: 1px solid var(--line); background: #faf9f6; } .st-i { flex: 1; text-align: center; padding: 10px 6px; } .st-i + .st-i { border-left: 1px solid var(--line); } .st-t { font-size: 11px; color: var(--text-3); margin-bottom: 2px; } .st-v { font-size: 11.5px; color: var(--text-2); } .st-v b { font-weight: 500; color: var(--gold); } .lp-sec { max-width: 1040px; margin: 0 auto; padding: 40px 20px 6px; } .lp-kicker { display: inline-block; font-size: 12px; color: var(--gold); font-weight: 500; letter-spacing: .6px; margin-bottom: 9px; } .lp-h2 { margin: 0 0 7px; font-size: clamp(20px, 4.6vw, 26px); font-weight: 500; color: var(--ink); } .lp-d { margin: 0 0 20px; font-size: 14.5px; color: var(--text-2); line-height: 1.8; max-width: 620px; } .lp-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .lp-feat { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 16px 15px; } .lp-feat-n { font-size: 11.5px; color: var(--gold); font-weight: 500; letter-spacing: .5px; margin-bottom: 8px; } .lp-feat-t { font-size: 14.5px; font-weight: 500; margin-bottom: 5px; color: var(--ink); } .lp-feat-d { font-size: 12.5px; color: var(--text-2); line-height: 1.68; } .lp-quote { max-width: 1040px; margin: 0 auto; padding: 40px 20px 6px; } .lp-quote-in { background: var(--ink); border-radius: 17px; padding: 28px 24px; color: #fff; position: relative; overflow: hidden; } .lp-quote-in::before { content: '"'; position: absolute; left: 14px; top: 2px; font-size: 62px; color: rgba(184,137,74,.4); line-height: 1; font-family: Georgia, serif; } .lp-quote-k { font-size: 12px; color: var(--gold); margin-bottom: 11px; letter-spacing: .5px; } .lp-quote-tx { font-size: clamp(16px, 4.2vw, 21px); font-weight: 500; line-height: 1.68; position: relative; padding-left: 6px; } .lp-quote-d { font-size: 13px; opacity: .8; line-height: 1.8; margin-top: 11px; padding-left: 6px; } .lp-faq summary { padding: 14px 0; font-size: 14.5px; font-weight: 500; color: var(--ink); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); } .lp-faq summary::-webkit-details-marker { display: none; } .lp-faq summary::after { content: '+'; font-size: 18px; color: var(--text-3); font-weight: 400; } .lp-faq[open] summary::after { content: '\2212'; } .lp-faq p { margin: 0 0 14px; font-size: 13.5px; color: var(--text-2); line-height: 1.8; padding-top: 10px; } .lp-final { max-width: 1040px; margin: 0 auto; padding: 46px 20px 24px; } .lp-final-in { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%); border-radius: 20px; padding: 34px 22px 28px; text-align: center; color: #fff; } .lp-final-in h2 { margin: 0 0 8px; font-size: clamp(19px, 4.8vw, 25px); font-weight: 500; } .lp-final-in p { margin: 0 0 18px; font-size: 13.5px; opacity: .84; line-height: 1.7; } .lp-final-in .btn { background: var(--gold); color: #fff; padding: 13px 32px; font-size: 15px; } .lp-foot { text-align: center; font-size: 11.5px; color: var(--text-3); padding: 0 20px calc(26px + env(safe-area-inset-bottom)); line-height: 1.9; } @media (max-width: 879px) { .lp-shot { display: none; } .lp-hero-wrap { padding: 28px 18px 16px; } .lp-sec, .lp-quote { padding: 30px 18px 4px; } .lp-final { padding: 30px 18px 18px; } /* 手机端导航：标题不许被三个按钮挤成一字一行（真实反馈：微信内置浏览器 390px 下 .lp-logo flex:1 被压到几十像素，品牌名竖排）。改成内容宽 + 不换行，按钮收紧。 */ .lp-nav-in { padding: 10px 14px; gap: 8px; } .lp-logo { flex: 0 1 auto; white-space: nowrap; font-size: 14px; } .lp-logo small { display: none; } .lp-nav .btn.sm { padding: 7px 11px; font-size: 12.5px; } } /* 窄屏（<420px）：三个按钮放不下，隐藏「登录」——「免费开始」覆盖同一路径 （未登录跳登录页，已登录跳工作台），且已登录时登录按钮本来就会被 JS 隐藏。 同时收 hero 边距、压 h1 最小字号：360px 级小屏下「接单交付不该耗光你的时间」 12 字 × 27px ≈ 326px 会顶满 324px 可用宽，降到 24px 留出余量。 */ @media (max-width: 419px) { .lp-nav #navLogin { display: none; } .lp-hero-wrap { padding: 24px 16px 12px; } .lp-h1 { font-size: 24px; } .lp-sub { font-size: 14px; } } /* ---------- 服务页（对外名片） ---------- */ /* 🔴 overflow-x: clip 不是 hidden —— 装饰光晕 ::before( right:-120px / 420px) 在窄屏会把文档撑宽 120px（手机上整页能左右晃），必须裁掉；但 hidden 会把 这里变成滚动容器，直接废掉 .svc-anchor 的 position:sticky。clip 只裁不滚。 */ .svc-wrap { max-width: 620px; margin: 0 auto; padding: 20px 16px 40px; overflow-x: clip; } .svc-hero { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%); border-radius: 16px; padding: 20px 18px; color: #fff; margin-bottom: 13px; } .svc-role { font-size: 11.5px; opacity: .75; letter-spacing: .5px; margin-bottom: 7px; } .svc-name { font-size: 21px; font-weight: 500; line-height: 1.3; } .svc-chips { margin-top: 10px; } .chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .chip-row + .chip-row { margin-top: 7px; } .svc-chips span { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.15); color: #fff; } /* 行首类别标：实底金、深字，和后面的具体标签拉开层次 */ .svc-chips span.chip-cat { background: rgba(143,106,40,.95); color: #241F38; font-weight: 600; } .svc-bio { font-size: 13px; line-height: 1.75; margin-top: 10px; opacity: .92; white-space: pre-wrap; } .svc-count { font-size: 12px; margin-top: 9px; opacity: .78; } .svc-label { font-size: 12.5px; font-weight: 500; color: var(--ink); margin: 15px 0 7px; } .svc-label small { font-weight: 400; color: var(--text-3); } .pickrow { display: flex; flex-wrap: wrap; gap: 7px; } .pick { font-size: 12.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--text-2); } .pick.on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); font-weight: 500; } .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0 2px; } .toggle-row b { font-size: 13.5px; font-weight: 500; display: block; } .toggle-row span { font-size: 12px; color: var(--text-3); } .switch { flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .2s; } .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .switch.on { background: var(--gold); } .switch.on::after { left: 23px; } .act { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 2px; border-top: 1px solid var(--line-3); cursor: pointer; } .act:first-of-type { border-top: none; } .act b { font-size: 13.5px; font-weight: 500; display: block; } .act span { font-size: 12px; color: var(--text-3); display: block; margin-top: 2px; word-break: break-all; } /* 分享图预览：图是 1080×1440 的竖向海报，按 100% 宽铺在手机上会比屏幕 还高一大截，弹层里只能看到上半张、按钮要滚很远才够得着。 桌面照旧铺满，窄屏改「以高度为准」缩放（见下方 @media 480）。 */ .poster-mask { display: flex; justify-content: center; } .poster-mask img { display: block; width: 100%; max-width: 100%; border-radius: 10px; } /* ---------- 名片标签：资质 / 擅长 靠前缀 + 配色区分，不然混在一排看不出差别 ---------- */ .svc-chips span.k-cred { background: rgba(184,137,74,.42); } .svc-chips span.k-focus { background: rgba(255,255,255,.15); } /* 自定义标签输入行（预置项覆盖不到的直接手打） */ .addrow { display: flex; gap: 8px; margin-top: 9px; } .addrow input { flex: 1; min-width: 0; font-size: 13px; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; color: var(--text); font-family: inherit; } .addrow button { flex: none; padding: 0 15px; border-radius: 9px; font-size: 13px; border: 1px dashed var(--gold); background: #fff; color: var(--gold); } .pick.custom { border-style: dashed; border-color: var(--gold); color: var(--gold); } /* ---------- 分享弹窗（文案 + 链接 / 分享图选版式） ---------- */ .sx-copy { width: 100%; min-height: 96px; resize: vertical; box-sizing: border-box; font-size: 14px; line-height: 1.75; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--text); font-family: inherit; } .sx-link { font-size: 12.5px; color: var(--text-2); line-height: 1.7; background: #f8f7f4; border-radius: 9px; padding: 9px 11px; word-break: break-all; } /* 「客户该怎么装」的步骤摘要，客户照着点就行 */ .sx-steps { font-size: 12.5px; color: var(--text-2); line-height: 1.9; background: #FBF6EE; border-left: 3px solid var(--gold-line); border-radius: 0 9px 9px 0; padding: 9px 12px; } .ptabs { display: flex; gap: 7px; margin-bottom: 11px; } .ptab { flex: 1; font-size: 12.5px; padding: 8px 0; border-radius: 9px; border: 1px solid var(--line-2); background: #fff; color: var(--text-2); } .ptab.on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); font-weight: 500; } .px-copy { font-size: 12.5px; color: var(--text-2); line-height: 1.75; background: #f8f7f4; border-radius: 9px; padding: 10px 12px; margin-top: 11px; } .px-row { display: flex; gap: 9px; margin-top: 13px; } .px-row .btn { flex: 1; } /* ---------- 窄屏弹层压缩（≤480px 视口）---------- 分享/线索/解锁码等弹层在手机上容易顶满 88vh，底部按钮被切掉。 统一压 padding、字号、边距，并允许宽按钮文案换行，避免溢出。 */ @media (max-width: 480px) { .mask { padding: 10px; } .modal { padding: 14px; border-radius: 14px; } .modal-head { margin-bottom: 10px; } .modal-head h3 { font-size: 15.5px; } .modal-x { font-size: 20px; } .btn.wide { padding: 10px 14px; font-size: 14px; white-space: normal; } .sx-copy { min-height: 70px; padding: 8px 10px; font-size: 13.5px; } .sx-link { padding: 8px 10px; font-size: 12px; } .svc-label { margin: 12px 0 6px; font-size: 12px; } .svc-label small { font-size: 11px; } /* 分享图以高度为准缩放：整张一屏看全，底部按钮不用滚到屏外 */ .poster-mask img { width: auto; max-width: 100%; max-height: 42vh; } .ptabs { gap: 6px; margin-bottom: 9px; } .ptab { font-size: 12px; padding: 7px 0; } .px-copy { font-size: 12px; padding: 8px 10px; margin-top: 9px; } .px-row { margin-top: 10px; } .px-row .btn { padding: 10px 8px; font-size: 13.5px; } } /* ---------- 桌面端宽度适配（≥1040px 视口）---------- 外壳放宽到 860px 之后，单列列表会被拉成一条长横带 —— 那正是「铺满」的毛病。 所以宽度不是白给的：把列表类容器变两列，把多出来的空间真正用起来。 断点跟着外壳的 1040px 走，两处必须一起改，否则会出现 「已经两列了却还顶着边框」或「已经放宽了却还是单列」的错位。 */ @media (min-width: 1040px) { /* 只给「纯列表卡」分栏：用 .cu-list 显式标记，不用 #viewCust .card 这种父级通配。 原因：客户页里还有说明卡和空状态卡（内容不到一行），通配会把它们也撕成两半。 app.js 里三处列表卡（全部客户 / 订单 / 线索）都加了 .cu-list。 */ .cu-list { display: grid; grid-template-columns: 1fr 1fr; } /* 边框：奇数行是每对第一行（上边是空白，不画）；偶数行是第二行（补上边框 + 左分隔线） */ .cu-list > .row { border-top: 1px solid var(--line-3); padding: 13px 16px 13px 0; } .cu-list > .row:nth-child(2n) { border-left: 1px solid var(--line-3); padding-left: 16px; padding-right: 0; } .cu-list > .row:nth-child(2n+1) { border-top: none; } /* 行数是奇数时，最后一个孤零零占左列，右列留空——这是可接受的， 总比硬凑成一行、把两个人的信息挤在一起强。 */ /* 首页「客户交付文稿」快捷名单：同样两列 */ .rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .rp-grid .row.rp-pick { border-top: 1px solid var(--line-3); padding: 12px 0; } .rp-grid .row.rp-pick:nth-child(-n+2) { border-top: none; } } /* ---------- 盘面弹窗：星盘图 / 文稿 双视图 ---------- */ .cv-tabs { display: inline-flex; gap: 4px; margin-bottom: 12px; background: #efebe5; border-radius: 9px; padding: 3px; } .cv-tabs button { padding: 6px 16px; font-size: 13px; border-radius: 7px; color: var(--text-2); transition: background .15s, color .15s; } .cv-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(27, 24, 48, .07); } .cv-loading { padding: 40px 0; text-align: center; color: var(--text-3); font-size: 13.5px; } .cv-loading.err { color: var(--danger); line-height: 1.9; } /* ---------- 星盘图（assets/wheel.js） ---------- */ /* 目标：干净清爽。全部走现有配色变量，不另起一套颜色，免得和全站打架。 */ .wh-head { margin-bottom: 12px; } .wh-name { font-size: 17px; font-weight: 600; color: var(--ink); } .wh-sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; line-height: 1.7; } .wh-warn { font-size: 12.5px; color: var(--warn); background: #FBF3E6; border: 1px solid var(--gold-line); border-radius: 9px; padding: 9px 11px; margin-top: 10px; line-height: 1.7; } .wh-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; } .wh-canvas { line-height: 0; } /* 去掉 svg 下方的行内间隙 */ .wh-svg { width: 100%; height: auto; display: block; } /* SVG 内的文字统一在这里定义：写在