/* 中迅农科 · 外呼平台 绿主题样式 */ :root { --green-50: #E8F5E9; --green-100: #C8E6C9; --green-300: #81C784; --green-500: #4CAF50; --green-600: #43A047; --green-700: #2E7D32; --green-800: #1B5E20; --green-900: #0F3D14; --text: #1F2A24; --text-mute: #5C6B62; --bg: #F4F8F5; --card: #FFFFFF; --border: #E0EAE2; --warn: #F57C00; --danger: #C62828; --shadow: 0 2px 12px rgba(17, 40, 24, 0.06); --radius: 8px; /* 品牌主题色（随 html[data-theme] 切换） */ --brand-1: #1B5E20; --brand-2: #43A047; --brand-soft: #E8F5E9; --brand-line: #C8E6C9; --brand-text: #2E7D32; } :root[data-theme="blue"] { --brand-1:#0D47A1; --brand-2:#1E88E5; --brand-soft:#E3F2FD; --brand-line:#BBDEFB; --brand-text:#1565C0; } :root[data-theme="orange"] { --brand-1:#BF360C; --brand-2:#FB8C00; --brand-soft:#FFF3E0; --brand-line:#FFE0B2; --brand-text:#E65100; } :root[data-theme="purple"] { --brand-1:#4A148C; --brand-2:#8E24AA; --brand-soft:#F3E5F5; --brand-line:#E1BEE7; --brand-text:#6A1B9A; } * { box-sizing: border-box; } /* 关键：hidden 属性必须能覆盖 .app/.login-wrap/.modal-root 里的 display，否则登录页与主界面会叠在一起 */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; } /* ===== 登录 ===== */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--green-700), var(--green-500)); } .login-card { background: var(--card); padding: 36px 32px; border-radius: var(--radius); box-shadow: var(--shadow); width: 380px; max-width: 90vw; text-align: center; } .login-logo { width: 72px; height: 72px; margin-bottom: 12px; } .login-card h1 { font-size: 18px; color: var(--green-800); margin: 0 0 4px; } .login-sub { color: var(--text-mute); margin: 0 0 20px; font-size: 12px; } .field { margin-bottom: 14px; text-align: left; } .field label { display: block; font-size: 12px; color: var(--text-mute); margin-bottom: 4px; } .field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; outline: none; background: #FAFCFA; transition: border .15s; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-500); } .field textarea { resize: vertical; min-height: 80px; font-family: inherit; } .error { color: var(--danger); font-size: 12px; min-height: 18px; margin: 8px 0 0; } .hint { color: var(--text-mute); font-size: 11px; margin-top: 16px; } .hint code { background: var(--green-50); padding: 1px 6px; border-radius: 3px; color: var(--green-700); } /* ===== 主框架 ===== */ .app { display: block; min-height: 100vh; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 220px; z-index: 40; background: linear-gradient(180deg, var(--brand-1), var(--brand-2)); color: #fff; display: flex; flex-direction: column; box-shadow: 4px 0 18px rgba(0,0,0,.10); } .sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 18px 20px; font-weight: 700; font-size: 15.5px; letter-spacing: .4px; border-bottom: 1px solid rgba(255,255,255,.12); } .sidebar-brand .brand-logo { width: 32px; height: 32px; background: #fff; border-radius: 9px; padding: 2px; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; flex: 1; overflow-y: auto; } .nav-section { color: rgba(255,255,255,.55); font-size: 11px; font-weight: 600; padding: 14px 14px 6px; letter-spacing: .6px; } .sidebar-nav .nav-item { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.86); padding: 10px 14px; border-radius: 10px; cursor: pointer; font-size: 13.5px; text-decoration: none; transition: background .15s; } .sidebar-nav .nav-item .ico { width: 18px; text-align: center; opacity: .85; font-size: 15px; } .sidebar-nav .nav-item:hover { background: rgba(255,255,255,.12); color: #fff; } .sidebar-nav .nav-item.active { background: rgba(255,255,255,.22); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 #fff; } .sidebar-foot { padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11.5px; color: rgba(255,255,255,.65); } .app-shell { margin-left: 220px; min-height: 100vh; display: flex; flex-direction: column; box-sizing: border-box; } /* PHASE51K-FILL: 让 #main 成为 flex 列容器并填满 app-shell 剩余高度， 使 .wb-shell(flex:1) 在任意宽度下都撑满视口、不再塌缩留白 */ /* PHASE51L-SCALE: 整页缩放由 head JS 驱动，#appView 固定 1920x1080，内部保持原 flex 链即可 */ #main { flex: 1 1 0 !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; } .wb-dialer-wrap { flex: 1 1 0 !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; } .topbar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; height: 56px; padding: 0 24px; position: sticky; top: 0; z-index: 30; background: #fff; color: var(--text); border-bottom: 1px solid var(--border); box-shadow: 0 1px 8px rgba(0,0,0,.04); } .topbar .btn-ghost { color: var(--text); border-color: var(--border); background: #fff; } .topbar .btn-ghost:hover { background: var(--bg); border-color: var(--brand-line); } .sb-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); background: #fff; border-radius: 9px; font-size: 18px; cursor: pointer; margin-right: auto; } .user-box { display: flex; align-items: center; gap: 10px; font-size: 13px; } .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .dot.online { background: #66BB6A; box-shadow: 0 0 6px #66BB6A; } .dot.offline { background: #9E9E9E; } .dot.busy { background: #FFA726; box-shadow: 0 0 6px #FFA726; } .dot.break { background: #42A5F5; box-shadow: 0 0 6px #42A5F5; } .status-group { display: inline-flex; gap: 6px; } .st-btn { padding: 5px 10px; font-size: 12px; opacity: 0.55; } .st-btn.active { opacity: 1; background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.75); } .theme-switch { display: flex; gap: 7px; align-items: center; padding-left: 6px; border-left: 1px solid var(--border); } .theme-dot { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(0,0,0,.15); transition: transform .15s; } .theme-dot:hover { transform: scale(1.15); } .theme-dot.on { border-color: var(--text); transform: scale(1.12); box-shadow: 0 0 0 2px rgba(0,0,0,.08); } .td-green { background: linear-gradient(135deg,#1B5E20,#43A047); } .td-blue { background: linear-gradient(135deg,#0D47A1,#1E88E5); } .td-orange { background: linear-gradient(135deg,#BF360C,#FB8C00); } .td-purple { background: linear-gradient(135deg,#4A148C,#8E24AA); } .main { flex: 1; padding: 22px 28px; width: 100%; box-sizing: border-box; } /* ===== 通用控件 ===== */ .btn { padding: 8px 16px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; font-size: 13px; font-weight: 500; transition: all .15s; } .btn-primary { background: var(--green-600); color: #FFF; } .btn-primary:hover { background: var(--green-700); } .btn-ghost { background: transparent; color: inherit; border-color: rgba(255,255,255,0.4); } .btn-ghost:hover { background: rgba(255,255,255,0.1); } .btn-outline { background: #FFF; color: var(--green-700); border-color: var(--green-300); } .btn-outline:hover { background: var(--green-50); } .btn-danger { background: #FFF; color: var(--danger); border-color: #EF9A9A; } .btn-danger:hover { background: #FFEBEE; } .btn-block { width: 100%; padding: 10px; } .btn[disabled] { opacity: 0.5; cursor: not-allowed; } .btn-sm { padding: 4px 10px; font-size: 12px; } .card { background: var(--card); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 16px; } .card-title { font-size: 15px; font-weight: 600; color: var(--green-800); margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; } .card-title .actions { display: flex; gap: 8px; } .row { display: flex; gap: 16px; flex-wrap: wrap; } .col { flex: 1; min-width: 280px; } /* ===== 指标卡片 ===== */ .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 16px; } .metric-card { background: linear-gradient(135deg, #FFF, var(--green-50)); padding: 18px; border-radius: var(--radius); border: 1px solid var(--green-100); box-shadow: var(--shadow); } .metric-card .label { color: var(--text-mute); font-size: 12px; margin-bottom: 6px; } .metric-card .value { color: var(--green-800); font-size: 24px; font-weight: 700; line-height: 1.1; } .metric-card .sub { color: var(--text-mute); font-size: 11px; margin-top: 4px; } /* ===== 表格 ===== */ .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); } .table th { color: var(--green-800); background: var(--green-50); font-weight: 600; } .table tr:hover td { background: #F9FBF9; } .table .num { text-align: right; font-variant-numeric: tabular-nums; } .tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; } .tag-admin { background: #FFE0B2; color: #E65100; } .tag-lead { background: #C8E6C9; color: #1B5E20; } .tag-agent { background: #BBDEFB; color: #0D47A1; } .tag-online { background: #C8E6C9; color: #1B5E20; } .tag-offline { background: #EEEEEE; color: #616161; } .tag-answered { background: #C8E6C9; color: #1B5E20; } .tag-no-answer { background: #FFCDD2; color: #B71C1C; } /* ===== 拨号台 ===== */ .dialer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; } .call-panel .dial-status { display: flex; flex-direction: column; gap: 10px; background: #fff; color: var(--text); border-radius: 0; border-bottom: 1px solid var(--border); padding: 16px 18px; text-align: left; box-shadow: none; } .call-panel .dial-status.idle { background: #F7FAF8; } .call-panel .dial-status .state { font-size: 12px; color: var(--text-mute); display: flex; align-items: center; gap: 6px; } .call-panel .dial-status .state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #9E9E9E; flex: 0 0 auto; } .call-panel .dial-status.answered .state::before { background: #43A047; box-shadow: 0 0 6px #43A047; } .call-panel .dial-status:not(.idle):not(.answered) .state::before { background: #1E88E5; } .call-panel .dial-status .phone-row { display: flex; align-items: baseline; gap: 12px; } .call-panel .dial-status .phone { font-size: 24px; font-weight: 700; letter-spacing: .5px; color: var(--green-800); margin: 0; } .call-panel .dial-status .timer { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-mute); margin-left: auto; } .call-panel .dial-status .ctrl { display: flex; gap: 10px; } .number-list { max-height: 520px; overflow-y: auto; } .number-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; background: #FAFCFA; } .number-item.called { opacity: 0.55; background: #F5F5F5; } .number-item .info { display: flex; flex-direction: column; gap: 2px; } .number-item .phone { font-weight: 600; font-size: 14px; color: var(--green-800); } .number-item .name { color: var(--text-mute); font-size: 12px; } /* ===== 弹窗 ===== */ .modal-root { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; } .modal-mask { position: absolute; inset: 0; background: rgba(15, 61, 20, 0.45); } .modal-card { position: relative; background: #FFF; border-radius: var(--radius); width: 480px; max-width: 92vw; padding: 24px; box-shadow: 0 12px 32px rgba(0,0,0,0.25); max-height: 85vh; overflow-y: auto; } .modal-card h3 { margin: 0 0 16px; color: var(--green-800); } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } /* ===== 空 ===== */ .empty { text-align: center; color: var(--text-mute); padding: 40px 16px; background: #FAFCFA; border: 1px dashed var(--green-100); border-radius: var(--radius); } .empty .ico { font-size: 32px; margin-bottom: 8px; } @media (max-width: 980px) { .sidebar { transform: translateX(-100%); transition: transform .25s; } .sidebar.open { transform: translateX(0); } .app-shell { margin-left: 0; } .topbar { padding-left: 16px; } .sb-toggle { display: inline-flex; } body.sidebar-open::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 35; } } /* PHASE9-DIALER-CSS-GUARD */ .dialer-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } /* PHASE25.1-COL-RATIO-FIX: 列宽从 1.35fr/1fr 改成 1fr/1fr，col-right 从 232px 撑到 ~573px 容纳 2x2 KPI + 客户小记 */ /* PHASE25.2-FORCE-COL-GUARD: 更高特异性 + !important，强制 col-right 撑到 ~50% */ /* PHASE26-C5-COL-GUARD: 还原 v5 .cols 1.4fr 1fr (minmax(0,...) 防 min-content 撑爆比例) */ .wb-shell > .dialer-two-col { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important; } .col-left { display: flex; flex-direction: column; gap: 16px; } .col-right { display: flex; flex-direction: column; gap: 16px; } /* PHASE9-HOTFIX-EQUALHEIGHT-GUARD */ .round-dial { width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; background: var(--green-600); color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: background .15s; flex: 0 0 auto; } .round-dial:hover { background: var(--green-700); } .recent-calls { max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); } /* PHASE17-RCROW-FIT: 6列无姓名布局；列宽重分配保证 状态+原因/线路 显示完整 */ .rc-row { display: grid; grid-template-columns: 1.2fr 0.9fr 0.6fr 1.9fr 1.5fr 0.9fr 1.0fr; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; min-width: 860px; } .rc-row:last-child { border-bottom: none; } .rc-row:hover { background: #F9FBF9; } .rc-cell { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 状态+原因列（第4列）：让红色 hint 可换行，不再被截断 */ .rc-row > .rc-cell:nth-child(4) { white-space: normal; overflow: visible; } .rc-row > .rc-cell:nth-child(4) > .tag { display: inline-block; margin-bottom: 4px; } .tag-dialing { background: #E3EEFB; color: #185FA5; } .tag-ringing { background: #FFF3CD; color: #8A6D00; } .tag-failed { background: #FDE0E0; color: #B71C1C; } .tag-ended { background: #EEEEEE; color: #616161; } @media (max-width: 980px) { .dialer-two-col { grid-template-columns: 1fr; } } /* PHASE9-V4-COLUMNS-AT-EOF */ /* ===== P1-④ 满意度评价浮窗 ===== */ .sat-modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:9999;font-family:inherit} .sat-modal{width:440px;max-width:92vw;background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.25);overflow:hidden} .sat-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#EAF3DE;color:#5F5E5A;font-weight:600;font-size:15px} .sat-phone{font-weight:400;font-size:13px;opacity:.8} .sat-close{border:none;background:transparent;font-size:20px;line-height:1;cursor:pointer;color:#5F5E5A} .sat-body{padding:14px 18px} .sat-row{margin-bottom:14px} .sat-row>label{display:block;font-size:13px;color:#5F5E5A;margin-bottom:6px} .sat-seg{display:flex;gap:8px} .sat-seg button{flex:1;padding:8px 0;border:1px solid #C9DCA8;background:#fff;border-radius:8px;cursor:pointer;font-size:14px;color:#5F5E5A} .sat-seg button.on{background:#3B6D11;color:#fff;border-color:#3B6D11} .sat-stars{font-size:24px;color:#ddd;cursor:pointer;letter-spacing:3px;user-select:none} .sat-stars span.on{color:#FFB400} .sat-tags{display:flex;flex-wrap:wrap;gap:8px} .sat-tags span{padding:5px 11px;border:1px solid #C9DCA8;border-radius:14px;font-size:12px;color:#5F5E5A;cursor:pointer;background:#fff;user-select:none} .sat-tags span.on{background:#185FA5;color:#fff;border-color:#185FA5} .sat-row textarea{width:100%;border:1px solid #C9DCA8;border-radius:8px;padding:8px;font-size:13px;resize:vertical;font-family:inherit;box-sizing:border-box} .sat-foot{padding:12px 18px;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid #eee} /* ====== P1-③ 自定义报表样式 ====== */ .rep-filters{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;} .rep-filters label{display:flex;flex-direction:column;font-size:12px;color:var(--text-mute);gap:4px;} .rep-filters input,.rep-filters select{padding:6px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:var(--card);color:var(--text);} .rep-note{margin-top:10px;color:var(--text-mute);font-size:12px;} .rep-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;} .tag-cloud{display:flex;flex-wrap:wrap;gap:8px;} .chip{background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--text);} .chip b{color:var(--green-800);} @media(max-width:760px){.rep-two-col{grid-template-columns:1fr;}} /* ===== 拨号台新布局组件（侧栏改版 v1.5） ===== */ /* PHASE-A-WORKBENCH: dial-status 已在 .call-panel 下重定义为克制状态区（见上方） /* 状态紧凑块（右列顶部，置于数据卡之上） */ .status-compact { padding: 12px 16px; margin: 0; } .status-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .status-row .lbl { font-weight: 600; color: var(--text-mute); font-size: 13px; } .status-row .st-pills { display: flex; gap: 6px; } .status-row .st-btn { padding: 5px 12px; font-size: 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); border: 1px solid var(--brand-line); opacity: .6; } .status-row .st-btn.active { opacity: 1; background: var(--brand-2); color: #fff; border-color: var(--brand-2); } .status-row .st-hint { color: var(--text-mute); font-size: 12px; } /* 数据卡 2x2 */ .metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .metric-card { background: #fff; border-radius: 16px; padding: 16px 18px; border: 1px solid var(--border); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; } .metric-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(17,40,24,.10); } .metric-card .label { font-size: 13px; color: #5F5E5A; font-weight: 400; } .metric-card .value { font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; } .metric-card .ico { position: absolute; top: 14px; right: 16px; font-size: 16px; opacity: .85; } .m-login { border-left: 4px solid #185FA5; } .m-login .value { color: #185FA5; } .m-calls { border-left: 4px solid #BA7517; } .m-calls .value { color: #BA7517; } .m-ans { border-left: 4px solid #3B6D11; } .m-ans .value { color: #3B6D11; } .m-rate { border-left: 4px solid #534AB7; } .m-rate .value { color: #534AB7; } /* 禁呼时段紧凑 */ .nocall.compact { padding: 12px 16px; margin: 0; border: 1px dashed var(--brand-line); background: var(--brand-soft); } .nocall.compact .card-title { color: var(--brand-text); margin-bottom: 0; font-size: 14px; } .nocall .nc-body { margin-top: 12px; } .nocall .nc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-mute); font-size: 13px; } .nocall .nc-row select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: #fff; } .nocall .nc-msg { margin-top: 10px; font-weight: 600; color: #1a7f37; } /* 进行中通话紧凑（右列底部） */ .live-card-compact { padding: 12px 16px; margin: 0; } .live-card-compact .card-title { font-size: 14px; margin-bottom: 0; color: var(--brand-text); } .live-count { background: var(--brand-2); color: #fff; font-size: 11px; padding: 2px 9px; border-radius: 999px; font-weight: 600; } .live-row { display: flex; align-items: center; gap: 10px; padding-top: 10px; } .live-row .dot-live { width: 9px; height: 9px; border-radius: 50%; background: #43A047; animation: livePulse 1.5s infinite; } @keyframes livePulse { 0%{box-shadow:0 0 0 0 rgba(67,160,71,.5);} 70%{box-shadow:0 0 0 8px rgba(67,160,71,0);} 100%{box-shadow:0 0 0 0 rgba(67,160,71,0);} } .live-row .ph { font-weight: 600; font-size: 13.5px; } .live-row .tag-live-mini { background: #E3EEFB; color: #185FA5; padding: 3px 10px; border-radius: 999px; font-size: 12px; } .live-row .listen-mini { margin-left: auto; background: var(--brand-2); color: #fff; border: none; padding: 7px 14px; border-radius: 9px; cursor: pointer; font-size: 12.5px; } /* 手动拨号圆键 / 自动连拨状态 随主题 */ .round-dial { background: var(--brand-2); } .round-dial:hover { background: var(--brand-1); } #autoDialStatus { margin-top: 10px; padding: 10px 14px; background: #F6F7F2; border-radius: 8px; font-weight: 400; color: var(--text); text-align: center; font-size: 13px; } /* === 团队看板重设计（日期范围 + 三团队对比卡 + 小组下钻） === */ .tb-daterange { display: inline-flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 6px 12px; box-shadow: var(--shadow); } .tb-daterange label { font-size: 12px; color: var(--text-mute); display: inline-flex; align-items: center; gap: 6px; } .tb-daterange input[type=date] { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--bg); color: var(--text); } .tb-overall { display: flex; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow); margin-bottom: 16px; } .tb-overall .o-item { display: flex; flex-direction: column; padding: 0 14px; border-right: 1px solid var(--border); } .tb-overall .o-item:last-child { border-right: none; } .tb-overall .o-item .l { font-size: 12px; color: var(--text-mute); } .tb-overall .o-item .v { font-size: 20px; font-weight: 600; margin-top: 2px; } .tb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 4px 0 14px; } .tb-tcard { background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; border-top: 4px solid var(--tc, var(--brand-2)); } .tb-tcard .th { padding: 12px 14px 8px; display: flex; align-items: center; justify-content: space-between; } .tb-tcard .th .name { font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; } .tb-tcard .th .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--tc, var(--brand-2)); display: inline-block; } .tb-tcard .th .badge { font-size: 11px; color: var(--text-mute); background: var(--bg); border-radius: 20px; padding: 2px 9px; } .tb-tcard .rate { padding: 0 14px 4px; } .tb-tcard .rate .big { font-size: 28px; font-weight: 700; color: var(--tc, var(--brand-2)); line-height: 1.1; } .tb-tcard .rate .big small { font-size: 12px; color: var(--text-mute); font-weight: 400; margin-left: 6px; } .tb-bar { height: 7px; border-radius: 6px; background: var(--bg); margin-top: 8px; overflow: hidden; } .tb-bar > i { display: block; height: 100%; border-radius: 6px; background: var(--tc, var(--brand-2)); } .tb-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); margin-top: 10px; } .tb-tiles .tl { background: #fff; padding: 8px 12px; } .tb-tiles .tl .l { font-size: 11px; color: var(--text-mute); } .tb-tiles .tl .v { font-size: 15px; font-weight: 600; margin-top: 1px; } .tb-compare { background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; } .tb-compare h3 { margin: 0 0 10px; font-size: 13px; color: var(--text); } .tb-crow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .tb-crow:last-child { margin-bottom: 0; } .tb-crow .lab { width: 64px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .tb-crow .lab .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .tb-crow .track { flex: 1; height: 16px; background: var(--bg); border-radius: 8px; overflow: hidden; } .tb-crow .track > i { display: block; height: 100%; border-radius: 8px; } .tb-crow .val { width: 52px; text-align: right; font-size: 13px; font-weight: 600; } .tb-section { background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 12px; overflow: hidden; } .tb-section .sh { padding: 10px 14px; display: flex; align-items: center; gap: 8px; border-left: 5px solid var(--tc, var(--brand-2)); background: color-mix(in srgb, var(--tc, var(--brand-2)) 8%, #fff); } .tb-section .sh .name { font-weight: 700; font-size: 14px; } .tb-section .sh .cnt { font-size: 12px; color: var(--text-mute); margin-left: auto; } .tb-grpcap td { padding: 6px 14px; background: #F6F8F4; font-weight: 700; color: #46554A; font-size: 12px; border-bottom: 1px solid var(--border); } .tb-grpcap .gs { font-weight: 400; color: var(--text-mute); font-size: 11px; margin-left: 10px; } @media (max-width: 980px) { .tb-cards { grid-template-columns: 1fr; } .tb-overall .o-item { padding: 6px 10px; } } /* === 状态标签（通话/大屏通用） === */ .tag-ok { background: #C8E6C9; color: #1B5E20; } .tag-bad { background: #FDECEA; color: #C62828; } .tag-warn { background: #FFF3D6; color: #9A6700; } .tag-mute { background: #EEEEEE; color: #616161; } /* === 实时监控大屏（SPA 内嵌） === */ .mon { padding: 4px 2px 28px; } .mon-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; } .mon-title { font-size: 22px; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; } .mon-title .logo { background: var(--brand-2); color: #fff; border-radius: 8px; padding: 2px 10px; font-size: 17px; } .mon-sub { color: var(--text-mute); font-size: 13px; } .mon-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 16px; } .mon-kpi { background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 16px 18px; position: relative; overflow: hidden; } .mon-kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; } .mon-kpi .mk-label { font-size: 13px; color: var(--text-mute); } .mon-kpi .mk-value { font-size: 30px; font-weight: 700; margin: 6px 0 2px; line-height: 1.1; } .mon-kpi .mk-sub { font-size: 12px; color: var(--text-mute); } .mon-kpi-1::before { background: #2F6FED; } .mon-kpi-1 .mk-value { color: #2F6FED; } .mon-kpi-2::before { background: #2E9B5B; } .mon-kpi-2 .mk-value { color: #2E9B5B; } .mon-kpi-3::before { background: #E8830C; } .mon-kpi-3 .mk-value { color: #E8830C; } .mon-kpi-4::before { background: #7B61FF; } .mon-kpi-4 .mk-value { color: #7B61FF; } .mon-kpi-5::before { background: #12B5B0; } .mon-kpi-5 .mk-value { color: #12B5B0; } .mon-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; } .mon-main, .mon-side { display: flex; flex-direction: column; gap: 16px; } /* 三团队对比卡 */ .mon-teams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .mon-tcard { background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; border-top: 4px solid var(--tc, var(--brand-2)); padding: 14px 16px; } .mt-head { display: flex; align-items: center; gap: 8px; } .mt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tc, var(--brand-2)); } .mt-name { font-weight: 700; font-size: 15px; } .mt-online { margin-left: auto; font-size: 12px; color: var(--text-mute); } .mt-rate { font-size: 34px; font-weight: 700; line-height: 1.1; margin: 8px 0 4px; color: var(--tc, var(--brand-2)); } .mt-pct { font-size: 16px; font-weight: 500; margin-left: 2px; } .mt-bar { height: 8px; border-radius: 999px; background: #EEF1F4; overflow: hidden; margin-bottom: 10px; } .mt-bar-fill { height: 100%; border-radius: 999px; transition: width .4s ease; } .mt-tiles { display: flex; gap: 8px; } .mt-tiles > div { flex: 1; background: #F6F7F2; border-radius: 9px; padding: 8px 6px; text-align: center; } .mt-tiles b { display: block; font-size: 17px; font-weight: 700; } .mt-tiles span { font-size: 11px; color: var(--text-mute); } .mt-grps { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; } .mon-grp { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #4A5560; } .mon-grp .mg-name { font-weight: 600; color: var(--text); width: 42px; } .mon-grp .mg-num { width: 42px; color: var(--text-mute); } .mon-grp .mg-call { flex: 1; } .mon-grp .mg-rate { font-weight: 700; color: var(--tc, var(--brand-2)); } /* 线路健康 / Top5 / 监听 */ .mon-lines, .mon-top, .mon-live { display: flex; flex-direction: column; gap: 8px; } .mon-li { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: #F6F7F2; border-radius: 9px; font-size: 13px; } .li-name { font-weight: 600; } .li-prov { font-weight: 400; color: var(--text-mute); font-size: 11px; margin-left: 4px; } .mon-top-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #F6F7F2; border-radius: 9px; font-size: 13px; } .mt-rank { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .mt-name { font-weight: 600; flex: 1; } .mt-team { font-size: 11px; font-weight: 400; margin-left: 6px; } .mt-num { color: var(--text-mute); font-size: 12px; white-space: nowrap; } .mon-live .empty, .mon-recent .empty { padding: 18px; text-align: center; color: var(--text-mute); } @media (max-width: 980px) { .mon-kpis { grid-template-columns: repeat(2, 1fr); } .mon-grid { grid-template-columns: 1fr; } .mon-teams { grid-template-columns: 1fr; } } /* ====== Phase A 坐席工作台 · 客户小记 / 弹屏 ====== */ .wrap-banner { display: flex; align-items: center; gap: 10px; background: #FFF4E5; border: 1px solid #F2B66D; color: #8a5a00; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; font-size: 13px; line-height: 1.5; } .wrap-banner b { color: #b97400; } .wrap-banner .btn { margin-left: auto; flex: 0 0 auto; } .wb-card { border-left: 4px solid var(--brand, #2E9B5B); } .wb-phone { font-size: 18px; font-weight: 700; color: var(--brand-2, #185FA5); margin-bottom: 10px; letter-spacing: .3px; } .wb-field { margin: 10px 0; } .wb-field > label { display: block; font-size: 12px; font-weight: 600; color: #5F5E5A; margin-bottom: 5px; } .wb-name { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; box-sizing: border-box; background: #FAFCFA; } .wb-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; } .wb-seg button { border: 1px solid var(--border); background: #fff; color: #4A5560; border-radius: 999px; padding: 5px 14px; font-size: 13px; cursor: pointer; transition: all .15s; } .wb-seg button:hover { border-color: var(--brand, #2E9B5B); } .wb-seg button.on { background: var(--brand, #2E9B5B); border-color: var(--brand, #2E9B5B); color: #fff; font-weight: 600; } .wb-stars { font-size: 22px; line-height: 1; color: #D8DCE0; cursor: pointer; user-select: none; } .wb-stars span { padding: 0 1px; transition: color .12s; } .wb-stars span.on { color: #F5A623; } .wb-chips { display: flex; flex-wrap: wrap; gap: 6px; } .wb-chips span { border: 1px solid var(--border); background: #fff; color: #4A5560; border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer; transition: all .15s; } .wb-chips span:hover { border-color: var(--brand-2, #185FA5); } .wb-chips span.on { background: var(--brand-2, #185FA5); border-color: var(--brand-2, #185FA5); color: #fff; font-weight: 600; } .wb-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .wb-msg { font-size: 12px; color: #1a7f37; font-weight: 600; } .wb-history { font-size: 12px; color: var(--text-mute); background: #F7FAF8; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; line-height: 1.5; } #wbBlackBtn { color: #c0392b; border-color: #e6b8b0; } #wbBlackBtn:hover { background: #fdecea; } /* ====== WORKBENCH-UI (Phase A 工作台美化) ====== */ .wb-shell { display: flex; flex-direction: column; gap: 18px; } /* 顶部 KPI 条 */ .wb-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .kpi { position: relative; display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); overflow: hidden; } .kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } .kpi-ico { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex: 0 0 auto; } .kpi-meta { display: flex; flex-direction: column; line-height: 1.15; } .kpi-val { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; } .kpi-lbl { font-size: 12px; color: var(--text-mute); margin-top: 2px; } .kpi-login::before { background: #185FA5; } .kpi-login .kpi-val { color: #185FA5; } .kpi-login .kpi-ico { background: #E3F0FB; } .kpi-calls::before { background: #BA7517; } .kpi-calls .kpi-val { color: #BA7517; } .kpi-calls .kpi-ico { background: #FBF1E0; } .kpi-ans::before { background: #3B6D11; } .kpi-ans .kpi-val { color: #3B6D11; } .kpi-ans .kpi-ico { background: #E9F3E1; } .kpi-rate::before { background: #534AB7; } .kpi-rate .kpi-val { color: #534AB7; } .kpi-rate .kpi-ico { background: #EFECF9; } /* 统一列内卡片间距（由 gap 控制，去除 .card 自带 margin-bottom 避免双倍间距） */ .col-left > .card, .col-right > .card { margin-bottom: 0; } /* 呼叫主面板 */ .call-panel { padding: 0; overflow: hidden; } .call-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; background: var(--green-50); border-bottom: 1px solid var(--border); } .cp-title { font-size: 14px; font-weight: 600; color: var(--green-800); } .cp-sub { font-size: 12px; color: var(--text-mute); } .dial-form { padding: 14px 18px; border-bottom: 1px solid var(--border); } .dial-form .field { margin-bottom: 10px; } .dial-row { display: flex; gap: 10px; align-items: center; } .dial-row .input { flex: 1; } /* 通用输入框（线路 / 手动拨号 / 小记姓名 / 沟通结果） */ .input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; outline: none; background: #FAFCFA; color: var(--text); transition: border .15s; box-sizing: border-box; font-family: inherit; } .input:focus { border-color: var(--green-500); } select.input { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; } /* 批量自动外呼折叠块 */ .ad-box { border-top: 1px solid var(--border); padding: 12px 18px 16px; background: #FBFCFB; } .ad-box summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--green-800); user-select: none; } .ad-box summary::-webkit-details-marker { display: none; } /* PHASE46: 取消折叠开关，去除展开箭头 */ .ad-count { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--text-mute); } .ad-tip { font-size: 12.5px; color: var(--text-mute); margin: 0 0 12px; line-height: 1.7; padding: 0 22px; letter-spacing: 0.1px; } .ad-tip code { background: var(--brand-soft); color: var(--brand-text); padding: 1px 7px; border-radius: 6px; font-size: 12px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .ad-box textarea { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 13px; resize: vertical; background: #FAFCFA; } .ad-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; } /* 客户小记卡头 */ .wb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } /* 客户小记：号码与历史（置顶） */ .wb-phone { font-size: 17px; font-weight: 700; color: var(--brand-2, #185FA5); letter-spacing: .3px; margin-bottom: 8px; word-break: break-all; } /* 结构化表单 */ .wb-form { display: flex; flex-direction: column; gap: 12px; } .wb-form .wb-field { margin: 0; } .wb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .wb-name-row .wb-name { width: 100%; } /* 最近通话副标题 */ .card-title .sub { font-size: 11px; color: var(--text-mute); font-weight: 400; } /* 禁呼时段行 */ .nc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .nc-row select { padding: 6px 28px 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: #FAFCFA; } /* 窄屏适配 */ @media (max-width: 1100px) { .wb-kpi { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .wb-grid2 { grid-template-columns: 1fr; } } /* ====== Phase11 麦克风徽章 / 待整理提醒 ====== */ .mic-badge { display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; } .mic-badge.ok { background: #E6F4EA; color: #1a7f37; border: 1px solid #9ad0a8; } .mic-badge.bad { background: #FDECEA; color: #c0392b; border: 1px solid #f0b3ad; cursor: pointer; } .pending-banner { margin: 10px 0 0; padding: 10px 12px; border: 1px solid #f0c36d; background: #FFF8E1; border-radius: 10px; font-size: 13px; line-height: 1.6; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pending-note-msg { font-weight: 600; } .pending-note-msg.warn { color: #c0392b; } .pending-banner .btn { margin-left: 2px; } .pending-corner { position: fixed; right: 16px; bottom: 16px; background: #fff; color: #534AB7; border: 1px solid #c9c2ef; border-radius: 20px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12); z-index: 50; } .tag-warn { background: #FFF0E0; color: #c0392b; border: 1px solid #f0b3ad; margin-left: 2px; } /* PHASE20-KPI-SOFT-GUARD */ /* 拨号台 4 张 KPI 数据卡柔化：全透明玻璃 + 实色渐变图标 + 呼吸光晕 + 漂浮 + 视差 + 递增 */ /* PHASE24-V6-LAYOUT: KPI 改右栏 2x2 网格，不再顶部横排 */ .wb-kpi { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:0; } @media (max-width:900px){ .wb-kpi{ grid-template-columns:repeat(2,1fr);} } /* 外层：hover 上浮 + 放大（不动 transform 与漂浮分离） */ .kpi-float{ position:relative; transition:transform .5s cubic-bezier(.22,.8,.28,1); will-change:transform; animation:kpiIn .7s ease both; } .kpi-float:hover{ transform:translateY(-8px) scale(1.02); } .kpi-float:hover .kpi{ box-shadow:0 22px 44px -22px rgba(15,42,79,.32), 0 0 0 1px rgba(255,255,255,.6); } /* 内层 .kpi：玻璃 + 漂浮动画 + 呼吸光晕（覆盖原硬样式） */ /* PHASE26-C6-KPI-LAYOUT-GUARD: 还原 v5 .metric 垂直堆叠 */ .wb-kpi .kpi{ flex-direction:column; align-items:flex-start; gap:0; min-height:118px; background:rgba(255,255,255,.35); backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%); border:1px solid rgba(255,255,255,.55); border-radius:22px; box-shadow:0 8px 22px -12px rgba(15,42,79,.18), 0 1px 0 rgba(255,255,255,.6) inset; padding:16px 18px; overflow:visible; animation:kpiFloat 7s ease-in-out infinite; transition:box-shadow .5s; } .wb-kpi .kpi::before{ width:5px; border-radius:0 5px 5px 0; } .wb-kpi .kpi::after{ content:""; position:absolute; inset:-30%; pointer-events:none; opacity:.5; filter:blur(26px); z-index:0; transition:opacity .5s; } .kpi-float:hover .kpi::after{ opacity:.95; } .wb-kpi .kpi-login::after{ background:radial-gradient(circle at 30% 20%, rgba(24,95,165,.5), transparent 55%); animation:kpiPulse 8s ease-in-out infinite; } .wb-kpi .kpi-calls::after{ background:radial-gradient(circle at 30% 20%, rgba(186,117,23,.5), transparent 55%); animation:kpiPulse 9.5s ease-in-out infinite .8s; } .wb-kpi .kpi-ans::after{ background:radial-gradient(circle at 30% 20%, rgba(59,109,17,.5), transparent 55%); animation:kpiPulse 11s ease-in-out infinite 1.4s; } .wb-kpi .kpi-rate::after{ background:radial-gradient(circle at 30% 20%, rgba(83,74,183,.5), transparent 55%); animation:kpiPulse 10s ease-in-out infinite 2s; } /* 图标：实色渐变小圆 + 柔光环 */ /* PHASE26-C8-KPI-ICO-GUARD: 图标垂直在顶部（margin-bottom 10px） */ .wb-kpi .kpi-ico{ width:42px; height:42px; border-radius:50%; font-size:18px; color:#fff; box-shadow:inset 0 -8px 14px rgba(0,0,0,.10), inset 0 6px 12px rgba(255,255,255,.35), 0 0 0 6px rgba(255,255,255,.55), 0 10px 22px -8px currentColor; position:relative; z-index:1; margin-bottom:10px; } .wb-kpi .kpi-login .kpi-ico{ background:linear-gradient(160deg,#5A8FD6,#185FA5); color:#185FA5; } .wb-kpi .kpi-calls .kpi-ico{ background:linear-gradient(160deg,#E5A663,#BA7517); color:#BA7517; } .wb-kpi .kpi-ans .kpi-ico{ background:linear-gradient(160deg,#7CB342,#3B6D11); color:#3B6D11; } .wb-kpi .kpi-rate .kpi-ico{ background:linear-gradient(160deg,#8979CC,#534AB7); color:#534AB7; } /* 文字层（视差层） */ /* PHASE26-C7-KPI-INNER-GUARD: 还原 v5 .pad 垂直（视差层） */ .wb-kpi .kpi-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:2px; transition:transform .25s cubic-bezier(.22,.8,.28,1); will-change:transform; } .wb-kpi .kpi-val{ font-size:34px; font-weight:600; line-height:1.05; font-variant-numeric:tabular-nums; letter-spacing:.5px; transition:transform .5s cubic-bezier(.22,.8,.28,1); text-shadow:0 1px 0 rgba(255,255,255,.6); } .kpi-float:hover .kpi-val{ transform:translateY(-2px) scale(1.04); } .wb-kpi .kpi-login .kpi-val{ color:#185FA5; } .wb-kpi .kpi-calls .kpi-val{ color:#BA7517; } .wb-kpi .kpi-ans .kpi-val{ color:#3B6D11; } .wb-kpi .kpi-rate .kpi-val{ color:#534AB7; } .wb-kpi .kpi-lbl{ font-size:13px; color:#5F6B7A; letter-spacing:.5px; } @keyframes kpiFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-13px);} } @keyframes kpiPulse{ 0%,100%{transform:scale(1);opacity:.5;} 50%{transform:scale(1.2);opacity:.8;} } @keyframes kpiIn{ from{opacity:0;} to{opacity:1;} } /* ===== PHASE21-DIALER-SOFT-GUARD ===== */ /* 背景：柔和环境光晕（不抢内容） */ body { background: linear-gradient(135deg, #EAF3EC 0%, #EAF1F6 60%, #EAF3EC 100%); } .wb-shell { background: transparent; } /* 卡片柔化：大圆角 + 软阴影 + 轻微玻璃 */ .card { border-radius: 16px; box-shadow: 0 6px 22px rgba(27, 94, 32, 0.08), 0 1px 3px rgba(27, 94, 32, 0.04); border: 1px solid rgba(200, 230, 201, 0.7); background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .3s cubic-bezier(.22,.8,.28,1), box-shadow .3s cubic-bezier(.22,.8,.28,1); } .card:hover { box-shadow: 0 12px 32px rgba(27, 94, 32, 0.12), 0 2px 6px rgba(27, 94, 32, 0.06); } .card-title { font-weight: 600; letter-spacing: .2px; } /* 按钮柔化 */ .btn { border-radius: 10px; transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; } .btn:hover { transform: translateY(-1px); } /* 呼叫工作台绿渐变头 + 软 */ .call-panel { border-radius: 16px; overflow: hidden; } .call-panel-head { background: linear-gradient(135deg, var(--brand-1, #1B5E20), var(--brand-2, #43A047)); color: #fff; padding: 14px 18px; } .call-panel-head .cp-title { color: #fff; font-weight: 700; } .call-panel-head .cp-sub { color: rgba(255, 255, 255, .85); } .dial-status { border-radius: 14px; } .round-dial { border-radius: 50%; transition: transform .15s ease, box-shadow .2s ease; } .round-dial:hover { transform: translateY(-1px) scale(1.03); } /* 客户小记 / 状态卡 柔化 */ .status-compact, .wb-card { border-radius: 16px; } .wb-head { border-bottom: 1px solid rgba(200, 230, 201, .5); padding-bottom: 10px; margin-bottom: 10px; } .wb-seg button, .wb-chips span { border-radius: 999px; transition: .15s; } .wb-stars span { font-size: 20px; } /* ===== 最近通话：6 列固定宽 + 居中 + 横向滚动 + 美化滚动条 ===== */ .recent-calls { overflow: auto; /* 横向 + 纵向都支持 */ border-radius: 14px; border: 1px solid var(--brand-line, #C8E6C9); background: rgba(255, 255, 255, .45); } .rc-row { display: grid; grid-template-columns: 150px 130px 90px 150px 130px 200px; /* 6 列固定宽，表头与内容严格对齐 */ gap: 12px; align-items: center; padding: 12px 16px; min-width: 850px; /* 容器窄时触发横向滚动 */ border-bottom: 1px solid rgba(200, 230, 201, .5); font-size: 13px; } .rc-row.rc-head { position: sticky; top: 0; z-index: 3; background: var(--green-50, #E8F5E9); color: var(--text-mute, #5C6B62); font-weight: 600; border-bottom: 1px solid var(--brand-line, #C8E6C9); } .rc-cell { text-align: center; color: var(--text, #1F2A24); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-row.rc-head .rc-cell { text-align: center; } /* 美化滚动条（Webkit） */ .recent-calls::-webkit-scrollbar { width: 9px; height: 9px; } .recent-calls::-webkit-scrollbar-thumb { background: rgba(46, 125, 50, .32); border-radius: 10px; } .recent-calls::-webkit-scrollbar-thumb:hover { background: rgba(46, 125, 50, .5); } .recent-calls::-webkit-scrollbar-track { background: transparent; } /* Firefox */ .recent-calls { scrollbar-width: thin; scrollbar-color: rgba(46, 125, 50, .4) transparent; } /* 侧栏/其他滚动容器也柔化一点 */ .sidebar::-webkit-scrollbar, .mon-recent::-webkit-scrollbar, .wb-history::-webkit-scrollbar { width: 7px; } .sidebar::-webkit-scrollbar-thumb, .mon-recent::-webkit-scrollbar-thumb, .wb-history::-webkit-scrollbar-thumb { background: rgba(46, 125, 50, .28); border-radius: 8px; } /* ===== /PHASE21-DIALER-SOFT-GUARD ===== */ /* ===== PHASE21.1-ATMOSPHERE-GUARD ===== */ /* 全局氛围层: body 柔光晕渐变 + .main 透明 + .card 全透明玻璃 + 多层阴影 + 漂浮 keyframes + hover 上浮 */ body { background: /* PHASE26-C1-BG-GUARD: 还原 v5 alpha 0.10/0.07/0.06 + 中性 #F4FAF6/#EDF3EF */ radial-gradient(1300px 720px at 6% -12%, rgba(46,125,50,.10), transparent 56%), radial-gradient(1050px 640px at 102% -4%, rgba(24,95,165,.07), transparent 56%), radial-gradient(900px 620px at 52% 122%, rgba(83,74,183,.06), transparent 56%), linear-gradient(180deg,#F4FAF6,#EDF3EF); background-attachment: fixed; min-height: 100vh; font-family: "PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif; } .main { background: transparent; } /* 卡片全透明玻璃 + 多层柔阴影 */ .card, .wb-card, .status-compact { background: rgba(255, 255, 255, .58); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, .55); border-radius: 22px; box-shadow: 0 1px 2px rgba(30, 50, 40, .04), 0 10px 28px -8px rgba(46, 125, 50, .12), 0 18px 48px -16px rgba(46, 125, 50, .10); overflow: hidden; transition: transform .35s cubic-bezier(.22,.8,.28,1), box-shadow .35s cubic-bezier(.22,.8,.28,1), background .4s ease; } .card:hover, .wb-card:hover, .status-compact:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .72); box-shadow: 0 1px 2px rgba(30, 50, 40, .04), 0 18px 40px -10px rgba(46, 125, 50, .18), 0 28px 64px -20px rgba(46, 125, 50, .16), 0 0 38px rgba(46, 125, 50, .10); } /* 漂浮 keyframes (柔性 sin 波) */ @keyframes cardFloatA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes cardFloatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes cardFloatC { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes cardFloatD { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* 调用工作台绿渐变面板保留品牌色 */ .call-panel { box-shadow: 0 14px 36px -10px rgba(27, 94, 32, .25), 0 4px 12px rgba(27, 94, 32, .12); } /* .recent-calls 容器与卡片圆角协调 */ .recent-calls { border-radius: 14px; } /* PHASE22-ATMO-BOOST-GUARD: 氛围层 alpha 加强 (0.10/0.07/0.06 → 0.40/0.28/0.28), 线性底色加深 */ /* ===== /PHASE21.1-ATMOSPHERE-GUARD ===== */ /* PHASE21.1-REVERT-OVERWRITE: 撤回 ' + removed + ' 处多余覆盖, 仅保留核心氛围层 */ /* PHASE24-HIDE-COL-RIGHT-DUP: 隐藏 col-right 里的状态条副本（main 顶部已有） */ .col-right .status-compact { display: none !important; } /* PHASE25-PHASE24-LAYOUT-CSS: 补 phase24 三个块的玻璃 + 圆角 + 间距 */ /* PHASE26-C2-STRIP-GUARD: 还原 v5 status-strip 玻璃卡 + 间距 */ .phase24-strip{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.85); border-radius:20px; padding:14px 20px; margin-bottom:16px; backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); box-shadow:0 1px 4px rgba(20,50,35,.04), 0 10px 22px rgba(20,50,35,.06); } .phase24-strip > span:first-child{ font-weight:600; color:#65736A; font-size:13px; } /* PHASE26-C3-BANNER-GUARD: 还原 v5 wrap-banner */ .phase24-wrap-banner{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:rgba(255,243,224,.78); border:1px solid #FFE0B2; color:#8a4b00; border-radius:18px; padding:13px 18px; margin-bottom:16px; font-size:13px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 1px 4px rgba(20,50,35,.04), 0 10px 22px rgba(20,50,35,.06); } .phase24-wrap-banner b{ color:#6b3a00; } .phase24-wrap-banner .btn{ margin-left:auto; } /* PHASE26-C4-TOOLS-GUARD: 还原 v5 .tools 纯工具条（无卡片） */ .phase24-tools{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:transparent; border:none; border-radius:0; padding:0; margin-bottom:18px; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } /* ==================== PHASE27-V5-PARITY: 拨号台视觉对齐 v5 预览 ==================== */ /* 1) 全局正文排版对齐 v5（line-height 1.55 + 字体栈） */ body { line-height: 1.55; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Arial, sans-serif; } /* 2) 拨号台通用卡片对齐 v5 .card（玻璃 + 圆角24 + 内距20/22 + 阴影 + 模糊） */ .wb-shell .card { background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.85); border-radius: 24px; padding: 20px 22px; box-shadow: 0 2px 8px rgba(20,50,35,.04), 0 18px 46px rgba(20,50,35,.07); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); } /* 禁呼时段保留 v5 浅绿底 + 虚线品牌边 + 紧凑内距 */ .wb-shell .card.nocall { background: rgba(232,245,233,.55) !important; border: 1px dashed rgb(200,230,201) !important; padding: 14px 20px !important; } /* 3) 呼叫工作台：整卡绿色渐变 + 白字（对齐 v5 .card.call-panel） */ .wb-shell .card.call-panel { background: linear-gradient(140deg, #1B5E20, #43A047) !important; color: #fff !important; border: none !important; border-radius: 24px !important; padding: 20px 22px !important; box-shadow: 0 14px 38px rgba(46,125,50,.32) !important; backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); position: relative; overflow: hidden; } /* 去掉原本的绿色头部（整卡已是绿），改为透明白字 */ .wb-shell .card.call-panel .call-panel-head { background: transparent !important; border-bottom: none !important; padding: 0 0 10px !important; } .wb-shell .card.call-panel .call-panel-head .cp-title { color: #fff !important; font-weight: 600; } .wb-shell .card.call-panel .call-panel-head .cp-sub { color: rgba(255,255,255,.9) !important; } /* 状态区：白底半透明 */ .wb-shell .card.call-panel .dial-status { background: rgba(255,255,255,.14) !important; border-radius: 16px; } .wb-shell .card.call-panel .dial-status .state { color: rgba(255,255,255,.95) !important; } .wb-shell .card.call-panel .dial-status .phone { color: #fff !important; } .wb-shell .card.call-panel .dial-status .timer { color: rgba(255,255,255,.95) !important; } .wb-shell .card.call-panel .dial-form label { color: rgba(255,255,255,.92) !important; } /* 输入/下拉保持白底（绿底上可读） */ .wb-shell .card.call-panel .dial-form select, .wb-shell .card.call-panel .dial-row input { background: rgba(255,255,255,.95) !important; color: #1F2A24 !important; } /* 圆形拨号键：白底绿字（对齐 v5 .round-dial） */ .wb-shell .card.call-panel .round-dial { background: linear-gradient(140deg,#fff,#E8F5E9) !important; color: #2E7D32 !important; box-shadow: 0 6px 20px rgba(0,0,0,.18) !important; } /* 按钮：挂断=白底红字，静音=透明白边（对齐 v5） */ .wb-shell .card.call-panel .btn-danger { background: rgba(255,255,255,.95) !important; color: #C62828 !important; } .wb-shell .card.call-panel .btn-outline { background: rgba(255,255,255,.22) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.55) !important; } /* 4) 批量自动外呼：玻璃卡（对齐 v5 .ad-box：border:none / 圆角24 / 玻璃底 / 阴影 / 模糊） */ .wb-shell .ad-box { border: none !important; background: rgba(255,255,255,.55) !important; border-radius: 24px !important; padding: 0 !important; box-shadow: 0 2px 8px rgba(20,50,35,.04), 0 18px 46px rgba(20,50,35,.07) !important; backdrop-filter: blur(22px) saturate(150%) !important; -webkit-backdrop-filter: blur(22px) saturate(150%) !important; overflow: hidden; } .wb-shell .ad-box > .ad-head { padding: 18px 22px !important; font-size: 15px !important; font-weight: 700 !important; color: #1B5E20 !important; } .wb-shell .ad-box .ad-tip { color: #65736A !important; } .wb-shell .ad-box textarea { background: rgba(255,255,255,.8) !important; } /* 5) KPI 数据卡对齐 v5 .metric（半透玻璃 + 无外阴影 + 数字字重500） */ .wb-shell .wb-kpi .kpi { background: rgba(255,255,255,.30) !important; box-shadow: none !important; } .wb-shell .wb-kpi .kpi-val { font-weight: 500 !important; margin-top: 6px !important; } /* 客户小记卡对齐 v5 透明度 .60 */ .wb-shell .card.wb-card { background: rgba(255,255,255,.60) !important; } /* 6) 列间距对齐 v5（col-left gap 18） */ .wb-shell .col-left { gap: 18px !important; } /* ============================================================ PHASE28-V5-DETAIL-PARITY：用户截图指出三处未对齐 - 1) 自动外呼按钮设计（V5 padding 10·18 / radius 13 / font 13·600 / 主按钮绿渐变+阴影 / 描边按钮玻璃） - 2) 自动外呼 textarea placeholder 示例清掉 - 3) 最近通话 rc-row 单元格垂直居中（V5 加 justify-items / min-height / cell width:100% / 第6列 flex） ============================================================ */ /* 1) 自动外呼按钮设计对齐 V5 .ad-box .btn */ .wb-shell .ad-box .ad-actions { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; padding: 14px 22px 22px !important; } .wb-shell .ad-box .ad-actions .ad-jump-wrap { position: relative !important; flex: 1 1 220px !important; min-width: 0 !important; display: flex !important; align-items: center !important; } .wb-shell .ad-box .ad-actions .ad-jump-icon { position: absolute !important; left: 12px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 13px !important; line-height: 1 !important; color: #2E7D32 !important; opacity: .55 !important; pointer-events: none !important; } .wb-shell .ad-box .ad-actions #adJumpInput { width: 100% !important; box-sizing: border-box !important; height: 40px !important; margin: 0 !important; padding: 0 14px 0 36px !important; font: 13px/1 inherit !important; font-family: inherit !important; color: #1f2937 !important; background: rgba(255, 255, 255, .78) !important; border: 1px solid rgba(200, 230, 201, .85) !important; border-radius: 13px !important; outline: none !important; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important; } .wb-shell .ad-box .ad-actions #adJumpInput::placeholder { color: #94a3b8 !important; opacity: 1 !important; } .wb-shell .ad-box .ad-actions #adJumpInput:hover { border-color: rgba(46, 125, 50, .5) !important; background: #fff !important; } .wb-shell .ad-box .ad-actions #adJumpInput:focus { border-color: #2E7D32 !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(232, 245, 233, .55) !important; } .wb-shell .ad-box .btn { padding: 10px 18px !important; border-radius: 13px !important; font-size: 13px !important; font-weight: 600 !important; border: 1px solid transparent !important; cursor: pointer !important; transition: filter .22s ease, transform .22s ease, box-shadow .22s ease, background .22s ease !important; } .wb-shell .ad-box .btn-primary { background: linear-gradient(140deg, #2E7D32, #43A047) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(46, 125, 50, .30) !important; border-color: transparent !important; } .wb-shell .ad-box .btn-primary:hover { filter: brightness(1.05) !important; transform: translateY(-1px) !important; box-shadow: 0 10px 22px rgba(46, 125, 50, .36) !important; } .wb-shell .ad-box .btn-outline { background: rgba(255, 255, 255, .74) !important; color: #2E7D32 !important; border-color: rgba(200, 230, 201, .85) !important; box-shadow: none !important; } .wb-shell .ad-box .btn-outline:hover { background: rgba(234, 243, 222, .85) !important; transform: translateY(-1px) !important; } /* PHASE46-Q5: 自动外呼按钮图标化（图标在上、文字在下） */ .wb-shell .ad-box .ad-actions .ad-act{ display:inline-flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:3px !important; min-width:64px !important; padding:9px 10px !important; line-height:1.15 !important; } .wb-shell .ad-box .ad-actions .ad-act .ad-ico{ font-size:17px !important; line-height:1 !important; } .wb-shell .ad-box .ad-actions .ad-act .ad-lbl{ font-size:12px !important; font-weight:600 !important; } /* 2) textarea 已通过改 HTML 去掉示例 placeholder，CSS 仅保留与 V5 一致的尺寸 */ .wb-shell .ad-box textarea { width: calc(100% - 44px) !important; margin: 0 22px !important; box-sizing: border-box !important; padding: 13px !important; border: 1px solid rgba(200, 230, 201, .85) !important; border-radius: 15px !important; font-size: 13.5px !important; resize: vertical !important; font-family: inherit !important; outline: none !important; background: rgba(255, 255, 255, .8) !important; min-height: 92px !important; } .wb-shell .ad-box textarea:focus { border-color: #2E7D32 !important; background: #fff !important; box-shadow: 0 0 0 5px rgba(232, 245, 233, .55) !important; } /* ====== PHASE30: 批量自动外呼跳过提醒（Toast 弹窗 + 跳过日志列表）====== */ .wb-shell .ad-box .ad-skip-log { margin: 12px 22px 4px !important; max-height: 150px; overflow-y: auto; border: 1px solid #F2D6D6 !important; border-radius: 12px !important; background: #FFF7F7 !important; padding: 0 !important; font-size: 12px; } .wb-shell .ad-box .ad-skip-log:empty { display: none !important; } .wb-shell .ad-box .ad-skip-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px; border-bottom: 1px solid #F3E2E2; } .wb-shell .ad-box .ad-skip-row:last-child { border-bottom: none; } .wb-shell .ad-box .ad-skip-phone { font-family: ui-monospace, Menlo, Consolas, monospace; color: #9b2c2c; font-weight: 600; } .wb-shell .ad-box .ad-skip-reason { color: #b04a4a; text-align: right; } .wb-shell .ad-box .ad-skip-toggle { margin-left: auto; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(176, 74, 74, .35); background: rgba(255, 247, 247, .85); color: #9b2c2c; font-size: 12px; font-weight: 600; line-height: 1.6; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; user-select: none; } .wb-shell .ad-box .ad-skip-toggle:hover { background: rgba(255, 232, 232, .95); border-color: rgba(176, 74, 74, .55); } .wb-shell .ad-box .ad-skip-toggle .ad-skip-caret { font-size: 10px; color: #9b2c2c; transition: transform .2s ease; } .wb-shell .ad-box .ad-skip-toggle[aria-expanded="true"] .ad-skip-caret { transform: rotate(0deg); } .wb-shell .ad-box .ad-skip-clear { padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(46, 125, 50, .25); background: rgba(255, 255, 255, .7); color: #2E7D32; font-size: 12px; font-weight: 500; line-height: 1.6; cursor: pointer; user-select: none; } .wb-shell .ad-box .ad-skip-clear:hover { background: rgba(234, 243, 222, .95); border-color: rgba(46, 125, 50, .45); } .wb-shell .ad-box .ad-count { margin-left: 8px; } #toastHost { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.18); background: #fff; color: #333; max-width: 86vw; line-height: 1.4; } .toast-warn { background: #FFF4E5; color: #9a5b00; border: 1px solid #FFD79A; } .toast-ok { background: #EAF7EC; color: #1a7f37; border: 1px solid #B7E4BF; } .toast-info { background: #EAF2FB; color: #185FA5; border: 1px solid #BBD7F2; } .toast-hide { opacity: 0; transition: opacity .4s; } /* 3) 最近通话单元格垂直居中对齐 V5（关键三层：rc-row 容器 + rc-cell 子项 + 第6列操作 flex） */ .wb-shell .rc-row { display: grid !important; align-items: center !important; justify-items: center !important; min-height: 54px !important; padding: 14px 18px !important; gap: 14px !important; } .wb-shell .rc-row > .rc-cell, .wb-shell .rc-row > div { width: 100% !important; text-align: center !important; align-self: center !important; } .wb-shell .rc-row > .rc-cell:nth-child(7) { display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; } .wb-shell .rc-row > .rc-cell:nth-child(7) > * { flex: 0 0 auto; } .wb-shell .rc-row > .rc-cell:nth-child(4) { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; } .wb-shell .rc-row > .rc-cell:nth-child(4) > * { margin: 0 !important; } /* ===== PHASE41-THREE-PANE: 左「打」/ 中「备」/ 右「看」三块同屏 ===== */ /* 1) 拨号台锁高（仅 .wb-shell，不影响其他视图）：页面不滚，滚动只在右栏列表内 */ .wb-shell{ flex:1 1 0 !important; min-height:0 !important; display:flex !important; flex-direction:column !important; gap:14px !important; overflow:hidden !important; } /* 2) 顶部条：状态 + KPI 一行小药丸（KPI 弱化，不抢焦点） */ .wb-topbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; flex:none; } .wb-topbar .card.status-compact{ margin:0 !important; padding:8px 14px !important; border-radius:16px !important; background:rgba(255,255,255,.72) !important; } .wb-topbar .status-row{ display:flex; align-items:center; gap:10px; width:100%; } .wb-topbar .status-row .lbl{ font-size:12.5px; color:#65736A; font-weight:600; } .wb-topbar .st-pills{ display:flex; gap:7px; } .wb-topbar .st-btn{ padding:6px 16px !important; border-radius:999px !important; font-size:12.5px !important; } .wb-topbar .st-btn.active{ background:#EAF3DE !important; border-color:#43A047 !important; color:#2E7D32 !important; font-weight:600; } .wb-topbar .st-hint{ font-size:12px; color:#65736A; } .wb-topbar .mic-badge{ margin-left:auto; font-size:12px; padding:5px 12px; border-radius:999px; background:rgba(232,245,233,.9); color:#1a7f37; font-weight:600; white-space:nowrap; } .wb-kpi{ display:flex !important; gap:8px !important; margin-bottom:0 !important; flex-wrap:wrap; flex:none; } .wb-kpi .kpi{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:7px !important; padding:5px 13px !important; border-radius:999px !important; background:#F6FAF4 !important; border:1px solid #E3EFE1 !important; min-height:0 !important; box-shadow:none !important; } .wb-kpi .kpi-ico{ font-size:13px !important; width:auto !important; height:auto !important; line-height:1 !important; } .wb-kpi .kpi-meta{ display:flex !important; flex-direction:row !important; align-items:baseline !important; gap:5px !important; } .wb-kpi .kpi-val{ font-size:13.5px !important; font-weight:700 !important; margin-top:0 !important; } .wb-kpi .kpi-lbl{ font-size:11.5px !important; color:#65736A !important; } /* 3) 三块 grid：等高（stretch） */ .wb-shell > .wb-grid3{ display:grid !important; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,2.5fr) !important; gap:18px !important; align-items:stretch !important; flex:1 1 0 !important; min-height:0 !important; height:auto !important; } /* 4) 块：flex column + 宽松内边距 */ .wb-pane{ display:flex !important; flex-direction:column !important; min-height:0 !important; overflow:hidden !important; background:rgba(255,255,255,.80) !important; border:1px solid rgba(255,255,255,.7) !important; border-radius:26px !important; padding:22px 22px 24px !important; box-shadow:0 1px 4px rgba(20,50,35,.05),0 16px 36px rgba(20,50,35,.10) !important; backdrop-filter:blur(18px); } .pane-h{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex:none; justify-content:space-between; flex-wrap:wrap; } .pane-h .n{ width:26px; height:26px; border-radius:50%; background:#fff; border:1px solid #C8E6C9; color:#2E7D32; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex:none; } .pane-h .t{ font-size:14.5px; font-weight:800; color:#1B5E20; white-space:nowrap; } /* 5) 左「拨号作业」= 唯一主角（绿渐变） */ .wb-pane.pane-dial{ background:linear-gradient(160deg,rgba(255,255,255,.93),rgba(240,249,242,.88)) !important; border:1px solid rgba(201,232,203,.9) !important; justify-content:flex-start; } .wb-pane.pane-dial .dial-status{ background:linear-gradient(135deg,#1B5E20,#43A047) !important; border-radius:24px !important; padding:22px 20px !important; color:#fff !important; text-align:center; box-shadow:0 10px 26px rgba(46,125,50,.16) !important; flex:none; border:none !important; } .wb-pane.pane-dial .dial-status .state{ color:rgba(255,255,255,.88) !important; font-size:13px !important; } .wb-pane.pane-dial .dial-status .phone-row{ display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:6px; } .wb-pane.pane-dial .dial-status .phone{ color:#fff !important; font-size:24px !important; font-weight:800 !important; letter-spacing:1px; } .wb-pane.pane-dial .dial-status .timer{ color:#fff !important; font-size:17px !important; font-weight:800 !important; background:rgba(0,0,0,.20); padding:5px 18px; border-radius:999px; display:inline-block; margin-top:6px; } .wb-pane.pane-dial .dial-line-row{ display:flex; align-items:center; gap:10px; margin-top:14px; flex:none; } .wb-pane.pane-dial .dial-line-row label{ font-size:13px; color:#65736A; font-weight:600; white-space:nowrap; } .wb-pane.pane-dial .dial-line-row select{ flex:1; min-width:0; padding:11px 15px; border:1px solid #C8E6C9; border-radius:16px; font-size:13.5px; outline:none; background:#fff; color:#1F2A24; font-family:inherit; } .wb-pane.pane-dial .dial-line-row select:focus{ border-color:#2E7D32; box-shadow:0 0 0 4px rgba(232,245,233,.6); } .wb-pane.pane-dial .dial-row{ display:flex; gap:10px; align-items:center; margin-top:12px; flex:none; } .wb-pane.pane-dial .dial-row input{ flex:1; min-width:0; padding:11px 15px; border:1px solid #C8E6C9; border-radius:16px; font-size:14px; outline:none; background:#fff; color:#1F2A24; font-family:inherit; } .wb-pane.pane-dial .dial-row input:focus{ border-color:#2E7D32; box-shadow:0 0 0 4px rgba(232,245,233,.6); } .wb-pane.pane-dial .round-dial{ width:46px; height:46px; border-radius:50%; border:none; font-size:19px; cursor:pointer; background:linear-gradient(140deg,#2E7D32,#43A047) !important; color:#fff !important; box-shadow:0 6px 18px rgba(46,125,50,.28) !important; flex:none; } .wb-pane.pane-dial .dial-ctrl{ display:flex; justify-content:center; margin-top:18px; flex:none; } .wb-pane.pane-dial .round-btn{ width:84px; height:84px; border-radius:50%; border:none; font-size:30px; cursor:pointer; font-family:inherit; transition:transform .15s; } .wb-pane.pane-dial .round-btn:hover{ transform:scale(1.05); } .wb-pane.pane-dial .round-btn.hang{ background:#fff !important; color:#C62828 !important; box-shadow:0 10px 26px rgba(46,125,50,.16) !important; } .wb-pane.pane-dial .round-btn:disabled{ opacity:.45; cursor:not-allowed; } .wb-pane.pane-dial .dial-ctrl-lbl{ text-align:center; font-size:13px; color:#65736A; margin-top:8px; letter-spacing:.5px; flex:none; } .wb-pane.pane-dial .dial-btns{ display:flex; gap:14px; justify-content:center; margin-top:16px; flex:none; } .wb-pane.pane-dial .round-act{ width:56px; height:56px; border-radius:50%; border:none; font-size:22px; cursor:pointer; flex:none; display:inline-flex; align-items:center; justify-content:center; transition:transform .15s ease, box-shadow .2s ease; font-family:inherit; } .wb-pane.pane-dial .round-act.dial{ background:linear-gradient(140deg,#2E7D32,#43A047) !important; color:#fff !important; box-shadow:0 6px 18px rgba(46,125,50,.28) !important; } .wb-pane.pane-dial .round-act.hang{ background:#fff !important; color:#C62828 !important; box-shadow:0 10px 26px rgba(46,125,50,.16) !important; } .wb-pane.pane-dial .round-act:disabled{ opacity:.45; cursor:not-allowed; } .wb-pane.pane-dial .round-act:hover:not(:disabled){ transform:scale(1.05); } /* 6) 中「准备名单」：ad-box 撑满、内部可滚 */ .wb-pane.pane-list .ad-box{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow-y:auto; background:rgba(255,255,255,.55) !important; border:1px solid rgba(255,255,255,.85) !important; border-radius:20px !important; margin:0 !important; } .wb-pane.pane-list .ad-box > .ad-head{ flex:none; padding:16px 20px !important; font-size:14.5px !important; cursor:pointer; } .wb-pane.pane-list .ad-box textarea{ flex:1 1 auto; min-height:100px; resize:none; } .wb-pane.pane-list .ad-pills{ display:flex; align-items:center; gap:5px; flex:none; flex-wrap:wrap; } .wb-pane.pane-list .ad-pills .ad-skip-toggle{ padding:3px 9px; border-radius:999px; border:1px solid rgba(176,74,74,.35); background:rgba(255,247,247,.85); color:#9b2c2c; font-size:12px; font-weight:600; line-height:1.5; cursor:pointer; display:inline-flex; align-items:center; gap:5px; user-select:none; margin:0; } .wb-pane.pane-list .ad-pills .ad-skip-toggle .ad-skip-caret{ font-size:10px; } .wb-pane.pane-list .ad-pills .ad-skip-clear{ padding:3px 9px; border-radius:999px; border:1px solid rgba(46,125,50,.25); background:rgba(255,255,255,.7); color:#2E7D32; font-size:12px; font-weight:500; line-height:1.5; cursor:pointer; user-select:none; margin:0; } .wb-pane.pane-list .ad-pills .ad-count{ margin-left:2px; font-weight:400; font-size:12px; color:#65736A; white-space:nowrap; } /* 7) 右「通话记录」：列表吃掉剩余高度，独立滚轮 */ .wb-pane.pane-dial .pane-h{ justify-content:flex-start; } .wb-pane.pane-list .pane-h{ justify-content:flex-start; } .wb-pane.pane-rec .pane-h{ justify-content:flex-start; } .rc-filter-wrap{ margin-left:auto; display:flex; align-items:center; gap:7px; } .rc-filter-wrap input{ padding:7px 14px; border:1px solid #C8E6C9; border-radius:14px; font-size:12.5px; outline:none; width:90px; background:#fff; font-family:inherit; } .rc-filter-wrap input:focus{ border-color:#2E7D32; box-shadow:0 0 0 4px rgba(232,245,233,.6); } .rc-filter-wrap button{ padding:5px 12px !important; border-radius:999px !important; font-size:12px !important; } .wb-pane.pane-rec .recent-calls{ flex:1 1 auto !important; min-height:0 !important; max-height:none !important; overflow-y:auto !important; border-radius:16px !important; } /* ===== /PHASE41-THREE-PANE ===== */ /* ====== PHASE42: 拨号台 G2 风格顶栏 + 工作台布局 ====== */ .ph-topbar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:rgba(255,255,255,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(232,245,233,.7);border-radius:18px;box-shadow:0 4px 20px rgba(76,124,89,.06);flex-wrap:wrap;margin-bottom:14px;min-height:54px;} .ph-brand{display:flex;align-items:center;gap:8px;padding-right:4px;} .ph-logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#5CAB5F,#3B6D11);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;box-shadow:0 3px 8px rgba(59,109,17,.25);} .ph-name{font-size:15px;font-weight:700;color:#2d4332;letter-spacing:.3px;} .ph-kpis{display:flex;align-items:center;gap:6px;flex:1 1 auto;flex-wrap:wrap;padding:0 6px;} .ph-kpi{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;background:#F6FAF4;border:1px solid #E3EFE1;border-radius:999px;font-size:12.5px;color:#65736A;white-space:nowrap;line-height:1;} .ph-kpi-val{color:#2d4332;font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums;} .ph-kpi-calls .ph-kpi-val{color:#185FA5;} .ph-kpi-ans .ph-kpi-val{color:#3B6D11;} .ph-kpi-rate .ph-kpi-val{color:#534AB7;} .ph-kpi-login .ph-kpi-val{color:#BA7517;} .ph-kpi-mic{background:#FFF8E5;border-color:#F2E2BB;color:#8a6d20;animation:phMicPulse 1.8s ease-in-out infinite;} @keyframes phMicPulse{0%,100%{opacity:1}50%{opacity:.55}} .ph-sp{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:999px;border:1.5px solid #C8E6C9;background:#fff;color:#3B6D11;font-size:13px;font-weight:600;cursor:pointer;transition:all .18s;outline:none;} .ph-sp:hover{border-color:#3B6D11;box-shadow:0 2px 8px rgba(59,109,17,.18);transform:translateY(-1px);} .ph-sp:active{transform:translateY(0);} .ph-sp .dot{width:8px;height:8px;border-radius:50%;background:#3B6D11;box-shadow:0 0 0 3px rgba(59,109,17,.18);} /* ====== PHASE42: 工作台(wb-workspace,监听菜单指向的页) ====== */ .wb-workspace{padding:0;} .wb-workspace-top{display:grid;grid-template-columns:380px 1fr;gap:14px;align-items:start;} @media (max-width:1100px){.wb-workspace-top{grid-template-columns:1fr;}} .wb-ws-pane{padding:18px;} .wb-ws-dial .dial-status{background:linear-gradient(135deg,#5CAB5F,#3B6D11);color:#fff;padding:18px 16px;border-radius:14px;margin:8px 0 12px;} .wb-ws-dial .dial-status .state{font-size:13px;opacity:.85;margin-bottom:6px;} .wb-ws-dial .dial-status .phone{color:#fff;font-size:24px;font-weight:700;} .wb-ws-dial .dial-status .timer{color:rgba(255,255,255,.85);font-size:13px;font-variant-numeric:tabular-nums;} .wb-ws-dial .dial-line-row{display:flex;align-items:center;gap:8px;margin:8px 0;} .wb-ws-dial .dial-line-row label{font-size:12.5px;color:#65736A;} .wb-ws-dial .dial-line-row select{flex:1;padding:7px 9px;border-radius:10px;border:1px solid #C8E6C9;background:#fff;font-family:inherit;font-size:13px;} .wb-ws-dial .dial-row{display:flex;gap:8px;align-items:center;margin-top:8px;} .wb-ws-dial .input{flex:1;padding:10px 13px;border-radius:12px;border:1px solid #C8E6C9;background:#fff;font-size:14px;font-family:inherit;outline:none;transition:all .15s;} .wb-ws-dial .input:focus{border-color:#2E7D32;box-shadow:0 0 0 3px rgba(232,245,233,.55);background:#fff;} .wb-ws-dial .round-dial{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#5CAB5F,#3B6D11);color:#fff;border:none;font-size:22px;cursor:pointer;box-shadow:0 4px 10px rgba(59,109,17,.25);} .wb-ws-dial .round-btn{width:54px;height:54px;border-radius:50%;background:#ECEAFB;color:#534AB7;border:none;font-size:20px;cursor:pointer;box-shadow:0 4px 10px rgba(83,74,183,.18);} .wb-ws-dial .dial-ctrl{display:flex;justify-content:center;margin-top:14px;} .wb-ws-dial .dial-ctrl-lbl{font-size:12px;color:#888;text-align:center;margin-top:4px;} .wb-ws-live{padding:18px;min-height:480px;} /* PHASE44: 拨号按钮与挂断并排/顶对齐/三栏收窄200·230·1fr/自动外呼标题+pane-h pill/号码清单默认折叠 */ /* PHASE45: panel1/2 +100px, panel-rec 1fr 同步缩小 1080: 338->138, 1440: 698->478 */ /* PHASE47-C2: 呼叫中长时间无响应时的「结束通话」手动回收按钮 */ .force-end { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .force-end[hidden] { display: none; } .force-end .fe-tip { font-size: 12.5px; line-height: 1.6; color: #9a6a00; background: #fff7e0; border: 1px solid #ffe08a; border-radius: 6px; padding: 6px 8px; max-width: 100%; } .force-end .round-act.end { background: #c0392b; color: #fff; font-size: 13px; width: auto; min-width: 96px; height: 34px; padding: 0 12px; border-radius: 8px; } .force-end .round-act.end:hover { background: #a93226; } /* PHASE48: 自定义振铃弹窗 */ .ring-sec { padding: 12px 0; border-top: 1px solid #eee; } .ring-sec:first-child { border-top: none; padding-top: 4px; } .ring-sec h4 { margin: 0 0 8px; font-size: 14px; color: #333; } .ring-info { font-size: 13px; color: #666; margin-bottom: 8px; } .ring-file { display: block; margin: 6px 0 10px; max-width: 340px; } .ring-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* PHASE49: 铃声按钮醒目化（实心绿底+加粗+阴影） */ #ringtoneBtn.btn-primary{font-weight:600;box-shadow:0 1px 5px rgba(0,0,0,.22);} /* PHASE50b: 拨号作业面板改造（撑满 + 放大）— 圆形仪表 + 数字键盘 + KPI 小卡 */ .pane-dial{display:flex;flex-direction:column;gap:12px;overflow-y:auto !important} .pane-dial::-webkit-scrollbar{width:8px} .pane-dial::-webkit-scrollbar-track{background:rgba(27,94,32,.05);border-radius:4px} .pane-dial::-webkit-scrollbar-thumb{background:#BBD9A3;border-radius:4px} .pane-dial::-webkit-scrollbar-thumb:hover{background:#9BCB7C} .pane-dial{scrollbar-width:thin;scrollbar-color:#BBD9A3 rgba(27,94,32,.05)} .pane-dial>.pane-h{flex:none;margin-bottom:8px} .pane-dial .dial-status{background:transparent;border:none;padding:0;flex:none} .dial-gauge{position:relative;width:200px;height:200px;margin:0 auto;flex:none} .gauge-svg{width:100%;height:100%;transform:rotate(-90deg)} .gauge-svg .g-track{fill:none;stroke:#EAF3DE;stroke-width:14} .gauge-svg .g-prog{fill:none;stroke:#3B6D11;stroke-width:14;stroke-dasharray:540;stroke-dashoffset:540;stroke-linecap:round;transition:stroke-dashoffset .3s linear} .gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#3B6D11} .gauge-center .state{font-size:14px} .gauge-timer{font-size:32px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px} .gauge-center .phone{font-size:12px;color:#7A7A7A;margin-top:2px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dial-kpis{display:flex;gap:10px;flex:none;margin-top:2px} .dial-kpi{flex:1;background:#fff;border:1px solid #EAF3DE;border-radius:12px;padding:7px 6px;text-align:center;box-shadow:0 1px 3px rgba(46,125,50,.06)} .dial-kpi .dk-l{font-size:13px;color:#7A7A7A} .dial-kpi .dk-v{font-size:18px;font-weight:700;color:#185FA5;margin-top:3px} .dial-line-row{display:flex;align-items:center;gap:10px;font-size:13px;color:#555;flex:none;margin-top:4px} .dial-line-row select{flex:1;height:44px;border:1px solid #CDE3C0;border-radius:10px;padding:0 12px;background:#fff;font-size:15px;color:#1F2A24} .dial-row{display:flex;gap:8px;flex:none} .dial-row .input{flex:1;height:46px;border:1px solid #CDE3C0;border-radius:10px;padding:0 14px;background:#fff;font-size:15px;letter-spacing:1px;color:#1F2A24} .dial-clear{width:50px;height:50px;border:1px solid #CDE3C0;border-radius:10px;background:#fff;color:#BA7517;cursor:pointer;font-size:18px} .dial-clear:hover{background:#FBEEDD} .dial-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;flex:1;margin-top:8px} .dial-keypad button{height:100%;min-height:0;border:1px solid #CDE3C0;border-radius:10px;background:#fff;font-size:24px;font-weight:600;cursor:pointer;color:#1F2A24} .dial-keypad button:active{background:#EAF3DE} .dial-keypad .k-clr,.dial-keypad .k-del{color:#BA7517} .dial-btns{display:flex;gap:12px;align-items:center;flex:none;margin-top:8px} .btn-dial-main{flex:1;height:46px;border:none;border-radius:13px;background:linear-gradient(180deg,#56A636,#3B6D11);color:#fff;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 3px 0 #2F550D} .btn-dial-main:active{transform:translateY(1px)} /* PHASE50c: 结果分布标签 */ .mon-breakdown { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:10px 0 4px; padding:10px 14px; background:var(--card,#fff); border:1px solid var(--border,#eee); border-radius:10px; } .mon-breakdown .mbd-title { font-weight:600; color:var(--muted,#888); margin-right:4px; } .mon-breakdown .mbd-item { display:inline-flex; align-items:baseline; gap:4px; font-size:.92em; } .mon-breakdown .mbd-item b { font-size:1.18em; } .mbd-运营商拦截 b { color:#C62828; } .mbd-对方忙 b { color:#EF6C00; } .mbd-线路超时 b { color:#1565C0; } .mbd-我方挂断 b { color:#6A1B9A; } .mbd-无人接听 b { color:#555; } .mbd-已接通 b { color:#2E7D32; } .mbd-客户挂断 b { color:#00838F; } .tag-result { display:inline-block; padding:1px 7px; border-radius:4px; font-size:.76em; background:#EEF2F7; color:#333; border:1px solid #D9E1EC; margin-left:4px; vertical-align:middle; } /* === phase51f D方案：面板1键盘撑满，消除底部空当 === 大屏(>860px高度)：键盘 flex:1 真正撑开，按钮 height:auto 跟随长大，无空底、无滚动条 小窗(<=860px高度)：回退 flex:0 + 滚动条，不走极端压缩（按钮仍舒适） */ .pane-dial{gap:10px !important;overflow-y:auto !important} .pane-dial .dial-keypad{flex:1 1 auto !important;min-height:168px} .pane-dial .dial-gauge{width:240px !important;height:240px !important} .pane-dial .dial-keypad button{height:auto !important;min-height:42px !important;font-size:20px !important} .pane-dial .btn-dial-main{height:48px !important} @media (max-height:860px){ .pane-dial .dial-keypad{flex:0 0 auto !important;min-height:0} .pane-dial .dial-keypad button{height:auto !important;min-height:30px !important} } /* phase51g：面板1改造 —— 删KPI卡 + 圆圈三行色区分 + 开始/挂断上下两行宽胶囊 + 等间距分布 */ .dial-kpis{display:none !important} .pane-dial{justify-content:space-evenly !important;gap:0 !important;overflow-y:auto !important} .pane-dial>.pane-h{margin-bottom:0} .pane-dial .dial-gauge{width:240px !important;height:240px !important;flex:none} .pane-dial .dial-keypad{flex:0 0 auto !important;min-height:240px;margin-top:0} .pane-dial .dial-keypad button{height:auto !important;min-height:46px !important;font-size:22px !important} .pane-dial .dial-btns{display:flex;flex-direction:column;gap:10px;align-items:stretch;flex:none;margin-top:0} .pane-dial .btn-dial-main{width:100% !important;flex:1 1 auto;height:50px !important;font-size:17px !important} .pane-dial .btn-hangup{width:100% !important;flex:1 1 auto;height:50px;border:none;border-radius:13px;background:linear-gradient(180deg,#E53935,#B71C1C);color:#fff;font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 3px 0 #7F0F0F;display:flex;align-items:center;justify-content:center;gap:6px} .pane-dial .btn-hangup:active{transform:translateY(1px)} .pane-dial .btn-hangup:disabled{background:linear-gradient(180deg,#EF9A9A,#E57373);box-shadow:0 3px 0 #E57373;opacity:.7;cursor:not-allowed} /* 圆圈三行颜色区分（深绿圆底，用 #dialStatus id 选择器压住旧 0,4,0 规则） */ #dialStatus .gauge-center{color:#fff !important} #dialStatus .gauge-timer{color:#FFFFFF !important;font-size:30px !important;font-weight:700;margin-top:2px} #dialStatus .state{color:#E8F5E9 !important;font-size:14px;font-weight:600} #dialStatus .phone{color:#FFE082 !important;font-size:14px;font-weight:600;max-width:185px;margin-top:4px;letter-spacing:.5px} @media (max-height:860px){ .pane-dial .dial-keypad{flex:0 0 auto !important;min-height:0} .pane-dial .dial-keypad button{height:auto !important;min-height:30px !important} } /* phase51i：三栏固定最小宽度，任何分辨率/缩放都不压缩面板元素； 宽度不足时整页横向滚动（内容可显示不全，但面板不挤压）。高分屏系统缩放不再弹提示。 */ /* 矮屏：仅让键盘区自适应撑满，不压缩按钮字号；面板1内容溢出时内部滚动 */ @media (max-height:920px){ .pane-dial .dial-keypad{ flex:1 1 auto !important; min-height:0 !important; overflow:auto !important; } .pane-dial{ overflow:auto !important; } } /* PHASE-CRM: API 对接文档板块样式 */ .api-docs { font-size:13px; line-height:1.75; color:#2b2b2b; max-width:960px; } .api-docs h3 { margin:20px 0 8px; font-size:15px; color:#1a7a3c; border-bottom:2px solid #e3f2e8; padding-bottom:4px; } .api-docs p { margin:8px 0; } .api-docs .api-intro { background:#f3faf5; border-left:3px solid #1a7a3c; padding:10px 14px; border-radius:6px; margin:8px 0 4px; } .api-docs code { background:#eef1f4; padding:1px 6px; border-radius:3px; font-family:Consolas,Menlo,monospace; font-size:12px; color:#b5351f; } .api-docs pre { background:#1e293b; color:#e2e8f0; padding:12px 14px; border-radius:8px; overflow:auto; font-size:12px; line-height:1.6; margin:8px 0; } .api-docs pre code { background:none; color:inherit; padding:0; } .api-docs table.api-tbl { width:100%; border-collapse:collapse; margin:10px 0 4px; font-size:12.5px; } .api-docs table.api-tbl th, .api-docs table.api-tbl td { border:1px solid #e0e0e0; padding:7px 10px; text-align:left; vertical-align:top; } .api-docs table.api-tbl th { background:#f3faf5; font-weight:600; color:#1a7a3c; } .api-docs table.api-tbl tr:nth-child(even) td { background:#fafdfb; } /* ============================================================ PHASE-LAYOUT4: 拨号台丝滑重设计 —— 状态舞台 + 底部双卡 ============================================================ */ /* 一屏到底：shell 占满 main */ .app-shell{ display:flex !important; flex-direction:column !important; height:100vh !important; } .app-shell .main{ flex:1 1 auto !important; min-height:0 !important; overflow:hidden !important; padding:14px 22px 18px !important; } .wb-shell{ height:100% !important; min-height:0 !important; display:flex !important; flex-direction:column !important; gap:14px !important; } /* 顶栏 */ .ph-topbar{ flex:none !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:16px !important; padding:10px 18px !important; background:rgba(255,255,255,0.78) !important; backdrop-filter:blur(18px) !important; border:1px solid rgba(232,245,233,0.7) !important; border-radius:18px !important; box-shadow:0 4px 20px rgba(76,124,89,0.06) !important; min-height:54px !important; } .ph-kpis{ display:flex !important; align-items:center !important; gap:12px !important; flex:none !important; } .ph-kpi{ display:inline-flex !important; align-items:center !important; gap:8px !important; padding:8px 16px !important; background:#fff !important; border:1px solid #E3EBE6 !important; border-radius:999px !important; font-size:12.5px !important; color:#5B7165 !important; white-space:nowrap !important; box-shadow:0 2px 8px rgba(45,106,79,0.04) !important; } .ph-kpi-val{ color:#2D6A4F !important; font-weight:800 !important; font-size:15px !important; font-variant-numeric:tabular-nums !important; } /* 状态舞台（Hero） */ .hero{ flex:none !important; height:300px !important; background:linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,251,249,0.95) 100%) !important; border-radius:28px !important; border:1px solid #E3EBE6 !important; box-shadow:0 18px 60px rgba(45,106,79,0.10), 0 6px 16px rgba(0,0,0,0.04) !important; padding:28px 36px !important; display:flex !important; align-items:center !important; gap:40px !important; position:relative !important; overflow:hidden !important; } .hero::before{ content:''; position:absolute; top:-40%; right:-10%; width:420px; height:420px; background:radial-gradient(circle, rgba(82,183,136,0.12) 0%, transparent 70%); pointer-events:none; } /* 圆环仪表 */ .gauge-wrap{ width:170px !important; height:170px !important; flex:none !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; position:relative !important; } .gauge-ring{ width:170px !important; height:170px !important; position:relative !important; } .gauge-ring svg{ transform:rotate(-90deg); width:100% !important; height:100% !important; } .gauge-track{ fill:none; stroke:#EDF3F0; stroke-width:14; } .gauge-fill{ fill:none; stroke:url(#l4-grad1); stroke-width:14; stroke-linecap:round; stroke-dasharray:502; stroke-dashoffset:377; transition:1s cubic-bezier(0.22,1,0.36,1); } .gauge-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } .gauge-status{ display:flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:#40916C; margin-bottom:2px; } .gauge-status::before{ content:''; width:7px; height:7px; border-radius:50%; background:#52B788; box-shadow:0 0 0 3px #D8F3DC; } .gauge-time{ font-size:34px; font-weight:800; letter-spacing:-0.8px; color:#1A2E23; line-height:1; } .gauge-phone{ font-size:12px; color:#8DA399; margin-top:5px; font-weight:600; } /* 通话中/接通状态着色 */ .hero.answered .gauge-status{ color:#2D6A4F; } .hero.answered .gauge-status::before{ background:#2D6A4F; } .hero.answered .gauge-time{ color:#2D6A4F; } /* 拨号操作区 */ .dial-side{ flex:1 !important; display:flex !important; flex-direction:column !important; justify-content:center !important; gap:18px !important; min-width:0 !important; position:relative !important; z-index:1 !important; } .dial-header{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:16px !important; } .dial-title{ font-size:22px !important; font-weight:800 !important; color:#1A2E23 !important; letter-spacing:-0.3px !important; } .dial-meta{ font-size:13px !important; color:#5B7165 !important; font-weight:500 !important; margin-top:4px !important; } .line-pill-wrap{ position:relative !important; } #lineSelect{ appearance:none !important; -webkit-appearance:none !important; padding:8px 28px 8px 14px !important; background:#F9FBFA !important; border:1px solid #E3EBE6 !important; border-radius:999px !important; font-size:13px !important; font-weight:600 !important; color:#2D6A4F !important; cursor:pointer !important; outline:none !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%232D6A4F'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 10px center !important; transition:all .2s ease !important; } #lineSelect:hover{ background:#fff !important; box-shadow:0 2px 8px rgba(45,106,79,0.08) !important; } #lineSelect:focus{ border-color:#52B788 !important; box-shadow:0 0 0 4px #D8F3DC !important; } /* 输入框 */ .dial-input-wrap{ position:relative !important; width:100% !important; } #manualPhone.dial-input{ width:100% !important; height:62px !important; padding:0 54px 0 22px !important; border:1.5px solid #E3EBE6 !important; border-radius:18px !important; background:#fff !important; font-size:18px !important; font-weight:600 !important; color:#1A2E23 !important; outline:none !important; transition:all .2s ease !important; box-shadow:inset 0 2px 8px rgba(0,0,0,0.02) !important; } #manualPhone.dial-input::placeholder{ color:#8DA399 !important; font-weight:500 !important; } #manualPhone.dial-input:focus{ border-color:#52B788 !important; box-shadow:0 0 0 4px #D8F3DC, inset 0 2px 8px rgba(0,0,0,0.02) !important; } .dial-input-clear{ position:absolute !important; right:18px !important; top:50% !important; transform:translateY(-50%) !important; width:26px !important; height:26px !important; border-radius:50% !important; background:#E3EBE6 !important; color:#5B7165 !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; font-size:15px !important; border:none !important; transition:.2s !important; } .dial-input-clear:hover{ background:#95D5B2 !important; color:#fff !important; } /* 按钮行 */ .dial-actions{ display:flex !important; gap:14px !important; height:54px !important; } #manualDialBtn.btn-dial{ flex:1 !important; height:100% !important; border:none !important; border-radius:16px !important; background:linear-gradient(135deg, #40916C 0%, #2D6A4F 100%) !important; color:#fff !important; font-size:17px !important; font-weight:700 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; cursor:pointer !important; position:relative !important; overflow:hidden !important; box-shadow:0 10px 24px rgba(45,106,79,0.28), inset 0 1px 0 rgba(255,255,255,0.25) !important; transition:all .15s cubic-bezier(0.22,1,0.36,1) !important; } #manualDialBtn.btn-dial::after{ content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); transition:left .6s; } #manualDialBtn.btn-dial:hover{ transform:translateY(-2px) !important; box-shadow:0 14px 32px rgba(45,106,79,0.35) !important; } #manualDialBtn.btn-dial:hover::after{ left:140%; } #manualDialBtn.btn-dial:active{ transform:translateY(0) scale(0.98) !important; } #hangupBtn.btn-hangup{ width:120px !important; height:100% !important; flex:none !important; border:none !important; border-radius:16px !important; background:rgba(231,111,81,0.10) !important; color:#E76F51 !important; font-size:15px !important; font-weight:700 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; cursor:pointer !important; border:1px solid rgba(231,111,81,0.22) !important; transition:all .15s ease !important; } #hangupBtn.btn-hangup:hover:not(:disabled){ background:#E76F51 !important; color:#fff !important; box-shadow:0 8px 20px rgba(231,111,81,0.25) !important; transform:translateY(-2px) !important; } #hangupBtn.btn-hangup:disabled{ opacity:.45 !important; cursor:not-allowed !important; background:rgba(231,111,81,0.05) !important; } /* force-end */ .force-end{ margin-top:-6px !important; } .force-end .fe-tip{ font-size:12px !important; color:#8DA399 !important; margin-bottom:8px !important; } .force-end .round-act.end{ height:40px !important; padding:0 18px !important; border-radius:12px !important; background:#E76F51 !important; color:#fff !important; border:none !important; font-size:14px !important; font-weight:700 !important; cursor:pointer !important; box-shadow:0 6px 14px rgba(231,111,81,0.22) !important; } /* 底部双卡 */ .bottom-row{ flex:1 !important; min-height:0 !important; display:grid !important; grid-template-columns:1.15fr 1.45fr !important; gap:14px !important; } .bottom-row .wb-pane{ background:#fff !important; border:1px solid #E3EBE6 !important; border-radius:28px !important; box-shadow:0 18px 60px rgba(45,106,79,0.10), 0 6px 16px rgba(0,0,0,0.04) !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; } .bottom-row .pane-h{ flex:none !important; height:56px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; padding:0 20px !important; border-bottom:1px solid #E3EBE6 !important; background:linear-gradient(180deg,#fff,#F9FBFA) !important; } .bottom-row .pane-h .t{ font-size:16px !important; font-weight:800 !important; color:#1A2E23 !important; display:flex !important; align-items:center !important; gap:8px !important; } .bottom-row .pane-h .t::before{ content:''; width:6px !important; height:18px !important; border-radius:3px !important; background:#40916C !important; } .bottom-row .pane-h .n{ display:none !important; } /* 自动外呼面板 */ .bottom-row .pane-list .ad-box{ flex:1 !important; padding:14px 16px !important; display:flex !important; flex-direction:column !important; gap:10px !important; overflow:hidden !important; } .bottom-row .ad-tip{ font-size:12px !important; color:#8DA399 !important; margin:0 !important; line-height:1.5 !important; } .bottom-row .ad-tip code{ background:#F0F7F3 !important; padding:1px 5px !important; border-radius:4px !important; font-size:11px !important; color:#2D6A4F !important; } .bottom-row #adInput{ flex:1 !important; width:100% !important; min-height:0 !important; border:1px solid #E3EBE6 !important; border-radius:14px !important; padding:12px !important; font-size:14px !important; color:#1A2E23 !important; resize:none !important; outline:none !important; background:#fff !important; font-family:inherit !important; } .bottom-row #adInput:focus{ border-color:#52B788 !important; box-shadow:0 0 0 3px #D8F3DC !important; } .bottom-row .ad-actions{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; align-items:center !important; } .bottom-row .ad-act{ height:34px !important; padding:0 12px !important; border-radius:10px !important; font-size:13px !important; font-weight:600 !important; cursor:pointer !important; transition:.15s !important; } .bottom-row .ad-act.btn-primary{ background:#2D6A4F !important; color:#fff !important; border:none !important; box-shadow:0 4px 10px rgba(45,106,79,0.18) !important; } .bottom-row .ad-act.btn-primary:hover{ background:#40916C !important; } .bottom-row .ad-act.btn-outline{ background:#fff !important; border:1px solid #E3EBE6 !important; color:#5B7165 !important; } .bottom-row .ad-act.btn-outline:hover{ border-color:#52B788 !important; color:#2D6A4F !important; background:#F9FBFA !important; } .bottom-row .ad-jump-wrap{ display:flex !important; align-items:center !important; gap:4px !important; background:#F9FBFA !important; border:1px solid #E3EBE6 !important; border-radius:10px !important; padding:0 8px !important; height:34px !important; } .bottom-row .ad-jump-wrap input{ border:none !important; background:transparent !important; outline:none !important; font-size:12px !important; width:120px !important; color:#1A2E23 !important; } .bottom-row .ad-progress{ flex:none !important; font-size:12.5px !important; color:#5B7165 !important; } .bottom-row .ad-pills{ display:flex !important; align-items:center !important; gap:8px !important; } .bottom-row .ad-skip-toggle, .bottom-row .ad-skip-clear{ font-size:12px !important; padding:4px 10px !important; border-radius:8px !important; border:1px solid #E3EBE6 !important; background:#F9FBFA !important; color:#5B7165 !important; cursor:pointer !important; } .bottom-row .ad-count{ font-size:12px !important; color:#40916C !important; font-weight:700 !important; } /* 通话记录面板 */ .bottom-row .pane-rec{ display:flex !important; flex-direction:column !important; } .bottom-row .pane-rec .rc-filter-wrap{ display:flex !important; align-items:center !important; gap:8px !important; } .bottom-row .pane-rec #rcFilter{ height:34px !important; border:1px solid #E3EBE6 !important; border-radius:10px !important; padding:0 10px !important; font-size:13px !important; outline:none !important; width:140px !important; } .bottom-row .pane-rec #rcFilter:focus{ border-color:#52B788 !important; box-shadow:0 0 0 3px #D8F3DC !important; } .records-summary{ flex:none !important; display:flex !important; justify-content:space-between !important; align-items:center !important; padding:8px 18px 4px !important; font-size:12px !important; color:#8DA399 !important; font-weight:500 !important; } #rcExpandBtn{ font-size:12px !important; font-weight:700 !important; color:#2D6A4F !important; background:none !important; border:none !important; cursor:pointer !important; display:flex !important; align-items:center !important; gap:4px !important; } #rcExpandBtn:hover{ color:#40916C !important; } #recentCalls.recent-calls{ flex:1 1 auto !important; min-height:0 !important; padding:0 14px 12px !important; overflow-y:auto !important; transition:max-height .35s cubic-bezier(0.22,1,0.36,1) !important; } #recentCalls.recent-calls.records-collapsed{ max-height:120px !important; } #recentCalls.recent-calls.records-expanded{ max-height:100% !important; } #recentCalls .rc-row{ display:grid !important; grid-template-columns:1.2fr 1fr 0.8fr 1fr 1fr 0.8fr 0.8fr !important; gap:8px !important; align-items:center !important; padding:8px 10px !important; border-radius:10px !important; background:#F9FBFA !important; margin-bottom:6px !important; font-size:13px !important; color:#1A2E23 !important; } #recentCalls .rc-row.rc-head{ background:transparent !important; color:#8DA399 !important; font-size:12px !important; font-weight:600 !important; margin-bottom:4px !important; } #recentCalls .rc-cell{ min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #recentCalls .rc-cell button{ height:26px !important; padding:0 10px !important; border-radius:8px !important; font-size:12px !important; font-weight:600 !important; cursor:pointer !important; border:1px solid #E3EBE6 !important; background:#fff !important; color:#2D6A4F !important; } #recentCalls .rc-cell button:hover{ background:#2D6A4F !important; color:#fff !important; } #recentCalls .tag{ display:inline-flex !important; align-items:center !important; gap:4px !important; padding:3px 10px !important; border-radius:999px !important; font-size:12px !important; font-weight:700 !important; } #recentCalls .tag.tag-answered{ background:#D8F3DC !important; color:#2D6A4F !important; } #recentCalls .tag.tag-failed{ background:#FFF0E8 !important; color:#B85C3E !important; } #recentCalls .tag.tag-no-answer{ background:#FFF8E5 !important; color:#8A6D20 !important; } #recentCalls .tag.tag-ringing{ background:#E8F4FD !important; color:#185FA5 !important; } #recentCalls .tag.tag-dialing{ background:#F0F0F0 !important; color:#5B7165 !important; } #recentCalls .empty{ text-align:center !important; color:#8DA399 !important; padding:24px !important; font-size:13px !important; } /* 滚动条统一 */ #recentCalls::-webkit-scrollbar{ width:6px !important; } #recentCalls::-webkit-scrollbar-track{ background:transparent !important; } #recentCalls::-webkit-scrollbar-thumb{ background:#C8E0D2 !important; border-radius:3px !important; } #recentCalls::-webkit-scrollbar-thumb:hover{ background:#95D5B2 !important; } /* 响应式兜底 */ @media (max-width:1180px){ .hero{ padding:20px 24px !important; gap:24px !important; } .gauge-wrap,.gauge-ring{ width:150px !important; height:150px !important; } .bottom-row{ grid-template-columns:1fr 1.3fr !important; } } /* ==================== PHASE-LAYOUT5 ==================== 1) 顶栏改深绿，与侧栏顶部同色 -> L 型品牌贯穿，色调一致 2) 内容区浅灰绿托底 3) 拨号核心区上下舒展：圆环在上，输入+按钮在下同排 4) 底部双卡固定高度，核心区不吃挤压 ====================================================== */ /* --- 1. 全局顶栏深绿（左端 #1B5E20 与侧栏顶部完全一致） --- */ .topbar{ background:linear-gradient(90deg,#1B5E20 0%,#22643F 55%,#2D6A4F 100%) !important; color:#fff !important; border-bottom:none !important; box-shadow:0 4px 18px rgba(27,94,32,.22) !important; } .topbar .user-box, .topbar #userInfo{ color:#fff !important; } .topbar .btn-ghost{ background:rgba(255,255,255,.14) !important; color:#fff !important; border-color:rgba(255,255,255,.24) !important; } .topbar .btn-ghost:hover{ background:rgba(255,255,255,.26) !important; border-color:rgba(255,255,255,.42) !important; } .topbar .btn-primary{ background:rgba(149,213,178,.22) !important; border-color:rgba(149,213,178,.45) !important; color:#fff !important; } .topbar .sb-toggle{ background:rgba(255,255,255,.14) !important; color:#fff !important; border-color:rgba(255,255,255,.24) !important; } .topbar .theme-dot{ border-color:rgba(255,255,255,.38) !important; } /* --- 2. 内容区浅灰绿托底 --- */ .app-shell{ background:#EEF3F0 !important; } /* --- 3. 拨号核心区：上下舒展 --- */ .ph-topbar{ flex:none !important; } .hero{ flex:1 1 0 !important; height:auto !important; min-height:0 !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:20px !important; padding:20px 36px 26px !important; } .gauge-wrap{ width:200px !important; height:200px !important; flex:none !important; } .gauge-ring{ width:200px !important; height:200px !important; } .gauge-time{ font-size:38px !important; } .gauge-status{ font-size:13.5px !important; } /* 右侧操作区网格：标题一行 / 输入+按钮一行 / 强制结束一行 */ .dial-side{ flex:none !important; width:100% !important; max-width:780px !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas:"header header" "input actions" "force force" !important; align-items:center !important; gap:14px 13px !important; } .dial-side .dial-header{ grid-area:header !important; } .dial-side .dial-input-wrap{ grid-area:input !important; } .dial-side .dial-actions{ grid-area:actions !important; height:58px !important; gap:13px !important; } .dial-side .force-end{ grid-area:force !important; margin-top:0 !important; } /* 主按钮与挂断比例协调 */ #manualDialBtn.btn-dial{ flex:none !important; padding:0 40px !important; height:100% !important; font-size:17px !important; } #hangupBtn.btn-hangup{ flex:none !important; padding:0 26px !important; height:100% !important; } /* --- 4. 底部双卡固定高度，核心区不被挤压 --- */ .bottom-row{ flex:none !important; height:196px !important; } @media (max-width:1180px){ .gauge-wrap,.gauge-ring{ width:168px !important; height:168px !important; } .hero{ padding:16px 24px 20px !important; gap:16px !important; } .dial-side{ max-width:100% !important; } .bottom-row{ height:180px !important; } } /* ==================== PHASE-LAYOUT6 ==================== 对照真实页面(1080x600 窗口, 画布被等比缩放 s=innerHeight/1080)重新配比： 设计空间 = 1944x1080，此前 hero 纵向布局吃掉 694px 高 → 大空白； 底部双卡被钉死 180px → 内容被裁。本版改为： 1) hero 横向：圆环(280px)在左，操作区在右，高度 490 2) bottom-row flex:1 吃满剩余(~370px)，内容完整可见 3) 字号按画布比例放大一档 4) 中和 LAYOUT5 的 <=1180 媒体查询（旧假设失效） ====================================================== */ /* --- 1. 状态舞台改横向 --- */ .hero{ flex:none !important; height:490px !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:64px !important; padding:32px 72px !important; } .gauge-wrap{ width:280px !important; height:280px !important; flex:none !important; } .gauge-ring{ width:280px !important; height:280px !important; } .gauge-track,.gauge-fill{ stroke-width:13 !important; } .gauge-time{ font-size:50px !important; } .gauge-status{ font-size:17px !important; } .gauge-phone{ font-size:15px !important; } .dial-side{ flex:0 1 920px !important; width:auto !important; min-width:0 !important; max-width:920px !important; gap:22px 16px !important; } .dial-title{ font-size:25px !important; } .dial-meta{ font-size:14.5px !important; } #lineSelect{ padding:10px 34px 10px 16px !important; font-size:15px !important; } #manualPhone.dial-input{ height:70px !important; font-size:20px !important; padding:0 60px 0 24px !important; border-radius:18px !important; } .dial-input-clear{ width:30px !important; height:30px !important; right:20px !important; font-size:17px !important; } .dial-actions{ height:70px !important; gap:16px !important; } #manualDialBtn.btn-dial{ font-size:20px !important; border-radius:18px !important; } #hangupBtn.btn-hangup{ width:150px !important; font-size:17px !important; border-radius:18px !important; } /* --- 2. 底部双卡吃满剩余高度 --- */ .bottom-row{ flex:1 1 0 !important; height:auto !important; min-height:0 !important; } /* --- 3. 顶条 KPI 胶囊放大一档 --- */ .ph-topbar{ min-height:60px !important; } .ph-kpi{ padding:9px 18px !important; font-size:14.5px !important; gap:9px !important; } .ph-kpi-val{ font-size:17.5px !important; } /* --- 4. 底部卡内文字放大一档（画布大，原字号偏小） --- */ .bottom-row .pane-h{ height:58px !important; } .bottom-row .pane-h .t{ font-size:17.5px !important; } .bottom-row .pane-h .t::before{ height:20px !important; width:7px !important; } .bottom-row .pane-list .ad-box{ padding:16px 18px !important; gap:11px !important; } .bottom-row .ad-tip{ font-size:13.5px !important; } .bottom-row .ad-tip code{ font-size:12.5px !important; } .bottom-row #adInput{ font-size:15px !important; padding:12px 14px !important; } .bottom-row .ad-actions{ gap:9px !important; } .bottom-row .ad-act{ height:38px !important; padding:0 14px !important; font-size:14px !important; border-radius:11px !important; } .bottom-row .ad-jump-wrap{ height:38px !important; } .bottom-row .ad-jump-wrap input{ font-size:13.5px !important; width:140px !important; } .bottom-row .ad-progress{ font-size:13.5px !important; } .bottom-row .ad-skip-toggle, .bottom-row .ad-skip-clear{ font-size:13px !important; padding:5px 12px !important; } .bottom-row .ad-count{ font-size:13px !important; } .bottom-row .pane-rec #rcFilter{ height:38px !important; width:170px !important; font-size:14px !important; } .bottom-row .records-summary{ font-size:13.5px !important; } .wb-shell .rc-row{ font-size:14.5px !important; padding:13px 16px !important; } .wb-shell .rc-row.rc-head{ font-size:13.5px !important; } .recent-calls{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; } /* --- 5. 中和 LAYOUT5 的 <=1180 媒体查询（同优先级、靠后即胜） --- */ @media (max-width:1180px){ .gauge-wrap,.gauge-ring{ width:280px !important; height:280px !important; } .hero{ padding:32px 72px !important; gap:64px !important; } .dial-side{ max-width:920px !important; } .bottom-row{ height:auto !important; } } /* === END PHASE-LAYOUT6 === */ /* --- LAYOUT6b: 自动外呼操作区 grid 整齐化 --- */ .bottom-row .ad-actions{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:9px !important; align-items:center !important; } .bottom-row .ad-act{ white-space:nowrap !important; width:100% !important; justify-content:center !important; flex-direction:row !important; gap:6px !important; } .bottom-row .ad-act .ad-lbl{ white-space:nowrap !important; } .bottom-row .ad-act .ad-ico{ flex:none !important; } .bottom-row .ad-jump-wrap{ grid-column:1 / 3 !important; width:100% !important; } .bottom-row #adJumpBtn{ grid-column:3 / 5 !important; } /* === END LAYOUT6b === */ /* --- LAYOUT6c: 高优先级压过 .wb-shell .ad-box .ad-actions 的 V5 纵排工具箱样式 --- */ .wb-shell .bottom-row .ad-box .ad-actions{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:9px !important; padding:0 !important; margin-top:0 !important; align-items:center !important; flex-wrap:nowrap !important; } .wb-shell .bottom-row .ad-box .ad-actions .ad-act{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; white-space:nowrap !important; width:100% !important; min-width:0 !important; height:38px !important; padding:0 10px !important; gap:6px !important; border-radius:11px !important; font-size:14px !important; } .wb-shell .bottom-row .ad-box .ad-actions .ad-act .ad-ico{ font-size:14px !important; line-height:1 !important; } .wb-shell .bottom-row .ad-box .ad-actions .ad-act .ad-lbl{ font-size:14px !important; font-weight:600 !important; } .wb-shell .bottom-row .ad-box .ad-actions .ad-jump-wrap{ grid-column:1 / 3 !important; flex:none !important; width:100% !important; height:38px !important; } .wb-shell .bottom-row .ad-box .ad-actions #adJumpBtn{ grid-column:3 / 5 !important; } /* === END LAYOUT6c === */