/* ===== 联系人图谱/页签增强(A4-4-2 §6,票 02 收编自 customer-contact-graph demo 修订⑧版) ===== */ .graph-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; } .graph-head .gtitle { font-size:15px; font-weight:600; } .unsaved-chip { display:none; background:#fef3c7; color:#b45309; border:1px solid #fcd34d; font-size:12px; padding:2px 10px; border-radius:10px; } .unsaved-chip.show { display:inline-block; } #graphWrap { position:relative; height:640px; border:1px solid #e4e7ed; border-radius:8px; overflow:hidden; background:#fff; background-image:radial-gradient(#e5e7eb 1px, transparent 1px); background-size:24px 24px; cursor:grab; } #graphWrap.panning { cursor:grabbing; } #graphWrap.editing { cursor:default; } #hintBar { display:none; position:absolute; top:0; left:0; right:0; z-index:30; background:#fff7ed; color:#9a3412; font-size:12px; padding:6px 16px; border-bottom:1px solid #fed7aa; } #hintBar.show { display:block; } #canvasInner { position:absolute; top:0; left:0; width:2400px; height:1400px; transform-origin:0 0; } #edgeSvg { position:absolute; top:0; left:0; width:2400px; height:1400px; pointer-events:none; } #edgeSvg .edge-hit { stroke:transparent; stroke-width:16; fill:none; pointer-events:stroke; cursor:pointer; } #edgeSvg .edge-line { stroke:#3b82f6; stroke-width:2; } #edgeSvg .edge-pending { stroke:#93c5fd; stroke-width:3; } #edgeSvg .edge-cycle { stroke:#dc2626 !important; stroke-width:3; } #edgeSvg g.edge-g:hover .edge-line { stroke:#dc2626; stroke-dasharray:6 4; } #edgeSvg g.edge-company .edge-line { stroke:#93c5fd; stroke-dasharray:7 5; } /* 修订⑧:公司边派生视图,虚线浅蓝不可删 */ #edgeSvg g.edge-company:hover .edge-line { stroke:#93c5fd; stroke-dasharray:7 5; } #edgeSvg .edge-del { opacity:0; } #edgeSvg g.edge-g:hover .edge-del { opacity:1; } .zoom-ctl { position:absolute; right:14px; bottom:14px; z-index:30; display:flex; align-items:center; background:#fff; border:1px solid #e4e7ed; border-radius:6px; overflow:hidden; } .zoom-ctl button { width:34px; height:30px; background:#fff; font-size:16px; color:#374151; border:none; cursor:pointer; } .zoom-ctl button:hover { background:#f3f4f6; } .zoom-ctl span { font-size:12px; padding:0 8px; min-width:44px; text-align:center; color:#6b7280; } .gcard { position:absolute; width:150px; background:#fff; border:1px solid #e5e7eb; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,.08); padding:10px 12px 12px; z-index:10; user-select:none; } .gcard .avatar { width:34px; height:34px; border-radius:50%; background:#dbeafe; color:#2563eb; font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:center; margin-bottom:6px; } .gcard .gname { font-size:14px; font-weight:600; } .gcard .gjob { font-size:12px; color:#6b7280; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:124px; } .gcard .gphone { font-size:12px; color:#2563eb; margin-top:4px; text-decoration:underline dotted; cursor:pointer; } .gcard .gphone.revealed { color:#1f2937; text-decoration:none; } .gcard .top-badge { position:absolute; top:-9px; left:10px; background:#eff6ff; border:1px solid #93c5fd; color:#2563eb; font-size:11px; padding:0 8px; border-radius:8px; } .gcard .lv-chip { position:absolute; top:8px; right:8px; background:#eff6ff; border:1px solid #dbeafe; color:#2563eb; font-size:10.5px; padding:0 5px; border-radius:8px; } .gcard .dot { display:none; position:absolute; width:12px; height:12px; border-radius:50%; background:#2563eb; border:2px solid #fff; box-shadow:0 0 0 1px #93c5fd; z-index:20; } .gcard .dot::after { content:''; position:absolute; left:-9px; top:-9px; right:-9px; bottom:-9px; } .gcard .dot-top { top:-7px; left:50%; margin-left:-7px; cursor:crosshair; } .gcard .dot-bottom { bottom:-7px; left:50%; margin-left:-7px; cursor:crosshair; } body.graph-edit .gcard .dot { display:block; } body.graph-edit .gcard { cursor:move; } .gcard.company { width:240px; background:#1e3a8a; border-color:#1e3a8a; color:#fff; text-align:center; cursor:default; } .gcard.company .gname { font-size:15px; letter-spacing:1px; } .gcard.company .gjob { color:#bfdbfe; } .gcard.link-target { box-shadow:0 0 0 3px #93c5fd; } #unrecZone { position:absolute; border:2px dashed #d1d5db; border-radius:10px; background:rgba(249,250,251,.6); z-index:5; } #unrecZone .zone-label { position:absolute; top:8px; left:14px; color:#9ca3af; font-size:12px; } #unrecZone .zone-sub { position:absolute; top:26px; left:14px; color:#c1c9d4; font-size:11px; } .lv-row { position:absolute; border-radius:8px; background:rgba(241,245,249,.5); border:1px solid #e8edf3; z-index:1; } .lv-row .row-label { position:absolute; left:10px; top:6px; font-size:11px; color:#9aa6b5; letter-spacing:1px; } .lv-row.drop-target { border-color:#2563eb; background:rgba(219,234,254,.55); } #bubble { display:none; position:absolute; z-index:40; width:230px; background:#fff; border:1px solid #e5e7eb; border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.14); padding:10px 12px; font-size:12px; line-height:1.9; } #bubble .b-title { font-weight:600; border-bottom:1px solid #f3f4f6; padding-bottom:4px; margin-bottom:4px; } #bubble .b-row { display:flex; justify-content:space-between; color:#4b5563; } #bubble .b-row b { color:#1f2937; font-weight:500; } .phone-masked { color:#2563eb; text-decoration:underline dotted; cursor:pointer; } .phone-plain { color:#1f2937; } .opt-link { color:#2563eb; cursor:pointer; margin-right:10px; font-size:13px; } .opt-link.danger { color:#dc2626; } .undo-link { color:#ea580c; cursor:pointer; font-size:12px; } .dirty-row td { background:#fffbeb !important; } tr.err-row td { background:#fef2f2 !important; } .sel-info { font-size:12px; color:#2563eb; } .edge-chip { display:inline-block; background:#f3f4f6; border-radius:4px; padding:0 6px; margin:2px 4px 2px 0; font-size:11.5px; } .edge-chip.manual { background:#dcfce7; color:#166534; } .edge-chip.pending { background:#fef9c3; color:#854d0e; } .edge-chip.veto { background:#fee2e2; color:#991b1b; text-decoration:line-through; } .edge-chip.company { background:#dbeafe; color:#1e40af; } .overlay { display:none; position:fixed; inset:0; background:rgba(17,24,39,.45); z-index:100; align-items:flex-start; justify-content:center; padding-top:9vh; } .overlay.show { display:flex; } .modal { background:#fff; border-radius:10px; width:960px; max-width:94vw; max-height:82vh; display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,.2); } .modal-head { display:flex; align-items:center; padding:14px 20px; border-bottom:1px solid #f3f4f6; } .modal-head h3 { font-size:15px; } .modal-close { margin-left:auto; color:#9ca3af; font-size:18px; background:none; border:none; cursor:pointer; } .modal-body { padding:16px 20px; overflow-y:auto; } .modal-foot { display:flex; gap:10px; padding:12px 20px; border-top:1px solid #f3f4f6; justify-content:flex-end; } .modal-foot .btn, .modal-body .btn { padding:6px 14px; font-size:13px; background:#fff; border:1px solid #dcdfe6; color:#374151; border-radius:4px; cursor:pointer; } .modal-foot .btn-primary, .modal-body .btn-primary { background:#409eff; color:#fff; border-color:#409eff; } #qaTable { width:100%; border-collapse:collapse; } #qaTable th, #qaTable td { border:1px solid #f3f4f6; padding:6px 8px; font-size:12.5px; } #qaTable th { background:#f9fafb; color:#6b7280; font-weight:500; } #qaTable tr.qa-err td { background:#fef2f2; } #qaTable tr.qa-dup td { background:#fffbeb; } .qa-hint { font-size:11.5px; color:#92400e; display:block; } .star-link { cursor:pointer; font-size:15px; color:#d9a406; user-select:none; } .star-link.off { color:#c0c4cc; }