/* ============================================================ VEX 客服工作台（H5） 移动端优先 · 浅色卡片风 · 按钮 ≥44px / 列表点击区 ≥48px 主色 #2F6BFF 成功 #36B37E 警告 #FF8A00 危险 #E5484D ============================================================ */ :root{ --brand:#2F6BFF; --brand-soft:#EAF1FF; --ok:#36B37E; --warn:#FF8A00; --bad:#E5484D; --bg:#F5F7FA; --card:#FFFFFF; --txt:#1B2333; --txt2:#5A6580; --txt3:#97A0B5; --line:#EEF1F6; --surface:#FFFFFF; /* 卡片/输入/弹层/底部Tab 的面色 */ --soft:#F2F5FA; /* 标签/状态徽标的浅底 */ --soft2:#F7F9FC; /* 备注条浅底 */ --bar-bg:#F0F3F8; --danger-bg:#FFF1F1; --overdue-bg:#FFF7F7; --skel-a:#F0F3F8; --skel-b:#E6EBF2; --login-a:#F7F9FC; --login-b:#EEF2FA; --tb-a:#2F6BFF; --tb-b:#5B8DFF; /* 顶部渐变 */ --radius:14px; --shadow:0 2px 12px rgba(27,35,51,.06); --safe-b:env(safe-area-inset-bottom, 0px); --safe-t:env(safe-area-inset-top, 0px); } /* ---------------- H5 深色主题（与 PC 后台「暗夜」配套） ---------------- */ [data-theme="dark"]{ --brand:#5B8DFF; --brand-soft:rgba(91,141,255,.16); --ok:#3ecf8e; --warn:#ffa940; --bad:#ff6b70; --bg:#0e1320; --card:#161d2e; --txt:#e6ebf5; --txt2:#9aa6bd; --txt3:#66738a; --line:#232c42; --surface:#161d2e; --soft:#1e2740; --soft2:#1a2236; --bar-bg:#1e2740; --danger-bg:rgba(229,72,77,.10); --overdue-bg:rgba(229,72,77,.08); --skel-a:#1a2236; --skel-b:#232c42; --login-a:#0e1320; --login-b:#131a2c; --tb-a:#1b2b5e; --tb-b:#2f4aa8; --shadow:0 2px 14px rgba(0,0,0,.35); color-scheme:dark; } /* ---------------- H5 粉色主题（樱花粉 · 浅色系） ---------------- */ [data-theme="pink"]{ --brand:#E84393; --brand-soft:#FCE9F1; --ok:#36B37E; --warn:#FF8A00; --bad:#E5484D; --bg:#FDF3F7; --card:#FFFFFF; --txt:#33202B; --txt2:#7A5E6C; --txt3:#B296A3; --line:#F5E2EA; --surface:#FFFFFF; --soft:#FAEBF2; --soft2:#FDF4F8; --bar-bg:#F8EBF2; --danger-bg:#FFF1F1; --overdue-bg:#FFF7F7; --skel-a:#F8EBF2; --skel-b:#F1DCE6; --login-a:#FDF6F9; --login-b:#F8EBF2; --tb-a:#E84393; --tb-b:#F07EB0; /* 顶部渐变 */ --shadow:0 2px 12px rgba(122,42,74,.08); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0;min-height:100%} body{ background:var(--bg); color:var(--txt); font:14px/1.6 -apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; } /* 底部留白只给工作台主区：挂在 body 上会让登录页（本身已是 100vh） 多出 58px 空白条，页面能上下微滚 */ #main{padding-bottom:calc(58px + var(--safe-b))} .hidden{display:none !important} h1,h2,h3,h4{margin:0;font-weight:600} p{margin:0} button,input,select,textarea{font-family:inherit;font-size:14px;color:var(--txt)} input,select,textarea{ width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px; padding:11px 12px;outline:none; } input:focus,select:focus,textarea:focus{border-color:var(--brand)} textarea{min-height:84px;resize:vertical} .muted{color:var(--txt2)} .mini{font-size:12px} /* ---------------- 按钮 ---------------- */ .btn{ min-height:44px;border:1px solid var(--line);background:var(--surface);color:var(--txt); padding:0 16px;border-radius:10px;cursor:pointer;font-size:14px; } .btn:active{opacity:.86} .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600} .btn.ghost{background:transparent} .btn.sm{min-height:34px;padding:0 12px;font-size:13px;border-radius:8px} .btn.block{width:100%;margin-top:8px} .btn[disabled]{opacity:.55} .btn.danger{color:var(--bad);border-color:rgba(229,72,77,.35);background:rgba(229,72,77,.06)} /* ---------------- 登录 ---------------- */ .login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(180deg,var(--login-a),var(--login-b))} .login-card{width:100%;max-width:400px} /* 品牌主标：H5 登录页（手机首次打开就看得到） */ .login-logo{width:88px;height:88px;border-radius:22px;object-fit:cover;display:block; margin:0 auto 14px;box-shadow:0 10px 26px rgba(47,107,255,.3)} .login-title{font-size:22px;font-weight:700;text-align:center;margin-bottom:6px} .login-sub{text-align:center;color:var(--txt3);font-size:13px;margin-bottom:26px} .panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 18px} .field{margin-bottom:14px} .field label{display:block;font-size:14px;font-weight:600;color:var(--txt);margin-bottom:6px} .field label .req{color:var(--bad);font-weight:800;margin-left:1px} .field.req label{font-size:15px;font-weight:700} .field.req label .req{color:var(--bad)} .check{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px;color:var(--txt2)} .check input{width:18px;height:18px;min-height:0} .tip{min-height:20px;margin-top:10px;font-size:13px;color:var(--bad);text-align:center} .login-foot{margin-top:14px;text-align:center;font-size:12px;color:var(--txt3)} /* ---------------- 顶部 ---------------- */ .topbar{ position:sticky;top:0;z-index:30;background:linear-gradient(135deg,var(--tb-a),var(--tb-b)); color:#fff;padding:calc(12px + var(--safe-t)) 16px 16px; } .topbar .row{display:flex;justify-content:space-between;align-items:center;gap:10px} /* 顶栏品牌标：手机端常显（PC 端侧栏已有 logo，藏掉避免一处两显） */ .tb-logo{width:34px;height:34px;flex:0 0 34px;border-radius:9px;object-fit:cover;display:block; border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);box-shadow:0 3px 10px rgba(0,0,0,.16)} .tb-title{flex:1;min-width:0} .topbar h2{font-size:19px;font-weight:600} .topbar .sub{font-size:12.5px;opacity:.9;margin-top:2px} .avatar{ width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center; font-size:14px;font-weight:600;flex:0 0 38px;cursor:pointer; } .avatar-box{display:flex;align-items:center;gap:4px} .linkout{background:transparent;border:none;color:#fff;font-size:12px;opacity:.92;padding:6px 2px;cursor:pointer;min-height:44px} .theme-btn{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:13px;border-radius:999px;width:34px;height:34px;cursor:pointer;flex:0 0 34px} .theme-btn.login-float{position:fixed;top:calc(12px + var(--safe-t));right:14px;z-index:20;background:var(--surface);color:var(--txt2);border-color:var(--line);box-shadow:var(--shadow)} /* ---------------- 内容 ---------------- */ .wrap{padding:12px 12px 20px;display:flex;flex-direction:column;gap:12px} .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px} .card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px} .card-head h3{font-size:16px} .card-head .more{font-size:12px;color:var(--txt3)} /* 「我负责的店铺」胶囊（第三十四轮）：老板在后台分配店铺后，客服端要看得见 */ .shop-chips{display:flex;flex-wrap:wrap;gap:8px} .shop-chip{display:inline-flex;align-items:center;background:var(--soft);border:1px solid var(--line); border-radius:999px;padding:6px 12px;font-size:13px;color:var(--txt2);line-height:18px} .shop-chip i{font-style:normal;opacity:.55;margin:0 2px} .shop-chip.main{background:var(--brand-soft);border-color:transparent;color:var(--brand);font-weight:600} .shop-chip em{font-style:normal;font-size:11px;background:var(--brand);color:#fff; border-radius:999px;padding:0 6px;margin-left:5px;line-height:16px} /* 客户详情弹层里的章节标题：此前 JS 用了 .sec-title 但 CSS 没定义， 只能靠内联 style 撑着，与其余章节标题的间距字重不一致 */ .sec-title{display:flex;justify-content:space-between;align-items:center;gap:8px} .sec-title h3{font-size:14px;font-weight:600;color:var(--txt)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} /* 数据小卡 */ .metric{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px} .metric .lb{font-size:12px;color:var(--txt3);display:flex;align-items:center;gap:6px} .metric .vl{font-size:24px;font-weight:700;line-height:1.25;margin-top:4px;letter-spacing:-.5px} .metric .ex{font-size:12px;color:var(--txt2);margin-top:2px} .metric.alert .vl{color:var(--bad)} .metric.warn .vl{color:var(--warn)} .metric.ok .vl{color:var(--ok)} .metric.money .vl{font-size:26px;color:var(--brand)} .badge-red{ background:var(--bad);color:#fff;font-size:11px;border-radius:999px;padding:1px 7px;font-weight:600; } /* 进度条 */ .prog{margin-bottom:12px} .prog:last-child{margin-bottom:0} .prog-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;gap:8px} .prog-top .r{color:var(--txt2)} .prog-top .r b{color:var(--txt)} .bar{height:8px;background:var(--bar-bg);border-radius:999px;overflow:hidden} .bar i{display:block;height:100%;border-radius:999px;background:var(--brand);transition:width .3s} .bar.ok i{background:var(--ok)} .bar.warn i{background:var(--warn)} .bar.bad i{background:var(--bad)} /* 评级 */ .grade{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;font-size:20px;font-weight:700;color:#fff} .grade.S{background:linear-gradient(135deg,var(--brand),var(--tb-b))} .grade.A{background:var(--ok)} .grade.B{background:var(--warn)} .grade.C{background:var(--bad)} .grade.D{background:var(--txt3)} /* 预警条 */ .alert-bar{ background:var(--danger-bg);border:1px solid rgba(229,72,77,.28);border-left:4px solid var(--bad); border-radius:12px;padding:12px 14px; } .alert-bar .t{font-size:14px;font-weight:600;color:var(--bad);margin-bottom:6px} .alert-row{display:flex;justify-content:space-between;align-items:center;min-height:44px;font-size:13.5px;border-top:1px dashed rgba(229,72,77,.22);cursor:pointer} .alert-row:first-of-type{border-top:none} .alert-row b{color:var(--bad)} .alert-row .go{color:var(--txt3);font-size:12px} /* 快捷操作 */ .quick{display:grid;grid-template-columns:1fr 1fr;gap:10px} /* 首页「快捷操作 + 今日千牛」分组：手机上下堆叠（与原来完全一致）， PC 段里改成一左一右并排 —— 同一个 DOM，只换排版 */ .h-row2{display:flex;flex-direction:column;gap:12px} .qbtn{ min-height:56px;background:var(--surface);border:1px solid var(--line);border-radius:12px; display:flex;align-items:center;gap:10px;padding:0 12px;cursor:pointer;box-shadow:var(--shadow); } .qbtn i{font-style:normal;font-size:18px;color:var(--brand)} .qbtn span{font-size:14px} /* 横向筛选标签 */ .chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;-webkit-overflow-scrolling:touch} .chips::-webkit-scrollbar{display:none} .chip{ flex:0 0 auto;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line); background:var(--surface);color:var(--txt2);font-size:13px;cursor:pointer; } .chip.active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600} /* 「归属客服」筛选：只在管理角色（老板/管理员）进客户页时出现。 与上面那排客户状态筛选用一条细线隔开，否则两排同款胶囊会被当成同一组。 */ .owner-chips{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);align-items:center} .chips-lb{flex:0 0 auto;font-size:12px;color:var(--txt3);padding-right:2px} .search{display:flex;gap:8px;margin-bottom:10px} .search input{flex:1;min-height:44px} /* 列表项 */ .item{ display:flex;justify-content:space-between;align-items:center;gap:10px; min-height:56px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer; } .item:last-child{border-bottom:none} .item .l{min-width:0;flex:1} .item .l b{display:block;font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .item .l span{font-size:12px;color:var(--txt3);display:block;margin-top:2px} .item .r{text-align:right;flex:0 0 auto} .item .r b{font-size:14px} .item .r span{display:block;font-size:12px;color:var(--txt3);margin-top:2px} .item.overdue{border:1px solid rgba(229,72,77,.4);border-radius:12px;padding:12px 10px;margin-bottom:8px;background:var(--overdue-bg)} .item.overdue:last-child{margin-bottom:0} .tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:6px;background:var(--soft);color:var(--txt2);margin-right:4px} .tag.blue{background:var(--brand-soft);color:var(--brand)} .tag.green{background:rgba(54,179,126,.12);color:var(--ok)} .tag.orange{background:rgba(255,138,0,.12);color:var(--warn)} .tag.red{background:rgba(229,72,77,.10);color:var(--bad)} .st{font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--soft);color:var(--txt2)} .st.待完成{background:var(--brand-soft);color:var(--brand)} .st.处理中{background:rgba(255,138,0,.12);color:var(--warn)} .st.已完成{background:rgba(54,179,126,.12);color:var(--ok)} .st.超时{background:rgba(229,72,77,.12);color:var(--bad)} .st.待派单{background:rgba(255,138,0,.12);color:var(--warn)} .st.服务中,.st.派单中{background:var(--brand-soft);color:var(--brand)} .st.售后处理{background:rgba(229,72,77,.12);color:var(--bad)} /* 订单状态枚举里有「关闭」，此前漏了样式，会落回默认灰底与「售后处理」区分不开 */ .st.关闭{background:var(--soft);color:var(--txt3)} /* KV 行 */ .kv{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px} .kv:last-child{border-bottom:none} .kv b{font-weight:600} .kv .bad{color:var(--bad)} .kv .ok{color:var(--ok)} /* 折叠面板 */ .fold{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)} .fold-head{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:0 14px;cursor:pointer;font-size:14px;font-weight:600} .fold-body{padding:0 14px 14px;font-size:13px;color:var(--txt2);line-height:1.9} .fold-body b{color:var(--txt)} /* 空状态 / 加载 */ .empty{text-align:center;color:var(--txt3);font-size:13px;padding:26px 10px} .empty .btn{margin-top:12px} .empty b{color:var(--txt2);font-weight:600} /* 加载态：H5 网络更慢，先给反馈再出内容 */ .loading-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:40px 12px;color:var(--txt3);font-size:13px} .spinner{width:15px;height:15px;flex:0 0 auto;border:2px solid var(--line2);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .spinner.sm{width:12px;height:12px} .skel{background:linear-gradient(90deg,var(--skel-a) 25%,var(--skel-b) 37%,var(--skel-a) 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:10px} @keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}} .skel-card{height:96px;margin-bottom:12px} .skel-line{height:16px;margin-bottom:10px} .pull{text-align:center;font-size:12px;color:var(--txt3);padding:10px 0} .load-more{text-align:center;padding:14px 0} /* 底部 Tab */ .tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); background:var(--surface);border-top:1px solid var(--line);padding-bottom:var(--safe-b); } .tab{min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--txt3);cursor:pointer;font-size:11px} .tab i{font-style:normal;font-size:18px;line-height:1} .tab.active{color:var(--brand);font-weight:600} /* 弹层 */ .mask{position:fixed;inset:0;background:rgba(15,22,36,.45);z-index:50} .sheet{ position:fixed;left:0;right:0;z-index:51;background:var(--surface);border-radius:18px 18px 0 0; padding:16px 16px calc(16px + var(--safe-b));overflow:auto; /* --kb：软键盘占掉的高度（由 JS 从 visualViewport 实时写入，默认 0）。 底部弹层是 position:fixed，键盘弹起时它**不会自己上移** —— 不减掉这块，键盘就正好盖住弹层下半部的输入框， 用户「打了一屏字却什么都看不见」。 */ bottom:var(--kb, 0px); max-height:min(88vh, calc(100vh - var(--kb, 0px) - 12px)); } .sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .sheet-head h3{font-size:17px} .sheet-foot{display:flex;gap:10px;margin-top:8px} .sheet-foot .btn{flex:1} .note{background:var(--soft2);border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:13.5px} .note .at{font-size:11.5px;color:var(--txt3);margin-top:4px} /* toast */ .toast{ position:fixed;left:50%;transform:translateX(-50%);bottom:calc(80px + var(--safe-b)); background:rgba(27,35,51,.94);color:#fff;padding:11px 18px;border-radius:999px;font-size:13.5px;z-index:60; box-shadow:0 6px 20px rgba(0,0,0,.2); } .toast.err{background:var(--bad)} .toast.ok{background:var(--ok)} /* ---------------- Tab5 短视频投产助手 ---------------- */ .sv-card{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;background:var(--surface)} .sv-card:last-of-type{margin-bottom:0} .sv-head{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px} .sv-title{font-size:14.5px;font-weight:600;line-height:1.5;margin-bottom:4px} .sv-stats{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--txt2);margin:8px 0;font-variant-numeric:tabular-nums} .sv-actions{display:flex;gap:8px} .sv-actions .btn{flex:1} .pkg-text{white-space:pre-wrap;word-break:break-word;line-height:1.8;font-size:13px} .st.已生成{background:var(--brand-soft);color:var(--brand)} .st.已采用{background:rgba(54,179,126,.12);color:var(--ok)} .st.已废弃{background:var(--soft);color:var(--txt3)} /* 中屏（窄窗口 / 平板竖屏）：保留手机版观感，居中一列。 注意上限必须封到 PC 断点下方，否则会和下面的 PC 布局同时命中， 两边都生效（PC 的 grid 与这里的 max-width 互相打架）。 */ @media (min-width:721px) and (max-width:999px){ body{max-width:480px;margin:0 auto;background:var(--login-b)} .tabbar{max-width:480px;left:50%;right:auto;transform:translateX(-50%);width:100%} .topbar{max-width:480px;left:50%;right:auto;transform:translateX(-50%);width:100%} } /* ============================================================ PC 端布局（≥1000px）—— 「客服在电脑前也要好用」 ------------------------------------------------------------ 修订前这里是一条 `body{max-width:480px}`：电脑上打开客服工作台， 只是把手机页居中摆着，两边留一大片空白，横向空间全浪费。 现在宽屏改为「侧栏 + 内容区」的桌面布局，并把各 Tab 换成多栏： 首页 → KPI 四列 + 快捷操作/千牛并排 绩效 → 左 KPI / 右千牛+趋势 客户 → 左列表 / 右详情（不再用底部弹层） 任务 → 宽表格 短视频 → 素材卡双列 断点以下的 DOM 完全一致，只是 CSS 不再拉伸它。 ============================================================ */ /* 两处仅 PC 可见的容器：默认关掉，PC 段里再打开。 必须写在媒体查询**之前** —— 同权重下后写的会赢， 写在后面会把 PC 的 display 覆盖掉（「代码里有、界面上没有」）。 */ .sidenav{display:none} .tb-tools{display:none} @media (min-width:1000px){ html{background:var(--bg)} body{background:var(--bg)} /* ---------- 骨架：左固定侧栏 + 右内容 ---------- */ #main{display:grid;grid-template-columns:216px minmax(0,1fr);align-items:start; min-height:100vh;padding-bottom:0} .main-col{min-width:0;display:flex;flex-direction:column;min-height:100vh} .tabbar{display:none} .pull{display:none} /* 桌面没有下拉手势，改用工具区的「刷新」 */ /* ---------- 侧栏 ---------- */ .sidenav{ display:flex;flex-direction:column;gap:4px; position:sticky;top:0;height:100vh;box-sizing:border-box; padding:16px 12px 14px;background:var(--card);border-right:1px solid var(--line); } .sn-logo{display:flex;align-items:center;gap:8px;padding:4px 8px 16px} .sn-logo-img{width:26px;height:26px;flex:0 0 26px;border-radius:7px;object-fit:cover;display:block} .sn-mark{font-size:19px;font-weight:800;letter-spacing:.5px;color:var(--brand)} .sn-sub{font-size:12px;color:var(--txt3)} .sn-nav{display:flex;flex-direction:column;gap:2px} .sn-item{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 10px; border-radius:10px;cursor:pointer;color:var(--txt2);font-size:14px} .sn-item:hover{background:var(--soft);color:var(--txt)} .sn-item.active{background:var(--brand-soft);color:var(--brand);font-weight:600} .sn-ic{font-style:normal;font-size:15px;width:18px;text-align:center;flex:0 0 18px} .sn-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sn-badge{flex:0 0 auto;background:var(--bad);color:#fff;font-size:11px;font-weight:600; border-radius:999px;padding:1px 7px} .sn-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:12px} .sn-me{display:flex;align-items:center;gap:9px;padding:0 6px 10px;min-width:0} .sn-ava{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--brand-soft); color:var(--brand);display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700} .sn-me b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sn-me span{display:block;font-size:11.5px;color:var(--txt3)} .sn-btns{display:flex;gap:6px} .sn-btn{flex:1;min-height:34px;border:1px solid var(--line);background:var(--surface); color:var(--txt2);border-radius:8px;font-size:12.5px;cursor:pointer} .sn-btn:hover{border-color:var(--brand);color:var(--brand)} /* ---------- 顶栏改为浅色应用条（宽屏下蓝色渐变太重） ---------- */ .topbar{position:sticky;top:0;z-index:30;background:var(--card);color:var(--txt); border-bottom:1px solid var(--line);padding:14px 24px} .topbar h2{font-size:19px;color:var(--txt)} .topbar .sub{font-size:12.5px;color:var(--txt3);opacity:1;margin-top:2px} .tb-logo{display:none} /* PC 侧栏已有 logo，顶栏不再重复 */ .avatar-box{display:none} /* 用户信息移到侧栏底部，避免一处两显 */ .tb-tools{display:flex;align-items:center;gap:10px;margin-left:auto;padding-right:4px} .tb-tools .btn{min-height:34px} .tb-kbd{font-size:11.5px;color:var(--txt3)} .tb-kbd kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:5px; padding:0 5px;font-size:11px;background:var(--soft)} /* ---------- 内容区：统一限宽，避免 4K 屏上横向拉成一条 ---------- */ .wrap{max-width:1560px;width:100%;padding:20px 24px 32px;gap:14px} /* ---------- 首页：KPI 四列，快捷操作与千牛并排 ---------- */ #body.page-home .grid2{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} #body.page-home .metric{padding:16px 18px} #body.page-home .metric .vl{font-size:28px} .h-row2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:start} #body.page-home .quick{grid-template-columns:1fr 1fr} .alert-row{min-height:40px} /* ---------- 绩效：左 KPI / 右 千牛+趋势 ---------- */ /* 用显式 grid-row/column 而不是 :nth-child 定位： 卡片顺序以后调整时不会误伤，且视觉顺序（按行读）与 DOM 顺序一致 */ #body.page-perf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:14px;align-items:start} #body.page-perf .p-kpi{grid-column:1;grid-row:1} #body.page-perf .p-qn{grid-column:2;grid-row:1} #body.page-perf .p-chart{grid-column:1;grid-row:2} #body.page-perf .p-fold{grid-column:2;grid-row:2} /* ---------- 客户：左列表 + 右详情（不再弹层遮住列表） ---------- */ #body.page-crm{display:grid;grid-template-columns:minmax(0,1fr);gap:14px} .crm-body{display:grid;grid-template-columns:380px minmax(0,1fr);gap:14px;align-items:start} .crm-list .item{padding:11px 4px} .crm-list .item.active{background:var(--brand-soft);border-radius:10px; border-bottom-color:transparent;padding-left:10px;padding-right:10px} .crm-detail{max-height:calc(100vh - 172px);overflow:auto} .crm-detail .item{cursor:default} /* ---------- 任务：宽表格 ---------- */ .tbl-wrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)} .dtbl{width:100%;border-collapse:collapse;font-size:13.5px} .dtbl th{text-align:left;font-weight:600;font-size:12.5px;color:var(--txt3); background:var(--soft);padding:10px 12px;white-space:nowrap} .dtbl td{padding:11px 12px;border-top:1px solid var(--line);vertical-align:middle} .dtbl tr:hover td{background:var(--soft2)} .dtbl td.ops{white-space:nowrap;text-align:right} .dtbl td.ops .btn{margin-left:6px} .dtbl .t-title{font-weight:600;min-width:200px} .dtbl .t-dim{color:var(--txt3);font-size:12.5px} .dtbl tr.overdue td{background:var(--overdue-bg)} /* ---------- 短视频：素材卡双列 ---------- */ .sv-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .sv-list .sv-card{margin-bottom:0} .sv-card .sv-actions .btn{flex:0 0 auto} .chips{flex-wrap:wrap;overflow:visible} /* ---------- 弹层在宽屏收敛成居中对话框（底部抽屉是手机形态） ---------- */ .sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%); width:640px;max-width:92vw;max-height:86vh;border-radius:16px} .sheet-foot .btn{flex:0 0 auto;min-width:120px;margin-left:auto} .sheet-foot{justify-content:flex-end} .toast{bottom:32px} } /* ============================================================ 「使用手册」入口（第十八轮） 手册入口是 ，复用了 .qbtn / .sn-btn / .linkout 三套 按钮样式。这三个类原本只服务