/* :root = warm 暖米文艺(和主站/手机版一致:选 warm 时不设 data-theme、落回这里)。 无存储的新用户默认 gemini,由 脚本设置 data-theme。 */ :root { --bg: #f6f3ed; --panel: #fffdf9; --panel-soft: #f6f1e7; /* 表头/浅色内衬 */ --hover: #f4efe4; /* 行悬浮 */ --ink: #1e2329; --ink-soft: #6b6459; --line: #e7dccd; --brand: #1d6f8f; --brand-dark: #0f4d64; --brand-ink: #ffffff; /* 品牌底上的文字色(深色主题反转) */ --ok: #1f9d6b; --warn: #e08a1e; --danger: #d8503a; --chip: #e3edf1; --radius: 10px; --shadow: 0 2px 6px rgba(90, 70, 40, 0.05), 0 10px 28px rgba(90, 70, 40, 0.08); --shadow-pop: 0 8px 30px rgba(20, 32, 60, 0.16); font-family: -apple-system, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; } /* 跟随网页版「个人中心」主题（与主站同域，共享 localStorage 的 app-theme， 脚本读取并设 html[data-theme]）。 */ html[data-theme="gemini"] { --bg: #f6f8fc; --panel: #ffffff; --panel-soft: #f4f7fd; --hover: #f6f9ff; --ink: #1f1f24; --ink-soft: #5f6368; --line: #e6ebf3; --brand: #4285f4; --brand-dark: #1a73e8; --chip: #e8f0fe; } html[data-theme="claude"] { --bg: #ece8e0; --panel: #faf8f4; --panel-soft: #f3efe7; --hover: #f5f1e9; --ink: #2a2724; --ink-soft: #6f6a60; --line: #e4ddce; --brand: #c96442; --brand-dark: #b5573a; --chip: #f4e3da; --shadow: 0 2px 6px rgba(80, 60, 30, 0.05), 0 10px 28px rgba(80, 60, 30, 0.08); } html[data-theme="openai"] { --bg: #ffffff; --panel: #f7f7f8; --panel-soft: #f0f0f3; --hover: #f2f2f5; --ink: #0d0d0d; --ink-soft: #6e6e80; --line: #e6e6eb; --brand: #0d0d0d; --brand-dark: #000000; --chip: #ececf1; } /* 玫瑰粉软拟态:粉灰底 + 蕾丝玫瑰,卡片软浮雕(阴影变量带双向柔光) */ html[data-theme="rose"] { --bg: #f2eaec; --panel: #fbf6f7; --panel-soft: #f3e9ec; --hover: #f6eef1; --ink: #3d2e34; --ink-soft: #8d7680; --line: #e8d8dd; --brand: #c1798f; --brand-dark: #a95f78; --chip: #f0dde3; --radius: 14px; --shadow: 4px 4px 10px rgba(178, 142, 154, 0.26), -3px -3px 8px rgba(255, 255, 255, 0.9); --shadow-pop: 6px 6px 18px rgba(150, 110, 124, 0.32), -4px -4px 10px rgba(255, 255, 255, 0.85); } /* 鼠尾草绿软拟态:灰调绿底,卡片软浮雕(阴影变量带双向柔光) */ html[data-theme="sage"] { --bg: #e8ece4; --panel: #f4f7f1; --panel-soft: #eef2ea; --hover: #f0f4ec; --ink: #2f3b2c; --ink-soft: #7c8874; --line: #dbe2d5; --brand: #6b8f5c; --brand-dark: #557548; --chip: #dde6d6; --radius: 14px; --shadow: 4px 4px 10px rgba(120, 138, 108, 0.24), -3px -3px 8px rgba(255, 255, 255, 0.9); --shadow-pop: 6px 6px 18px rgba(100, 118, 90, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.85); } /* 深夜球场风:藏青黑底 + 柠檬绿主色 + 蓝调线;品牌底上用深字保证对比 */ html[data-theme="xai"] { --bg: #06080c; --panel: #0d131d; --panel-soft: #121a28; --hover: #16202f; --ink: #e9eff8; --ink-soft: #8da3bf; --line: #1e2a3d; --brand: #b6f24a; --brand-dark: #9ad82f; --brand-ink: #11210a; --chip: #16202b; --shadow: 0 2px 8px rgba(0, 0, 0, 0.42), 0 12px 32px rgba(0, 0, 0, 0.52); --shadow-pop: 0 10px 34px rgba(0, 0, 0, 0.66); } /* 黑金奢华:曜石黑底 + 香槟金主色;品牌底上用深字保证对比 */ html[data-theme="gold"] { --bg: #0b0b0d; --panel: #141417; --panel-soft: #17171b; --hover: #1c1c21; --ink: #ece9e0; --ink-soft: #9b968a; --line: #2a2a30; --brand: #d4af37; --brand-dark: #e6c860; --brand-ink: #1a1503; --chip: #1d1c17; --shadow: 0 2px 8px rgba(0, 0, 0, 0.42), 0 12px 32px rgba(0, 0, 0, 0.52); --shadow-pop: 0 10px 34px rgba(0, 0, 0, 0.66); } * { box-sizing: border-box; } /* hidden 属性必须压过下面给 .login-view/.app-view 等设的 display，否则两个视图会叠在一起 */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--ink); font-size: 14px; -webkit-font-smoothing: antialiased; } button { font-family: inherit; cursor: pointer; } input, select { font-family: inherit; font-size: 14px; } input, select, textarea { background: var(--panel); color: var(--ink); } a { color: var(--brand); } input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 1px; } ::placeholder { color: color-mix(in srgb, var(--ink-soft) 70%, transparent); } /* 细滚动条(整站统一) */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink-soft) 32%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink-soft) 52%, transparent); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } /* ── 启动占位 ── */ .loading-view { min-height: 100vh; display: grid; place-items: center; background: var(--bg); } .loading-dot { width: 30px; height: 30px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: ld-spin .7s linear infinite; } @keyframes ld-spin { to { transform: rotate(360deg); } } /* ── 登录 ── */ .login-view { min-height: 100vh; display: grid; place-items: center; background: var(--bg); } .login-card { width: 360px; background: var(--panel); border-radius: 16px; padding: 36px 32px; box-shadow: var(--shadow); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; } .login-card h1 { margin: 0; font-size: 24px; } .login-sub { margin: 0 0 8px; color: var(--ink-soft); font-size: 13px; } .login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); } .login-card input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; } .login-error { color: var(--danger); font-size: 13px; min-height: 18px; } .login-hint { color: var(--ink-soft); font-size: 12px; line-height: 1.5; opacity: .8; } .btn-primary { background: var(--brand); color: var(--brand-ink); border: none; padding: 11px 16px; border-radius: 8px; font-size: 15px; transition: background .15s, transform .1s; } .btn-primary:hover { background: var(--brand-dark); } .btn-primary:active { transform: scale(.98); } .btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); padding: 7px 12px; border-radius: 7px; transition: border-color .15s, color .15s; } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } .btn-sm { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 13px; transition: border-color .15s, color .15s; } .btn-sm:hover { border-color: var(--brand); color: var(--brand); } .btn-ok { background: var(--ok); color: #fff; border: none; padding: 6px 12px; border-radius: 6px; } .btn-danger { background: var(--panel); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent); padding: 6px 12px; border-radius: 6px; transition: background .15s; } .btn-danger:hover { background: color-mix(in srgb, var(--danger) 8%, var(--panel)); } /* ── 顶栏 ── */ .topbar { height: 56px; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 18px; gap: 16px; } .brand { font-weight: 700; font-size: 17px; color: var(--brand); letter-spacing: .2px; } .topbar-mid { flex: 1; } .project-select { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; min-width: 220px; background: var(--panel); } .topbar-right { display: flex; align-items: center; gap: 12px; } .user-badge { font-size: 13px; color: var(--ink-soft); } .role-tag { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px; background: var(--chip); color: var(--brand); margin-left: 6px; } /* ── 布局 ── */ .layout { display: flex; height: calc(100vh - 56px); } .sidebar { width: 176px; background: var(--panel); border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; } .nav-item { padding: 10px 14px; border-radius: 8px; color: var(--ink-soft); cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; transition: background .15s, color .15s; } .nav-item:hover { background: var(--chip); color: var(--ink); } .nav-item.active { background: var(--brand); color: var(--brand-ink); } .content { flex: 1; overflow: auto; padding: 22px 26px; } /* ── 通用 ── */ .page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .page-head h2 { margin: 0; font-size: 20px; letter-spacing: .2px; } .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .toolbar input, .toolbar select { padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); } .search-input { min-width: 200px; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13px; white-space: nowrap; } th { background: var(--panel-soft); color: var(--ink-soft); font-weight: 600; position: sticky; top: 0; } tbody tr { transition: background .12s; } tbody tr:hover { background: var(--hover); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .row-link { cursor: pointer; } .empty { padding: 40px; text-align: center; color: var(--ink-soft); opacity: .8; } /* 台账批量处理 */ .sel-col { width: 34px; text-align: center; } .sel-col input { cursor: pointer; width: 15px; height: 15px; } .deal-batch-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 8px; background: var(--brand); color: var(--brand-ink); border-radius: var(--radius); box-shadow: var(--shadow); } .deal-batch-bar .deal-batch-count { font-weight: 600; margin-right: 4px; } .deal-batch-bar .btn-sm { background: color-mix(in srgb, var(--brand-ink) 14%, transparent); color: var(--brand-ink); border-color: color-mix(in srgb, var(--brand-ink) 40%, transparent); } .deal-batch-bar .btn-sm:hover { background: var(--brand-ink); color: var(--brand); border-color: var(--brand-ink); } .deal-batch-bar .btn-danger { background: color-mix(in srgb, var(--brand-ink) 14%, transparent); color: var(--brand-ink); border-color: color-mix(in srgb, var(--brand-ink) 50%, transparent); } .deal-batch-bar .btn-danger:hover { background: var(--brand-ink); color: var(--danger); } .deal-batch-bar .btn-ghost { color: var(--brand-ink); opacity: .85; } .recycle-sub { margin: 14px 0 8px; font-size: 15px; color: var(--ink); } /* 项目删除危险区 */ .project-danger-zone { margin-top: 16px; padding: 12px; border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--danger) 6%, var(--panel)); display: flex; flex-direction: column; gap: 8px; } .project-danger-zone .btn-danger { align-self: flex-start; } .danger-note { font-weight: 600; color: var(--danger); margin-bottom: 6px; } .status-pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; } .s-待售 { background: #eef7ef; color: #2f8f4a; } .s-下定 { background: #fdf3df; color: #a8730f; } .s-已签约 { background: #e7f0ff; color: #2356c8; } .s-首付齐 { background: #fff3e0; color: #b9751a; } .s-款清 { background: #e4f7ee; color: #178a5d; } .s-已交房 { background: #e3f1fd; color: #1f7fb0; } .s-退房 { background: #fdecea; color: #c0432c; } .pay-pending { color: var(--warn); } .pay-confirmed { color: var(--ok); } .pay-voided { color: var(--ink-soft); text-decoration: line-through; opacity: .75; } /* progress */ .progress { height: 6px; background: color-mix(in srgb, var(--ink-soft) 14%, transparent); border-radius: 6px; overflow: hidden; min-width: 60px; } .progress > span { display: block; height: 100%; background: var(--ok); border-radius: 6px; } /* ── 抽屉/弹窗 ── */ .drawer-overlay, .modal-overlay { position: fixed; inset: 0; background: rgba(15, 22, 36, 0.42); backdrop-filter: blur(2px); display: flex; z-index: 200; } .drawer-overlay { justify-content: flex-end; } .drawer { width: 560px; max-width: 92vw; background: var(--bg); height: 100%; overflow: auto; box-shadow: var(--shadow-pop); animation: slideIn .18s ease; } @keyframes slideIn { from { transform: translateX(30px); opacity: .6; } to { transform: none; opacity: 1; } } .modal-overlay { justify-content: center; align-items: center; } .modal { width: 540px; max-width: 94vw; max-height: 90vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); animation: modalIn .16s ease-out; } @keyframes modalIn { from { transform: translateY(10px) scale(.985); opacity: .5; } to { transform: none; opacity: 1; } } .drawer-head, .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 1; } .drawer-head h3, .modal-head h3 { margin: 0; font-size: 17px; } .close-x { border: none; background: transparent; font-size: 22px; color: var(--ink-soft); cursor: pointer; line-height: 1; border-radius: 6px; transition: color .15s; } .close-x:hover { color: var(--ink); } .drawer-body, .modal-body { padding: 18px 20px; } .kv-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin-bottom: 18px; } .kv-grid .k { color: var(--ink-soft); } .kv-grid .v { font-weight: 500; } .section-title { font-weight: 700; margin: 16px 0 10px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; } /* forms */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .form-grid label, .form-row label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-soft); } .form-grid label.full { grid-column: 1 / -1; } .form-grid input, .form-grid select, .form-grid textarea, .form-row input, .form-row select { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); transition: border-color .15s; } .form-grid input:hover, .form-grid select:hover, .form-row input:hover, .form-row select:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); } .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } .confirm-msg { font-size: 14px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; margin-bottom: 14px; } .voucher-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .voucher-thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); } .toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 11px 20px; border-radius: 10px; z-index: 100; box-shadow: var(--shadow-pop); font-size: 14px; } .toast.err { background: var(--danger); color: #fff; } .muted { color: var(--ink-soft); } .right { text-align: right; } .mini { font-size: 12px; color: var(--ink-soft); } /* ── Excel 式列头筛选 ── */ th .col-filter { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; margin-left: 5px; vertical-align: middle; border-radius: 5px; cursor: pointer; opacity: .75; font-size: 12px; line-height: 1; color: var(--ink-soft); background: var(--chip); user-select: none; transition: .15s; } th .col-filter:hover { opacity: 1; color: var(--brand); background: color-mix(in srgb, var(--brand) 16%, var(--chip)); } th .col-filter.on { opacity: 1; color: var(--brand-ink); background: var(--brand); } .col-filter-menu { position: fixed; z-index: 1200; width: 224px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 10px; display: flex; flex-direction: column; gap: 8px; } .col-filter-menu .cf-search { width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; } .col-filter-menu .cf-bar { display: flex; gap: 14px; font-size: 12px; padding: 0 2px; } .col-filter-menu .cf-bar a { cursor: pointer; color: var(--brand); } .col-filter-menu .cf-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; } .col-filter-menu .cf-item { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--ink); } .col-filter-menu .cf-item:hover { background: var(--chip); } .col-filter-menu .cf-item input { width: 15px; height: 15px; flex: none; margin: 0; } .col-filter-menu .cf-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); } .col-filter-menu .cf-actions button { padding: 6px 15px; font-size: 13px; border-radius: 7px; } /* ───── 我的团队 ───── */ .team-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .team-row:last-child { border-bottom: none; } .team-name { font-weight: 600; min-width: 84px; } .team-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; } .team-chip { padding: 4px 12px; border-radius: 999px; font-size: 13px; cursor: pointer; user-select: none; border: 1px solid var(--line); transition: all .12s; } .team-chip-plain { cursor: default; background: var(--panel-soft); } .team-chip-on { background: var(--chip); border-color: var(--brand); color: var(--brand); } .team-chip-off { background: var(--panel); color: var(--ink-soft); } .team-chip-off:hover { border-color: var(--brand); color: var(--brand); } .team-chip-on:hover { background: color-mix(in srgb, var(--brand) 16%, var(--chip)); } .team-add-row { display: flex; gap: 10px; align-items: center; } .team-select { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; min-width: 200px; } .panel h3 { margin: 0 0 12px; font-size: 15px; } /* 客户成交状态徽标 + 历史编辑记录 */ .cust-stage-badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; background:var(--chip); color:var(--brand); } .history-item { padding:12px 4px; border-bottom:1px solid var(--line); } .history-item:last-child { border-bottom:none; } .history-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } .history-line { font-size:13px; color:var(--ink); line-height:1.7; } .history-line.mini { color:var(--ink-soft); } /* ───── 桌面客户详情滑出面板 ───── */ .cust-panel-mask { position: fixed; inset: 0; background: rgba(0,0,0,.32); backdrop-filter: blur(2px); z-index: 90; } .cust-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 92vw; background: var(--panel); z-index: 91; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; animation: panelIn .18s ease-out; } @keyframes panelIn { from { transform: translateX(30px); opacity: .6; } to { transform: none; opacity: 1; } } .cust-panel-head { flex: 0 0 auto; padding: 16px 18px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: var(--brand-ink); position: relative; } .cust-panel-close { position: absolute; top: 12px; right: 14px; background: transparent; color: var(--brand-ink); font-size: 18px; cursor: pointer; } .cust-panel-title { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; } .cust-panel-title strong { font-size: 21px; } .cust-panel-stage { padding: 3px 11px; background: color-mix(in srgb, var(--brand-ink) 22%, transparent); border-radius: 999px; font-size: 13px; cursor: pointer; } .cust-panel-room { padding: 3px 10px; background: rgba(46,200,120,.35); border-radius: 999px; font-size: 13px; white-space: nowrap; } .cust-panel-act { display: flex; gap: 8px; } .cust-panel-act .btn-sm, .cust-panel-act .btn-danger { background: color-mix(in srgb, var(--brand-ink) 18%, transparent); color: var(--brand-ink); border: none; } .cust-panel-act .btn-danger { background: rgba(255,90,90,.5); } .cust-panel-body { flex: 1; overflow-y: auto; padding: 14px 16px; background: var(--bg); } .cust-panel-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; margin-bottom: 12px; background: color-mix(in srgb, var(--warn) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 10px; font-size: 13px; color: var(--warn); } .cust-panel-banner button { padding: 7px 14px; background: var(--warn); color: #fff; border: none; border-radius: 999px; font-size: 13px; cursor: pointer; } .cust-panel-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; } .cust-panel-card h4 { margin: 0 0 10px; font-size: 14px; color: var(--ink); } .cust-panel-kv { display: flex; gap: 12px; padding: 5px 0; font-size: 13px; } .cust-panel-kv span { color: var(--ink-soft); min-width: 76px; } .cust-panel-tags { display: flex; flex-wrap: wrap; gap: 8px; } .cust-panel-tag { padding: 5px 12px; background: var(--chip); color: var(--brand); border-radius: 999px; font-size: 12.5px; } .cust-panel-tabs { display: flex; gap: 18px; padding: 4px 2px 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; } .cust-panel-tabs button { background: transparent; border: none; font-size: 15px; color: var(--ink-soft); cursor: pointer; padding-bottom: 6px; } .cust-panel-tabs button.active { color: var(--brand); font-weight: 600; border-bottom: 2px solid var(--brand); } .cust-panel-feed-item { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; } .cust-panel-feed-item .feed-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .cust-panel-feed-item .feed-body { font-size: 13.5px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; } .cust-panel-feed-item .feed-foot { display: flex; justify-content: flex-end; margin-top: 8px; } .cust-panel-foot { flex: 0 0 auto; display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); } .cust-panel-foot button { flex: 1; padding: 11px; font-size: 14px; } .stage-opts { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; } .stage-opt { text-align: left; padding: 11px 14px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 9px; font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color .12s, background .12s; } .stage-opt:hover { border-color: var(--brand); background: var(--chip); } @media (max-width: 560px) { .cust-panel { width: 100vw; } } /* ───── 统一分页条 ───── */ .cust-pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 6px 6px; font-size: 13px; color: var(--ink-soft); } .cust-pager-total { color: var(--ink-soft); opacity: .85; } .cust-pager select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; } .cust-pager-pages { display: flex; align-items: center; gap: 5px; margin-left: auto; } .cust-page-btn { min-width: 32px; height: 30px; padding: 0 9px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 7px; cursor: pointer; font-size: 13px; transition: border-color .12s, color .12s; } .cust-page-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); } .cust-page-btn.active { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); } .cust-page-btn:disabled { opacity: .4; cursor: default; } .cust-page-gap { color: var(--ink-soft); opacity: .6; padding: 0 2px; } .cust-pager-jump { width: 54px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; } /* ───── 批量操作 + 自定义列 ───── */ .batch-op-wrap { position: relative; display: inline-block; } .batch-op-menu { display: none; position: absolute; top: 110%; left: 0; z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-pop); min-width: 160px; padding: 6px; } .batch-op-menu.show { display: block; } .batch-op-menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; background: transparent; border: none; border-radius: 6px; font-size: 13px; color: var(--ink); cursor: pointer; } .batch-op-menu button:hover { background: var(--chip); } .batch-op-custom { display: flex; gap: 6px; padding: 6px 4px 2px; border-top: 1px solid var(--line); margin-top: 4px; } .batch-op-custom input { width: 90px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; } .cust-batch-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 4px; background: var(--chip); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); border-radius: 8px; } .cust-batch-count { font-weight: 600; color: var(--brand); } .col-config-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; padding: 2px; } .col-config-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; cursor: pointer; background: var(--soft, #f7f7fa); user-select: none; } .col-config-item .col-drag { cursor: grab; color: var(--muted, #999); font-size: 14px; line-height: 1; flex-shrink: 0; } .col-config-item .col-drag:active { cursor: grabbing; } .col-config-item.dragging { opacity: .45; } .col-config-item.drag-over { border-color: var(--brand); border-style: dashed; } .table .ell, td.ell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 客户查重 */ .dedup-extra { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; } .dedup-cond { display: flex; gap: 8px; align-items: center; } .dedup-cond select, .dedup-cond input { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; } .dedup-cond input { flex: 1; } .dedup-add { display: inline-block; margin: 4px 0 8px; color: var(--brand); font-size: 13px; } .dedup-result { max-height: 40vh; overflow-y: auto; } /* 桌面客户筛选条 */ .cust-filter-bar .cust-filter-sel { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; background: var(--panel); } .cust-filter-bar { align-items: center; } /* 成交大脑 C1:AI 话术/跟进 */ .btn-ai { background: linear-gradient(90deg, var(--brand), var(--brand-dark)); color: var(--brand-ink); border:none; border-radius:8px; padding:7px 12px; font-size:13px; cursor:pointer; font-weight:600; } .btn-ai:hover { filter:brightness(1.08); } .coach-out { white-space:pre-wrap; line-height:1.65; margin-top:10px; min-height:60px; max-height:52vh; overflow-y:auto; background:var(--panel-soft); border:1px solid var(--line); border-radius:8px; padding:12px 14px; font-size:13.5px; color:var(--ink); } /* 🧠 成交大脑 */ .brain-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; } .brain-card { border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--panel); display:flex; flex-direction:column; gap:8px; transition: box-shadow .18s, transform .18s; } .brain-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); } .brain-card-top { display:flex; align-items:center; justify-content:space-between; } .brain-cat { background:var(--chip); color:var(--brand); font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; } .brain-weight { font-size:12px; color:var(--warn); font-weight:700; } .brain-scenario { font-size:12.5px; color:var(--ink-soft); } .brain-technique { font-size:13.5px; line-height:1.6; color:var(--ink); white-space:pre-wrap; } .brain-card-foot { display:flex; align-items:center; gap:8px; margin-top:2px; } .brain-tag { font-size:11px; color:var(--ink-soft); background:var(--panel-soft); padding:2px 8px; border-radius:6px; } /* 看板·客户转化漏斗 */ .dash-section-title { margin: 26px 0 12px; font-size: 16px; } .dash-sub { margin: 18px 0 8px; font-size: 13px; color: var(--ink-soft); } .funnel { display: flex; flex-direction: column; gap: 7px; max-width: 720px; } .funnel-row { display: flex; align-items: center; gap: 10px; } .funnel-label { width: 92px; font-size: 13px; color: var(--ink); flex-shrink: 0; text-align: right; } .funnel-bar-wrap { flex: 1; background: var(--panel-soft); border-radius: 6px; overflow: hidden; height: 22px; } .funnel-bar { height: 100%; border-radius: 6px; min-width: 2px; } .funnel-val { width: 116px; font-size: 12.5px; color: var(--ink-soft); flex-shrink: 0; } .dash-table { max-width: 560px; margin-top: 4px; } .dash-table .num { text-align: right; } .dash-source { display: flex; gap: 18px; margin: 16px 0; font-size: 13px; color: var(--ink-soft); flex-wrap: wrap; } .dash-source span { background: var(--panel-soft); padding: 6px 14px; border-radius: 8px; } /* 跨项目客户:项目标签 */ .proj-chip { display:inline-block; background:var(--chip); color:var(--brand); font-size:12px; padding:2px 9px; border-radius:6px; white-space:nowrap; } /* 交款单识别确认 */ .pay-match { margin-bottom: 12px; } .pay-match-ok { background:color-mix(in srgb, var(--ok) 10%, var(--panel)); color:var(--ok); padding:9px 12px; border-radius:8px; font-size:13px; } .pay-match-no { background:color-mix(in srgb, var(--warn) 10%, var(--panel)); color:var(--warn); padding:9px 12px; border-radius:8px; font-size:13px; } .pay-deal-list { max-height:160px; overflow-y:auto; margin-top:6px; display:flex; flex-direction:column; gap:4px; } .pay-deal-opt { text-align:left; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--ink); font-size:13px; cursor:pointer; } .pay-deal-opt:hover { background:var(--chip); } .pay-ref { margin:10px 0; padding:8px 10px; background:var(--panel-soft); border-radius:7px; color:var(--ink-soft); line-height:1.6; } /* ───── 看板美化 + 经营统计 ───── */ .dash-section-head { display:flex; align-items:center; justify-content:space-between; margin:26px 0 12px; flex-wrap:wrap; gap:10px; } .dash-section-head .dash-section-title { margin:0; } .dash-section-title { font-size:16px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:6px; } .cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px; margin-bottom: 22px; } .stat-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:15px 18px; transition:box-shadow .2s, transform .2s; position:relative; overflow:hidden; } .stat-card:hover { box-shadow:var(--shadow); transform:translateY(-1px); } .stat-card .label { font-size:13px; color:var(--ink-soft); margin-bottom:8px; } .stat-card .value { font-size:25px; font-weight:700; color:var(--ink); line-height:1.1; } .stat-card .value.small { font-size:21px; } .stat-card .value .unit { font-size:13px; font-weight:400; color:var(--ink-soft); margin-left:3px; } .stat-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--brand); } .stat-card.sc-deal::before { background:var(--ok); } .stat-card.sc-pay::before { background:var(--warn); } .period-seg { display:inline-flex; background:var(--panel-soft); border-radius:9px; padding:3px; gap:2px; } .period-btn { border:none; background:transparent; padding:6px 16px; border-radius:7px; font-size:13px; color:var(--ink-soft); cursor:pointer; } .period-btn.active { background:var(--panel); color:var(--brand); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.1); } .leaderboard { margin-top:18px; } .lb-tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:8px; flex-wrap:wrap; } .lb-tab { border:none; background:transparent; padding:8px 14px; font-size:13px; color:var(--ink-soft); cursor:pointer; border-bottom:2px solid transparent; } .lb-tab.active { color:var(--brand); font-weight:600; border-bottom-color:var(--brand); } .lb-body { max-width:560px; } .lb-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; } .lb-row:nth-child(odd) { background:var(--panel-soft); } .lb-rank { width:28px; text-align:center; font-size:15px; font-weight:700; color:var(--ink-soft); opacity:.7; } .lb-rank.r1, .lb-rank.r2, .lb-rank.r3 { font-size:18px; opacity:1; } .lb-name { flex:1; font-size:14px; color:var(--ink); } .lb-val { font-weight:700; color:var(--brand); font-size:15px; } /* 公海设置 */ .pool-cfg-divider { margin:14px 0 6px; padding-top:12px; border-top:1px solid var(--line); font-weight:600; color:var(--ink-soft); font-size:13px; } /* AI 多方案可选卡片 */ .coach-opt { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; cursor:pointer; transition:border-color .15s, background .15s; } .coach-opt:hover { border-color:color-mix(in srgb, var(--brand) 45%, var(--line)); } .coach-opt.sel { border-color:var(--brand); background:var(--chip); } .coach-opt-head { display:flex; align-items:center; gap:8px; margin-bottom:5px; } .coach-opt-radio { color:var(--brand); font-size:15px; } .coach-opt-body { white-space:pre-wrap; line-height:1.6; font-size:13.5px; color:var(--ink); } .coach-tip { font-size:12px; color:var(--ink-soft); margin-bottom:8px; } /* 修复:小号主按钮(白字白底→品牌底白字) */ .btn-sm.btn-primary { background: var(--brand); color: var(--brand-ink); border: none; padding: 5px 12px; } .btn-sm.btn-primary:hover { background: var(--brand-dark); color: var(--brand-ink); border: none; } /* 修复:弹窗内直接子级 label 的排版(公海设置/批量编辑/话术等) */ .modal-body > label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); margin-bottom: 13px; } .modal-body > label > select, .modal-body > label > input, .modal-body > label > textarea { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; box-sizing: border-box; } .modal-body > label > input[type="number"] { width: 140px; } .modal-body > label > input[type="checkbox"] { width: 18px; height: 18px; } /* 深色主题下的浅色状态胶囊微调:半透明底保持可读 */ html[data-theme="xai"] .s-待售 { background: rgba(63,174,90,.16); color: #57c877; } html[data-theme="xai"] .s-下定 { background: rgba(232,160,32,.16); color: #ecb455; } html[data-theme="xai"] .s-已签约 { background: rgba(66,133,244,.18); color: #7aa8ff; } html[data-theme="xai"] .s-首付齐 { background: rgba(240,151,43,.16); color: #efb066; } html[data-theme="xai"] .s-款清 { background: rgba(31,157,107,.18); color: #4ecb96; } html[data-theme="xai"] .s-已交房 { background: rgba(31,127,176,.2); color: #62b1dc; } html[data-theme="xai"] .s-退房 { background: rgba(216,80,58,.18); color: #ec8873; } html[data-theme="xai"] .cust-panel-room { background: rgba(46,200,120,.26); } html[data-theme="gold"] .s-待售 { background: rgba(63,174,90,.16); color: #57c877; } html[data-theme="gold"] .s-下定 { background: rgba(232,160,32,.16); color: #ecb455; } html[data-theme="gold"] .s-已签约 { background: rgba(66,133,244,.18); color: #7aa8ff; } html[data-theme="gold"] .s-首付齐 { background: rgba(240,151,43,.16); color: #efb066; } html[data-theme="gold"] .s-款清 { background: rgba(31,157,107,.18); color: #4ecb96; } html[data-theme="gold"] .s-已交房 { background: rgba(31,127,176,.2); color: #62b1dc; } html[data-theme="gold"] .s-退房 { background: rgba(216,80,58,.18); color: #ec8873; } html[data-theme="gold"] .cust-panel-room { background: rgba(46,200,120,.26); } /* 设置模板 */ .tpl-list { display: flex; flex-direction: column; gap: 10px; } .tpl-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; } .tpl-card .tpl-main { flex: 1; min-width: 0; } .tpl-card .tpl-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; } .tpl-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } /* ── 第三档：统一加载 spinner + 列头筛选提示 ── */ .loading-row { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 40px; color: var(--ink-soft); font-size: 13px; } .loading-row.mini { padding: 14px; font-size: 12px; } .loading-row .loading-dot { width: 16px; height: 16px; border-width: 2px; } .cf-tip { font-size: 12px; color: var(--warn); padding: 2px 2px 6px; }