You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
7.5 KiB
85 lines
7.5 KiB
1 day ago
|
/* ===== 联系人图谱/页签增强（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; }
|