/* A3 客户与行业页面(混搭布局:客户域 A / 行业与客户组 B / 字段审批 A) */ .lx-client-page { display: flex; flex-direction: column; gap: 16px; min-height: 0; flex: 1; } .lx-client-header { display: flex; align-items: flex-start; gap: 16px; } .lx-client-header h1 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; } .lx-client-header p { margin: 2px 0 0; font-size: 12px; line-height: 18px; color: var(--lx-text-2, #8f959e); } .lx-client-header__actions { margin-left: auto; display: flex; gap: 8px; flex: none; } .lx-client-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid #e5e8ef; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(31, 35, 41, 0.04); } .lx-client-filters .semi-input-prefix { margin: 0 12px 0 10px; } .lx-client-filters .semi-input-prefix-icon { margin: 0; } .lx-client-split { display: flex; gap: 16px; flex: 1; min-height: 0; } .lx-client-left { width: 380px; flex: none; background: #fff; border: 1px solid var(--lx-border, #e5e8ef); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; } .lx-client-left__head { height: 48px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid #eef1f6; } .lx-client-left__head b { font-size: 13px; } .lx-client-left__head span { margin-left: auto; font-size: 12px; color: #646a73; } .lx-client-left__body { flex: 1; min-height: 0; overflow: auto; padding: 8px; } .lx-client-left__foot { height: 40px; flex: none; display: flex; align-items: center; padding: 0 14px; border-top: 1px solid #eef1f6; font-size: 12px; color: #646a73; } .lx-client-right { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--lx-border, #e5e8ef); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; } .lx-client-right__head { flex: none; padding: 16px 18px; border-bottom: 1px solid #eef1f6; display: flex; align-items: flex-start; gap: 12px; } .lx-client-right__head h2 { margin: 0; font-size: 16px; line-height: 24px; } .lx-client-right__head p { margin: 2px 0 0; font-size: 12px; color: #646a73; } .lx-client-right__head .lx-client-header__actions { margin-left: auto; } .lx-client-right__body { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px 20px; } .lx-client-tree { display: flex; flex-direction: column; gap: 2px; } .lx-client-tree__row { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; border-radius: 6px; background: transparent; color: #646a73; font-size: 13px; text-align: left; } .lx-client-tree__row:hover { background: #f2f4f7; color: #1f2329; } .lx-client-tree__row.is-active { background: #e8f1ff; color: #1677ff; } .lx-client-tree__row.is-child { padding-left: 30px; height: 30px; } .lx-client-tree__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lx-client-tree__count { font-size: 11px; color: #8f959e; } .lx-client-tree__row.is-active .lx-client-tree__count { color: #1677ff; } .lx-client-table-card { background: #fff; border: 1px solid #e5e8ef; border-radius: 10px; overflow: hidden; } .lx-client-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 48px 24px; color: #646a73; font-size: 12px; } .lx-client-empty b { font-size: 13px; color: #1f2329; } .lx-client-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr) 280px; gap: 16px; align-items: start; } .lx-client-anchors { background: #fff; border: 1px solid #e5e8ef; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; } .lx-client-anchors a { display: flex; align-items: center; height: 32px; padding: 0 10px; border-radius: 6px; font-size: 13px; color: #646a73; } .lx-client-anchors a:hover { background: #f2f4f7; color: #1f2329; } .lx-client-panel { background: #fff; border: 1px solid #e5e8ef; border-radius: 10px; padding: 18px 20px; min-width: 0; } .lx-client-side { display: flex; flex-direction: column; gap: 14px; } .lx-client-sidecard { background: #fff; border: 1px solid #e5e8ef; border-radius: 10px; padding: 14px 16px; } .lx-client-sidecard h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; } .lx-client-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; } .lx-client-kv__item span { display: block; font-size: 12px; color: #646a73; } .lx-client-kv__item b { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; } .lx-client-section { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #eef1f6; } .lx-client-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .lx-client-section__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .lx-client-section__head b { font-size: 14px; } .lx-client-hint { margin-top: 8px; font-size: 12px; line-height: 18px; color: #646a73; } .lx-client-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 4px; font-size: 11px; } .lx-client-tag--active { background: #e8ffea; color: #008a24; } .lx-client-tag--paused { background: #fff4e8; color: #d25f00; } .lx-client-tag--ended { background: #f2f4f7; color: #646a73; } .lx-client-tag--disabled { background: #f2f4f7; color: #646a73; } .lx-client-banner { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 6px; font-size: 12px; } .lx-client-banner--paused { background: #fff4e8; color: #d25f00; } .lx-client-banner--ended { background: #f2f4f7; color: #646a73; } .lx-client-chips { display: flex; flex-wrap: wrap; gap: 6px; } .lx-client-chip { height: 28px; padding: 0 9px; border-radius: 6px; background: #fafbfc; border: 1px solid #eef1f6; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; } .lx-client-newgrid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; flex: 1; min-height: 0; } .lx-client-stepnav { background: #fff; border: 1px solid #e5e8ef; border-radius: 10px; padding: 16px; } .lx-client-formcard { background: #fff; border: 1px solid #e5e8ef; border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; } .lx-client-formcard__body { padding: 20px 22px; flex: 1; overflow: auto; } .lx-client-formcard__foot { height: 60px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 20px; border-top: 1px solid #eef1f6; } .lx-client-formcard__foot .spacer { flex: 1; } .lx-client-formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; } .lx-client-formgrid .is-full { grid-column: 1 / -1; } .lx-client-field { display: flex; flex-direction: column; gap: 6px; } .lx-client-field > label { font-size: 12px; color: #646a73; } .lx-client-field > label i { color: #f53f3f; font-style: normal; } .lx-client-memberlist { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; } .lx-client-memberrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #eef1f6; border-radius: 6px; } .lx-client-memberrow b { font-size: 13px; font-weight: 500; } .lx-client-memberrow span { margin-left: auto; font-size: 12px; color: #646a73; } .lx-client-assetempty { border: 1px dashed #d0d5dd; border-radius: 6px; background: #fafbfc; padding: 20px; font-size: 12px; line-height: 20px; color: #646a73; } .lx-client-assetempty b { display: block; font-size: 13px; color: #1f2329; margin-bottom: 4px; } @media (max-width: 1280px) { .lx-client-grid { grid-template-columns: 180px minmax(0, 1fr); } .lx-client-grid .lx-client-side { display: none; } .lx-client-left { width: 330px; } } .lx-client-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; } .lx-client-table th { height: 40px; padding: 0 14px; text-align: left; background: #fafbfc; border-bottom: 1px solid #eef1f6; color: #646a73; font-size: 12px; font-weight: 500; white-space: nowrap; } .lx-client-table td { padding: 12px 14px; border-bottom: 1px solid #eef1f6; color: #646a73; vertical-align: middle; line-height: 20px; } .lx-client-table tbody tr { cursor: pointer; } .lx-client-table tbody tr:hover { background: #f8fbff; } .lx-client-table td b { font-weight: 500; color: #1f2329; } .lx-client-sub { display: block; font-size: 11px; color: #646a73; } .lx-client-muted { color: #646a73; font-size: 12px; } .lx-client-count { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 4px; background: #f2f4f7; color: #646a73; font-size: 12px; font-variant-numeric: tabular-nums; } .lx-client-count.is-full { background: #fff4e8; color: #d25f00; } .lx-client-tablefoot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 12px; color: #646a73; border-top: 1px solid #eef1f6; } .lx-client-tablefoot .semi-button { margin-left: auto; } .lx-client-back { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #646a73; margin-bottom: 4px; } .lx-client-back:hover { color: #1677ff; } /* 行业管理 B:头部 / Tab / 子行业 / 引用(对齐 design/a3-ui-v1/b) */ .lx-industry-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid #eef1f6; } .lx-industry-avatar { width: 48px; height: 48px; border-radius: 50%; background: #e8f1ff; color: #1677ff; display: inline-flex; align-items: center; justify-content: center; flex: none; } .lx-industry-id { min-width: 0; flex: 1; } .lx-industry-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lx-industry-name b { font-size: 16px; line-height: 24px; } .lx-industry-meta { margin-top: 2px; font-size: 12px; line-height: 17px; color: #646a73; } .lx-industry-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; } .lx-industry-tabs { display: flex; align-items: stretch; gap: 2px; height: 44px; padding: 0 10px; border-bottom: 1px solid #eef1f6; flex: none; } .lx-industry-tabs button { position: relative; padding: 0 12px; border: 0; background: transparent; font-size: 13px; color: #646a73; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .lx-industry-tabs button:hover { color: #1f2329; } .lx-industry-tabs button.is-on { color: #1677ff; font-weight: 500; } .lx-industry-tabs button.is-on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: #1677ff; } .lx-industry-tabs i { font-style: normal; font-size: 12px; color: #646a73; } .lx-industry-tabs button.is-on i { color: #1677ff; } .lx-industry-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px 20px; } .lx-industry-note { margin-top: 14px; padding: 10px 12px; border-radius: 6px; background: #fafbfc; border: 1px solid #eef1f6; font-size: 12px; line-height: 18px; color: #646a73; display: flex; gap: 8px; } .lx-industry-sec { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eef1f6; } .lx-industry-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .lx-industry-sec-head b { font-size: 13px; } .lx-industry-sec-head span { font-size: 12px; color: #646a73; } .lx-timeline { display: flex; flex-direction: column; gap: 14px; padding-left: 4px; } .lx-timeline-item { position: relative; padding-left: 16px; } .lx-timeline-item > i { position: absolute; left: 0; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid #d0d5dd; } .lx-timeline-item.is-first > i { border-color: #1677ff; } .lx-timeline-item b { display: block; font-size: 13px; font-weight: 400; color: #1f2329; } .lx-timeline-item span { display: block; margin-top: 2px; font-size: 12px; color: #646a73; } .lx-industry-childlist { display: flex; flex-direction: column; } .lx-industry-childrow { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px; border: 0; border-bottom: 1px solid #eef1f6; background: transparent; font-size: 13px; color: #646a73; text-align: left; cursor: pointer; } .lx-industry-childrow:hover { background: #f8fbff; } .lx-industry-childrow b { font-weight: 500; color: #1f2329; } .lx-industry-childrow span { font-size: 12px; } .lx-industry-childrow em { margin-left: auto; font-style: normal; font-size: 12px; color: #1677ff; } .lx-industry-childdot { width: 6px; height: 6px; border-radius: 50%; background: #d0d5dd; flex: none; } .lx-industry-reflist { display: flex; flex-direction: column; gap: 6px; } .lx-industry-refrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #eef1f6; border-radius: 6px; } .lx-industry-refavatar { width: 28px; height: 28px; border-radius: 6px; background: #e8f1ff; color: #1677ff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: none; } .lx-industry-refrow b { display: block; font-size: 13px; font-weight: 500; } .lx-industry-refrow span { display: block; font-size: 12px; color: #646a73; } /* 新建客户 B:步骤导航 + 两级行业卡片 */ .lx-client-stepnav { background: #fff; border: 1px solid #e5e8ef; border-radius: 10px; padding: 16px 14px; align-self: flex-start; } .lx-client-stepnav__head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 10px; } .lx-client-stepnav__head b { font-size: 14px; } .lx-client-stepnav__head span { font-size: 12px; color: #646a73; } .lx-stepnav-item { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px; border: 0; border-radius: 6px; background: transparent; text-align: left; cursor: pointer; color: #646a73; } .lx-stepnav-item:hover { background: #f7f8fa; } .lx-stepnav-item.is-on { background: #e8f1ff; } .lx-stepnav-num { width: 24px; height: 24px; border-radius: 50%; background: #f2f4f7; color: #646a73; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: none; } .lx-stepnav-item.is-on .lx-stepnav-num { background: #1677ff; color: #fff; } .lx-stepnav-item.is-done .lx-stepnav-num { background: #e8ffea; color: #008a24; } .lx-stepnav-text b { display: block; font-size: 13px; font-weight: 500; color: #646a73; } .lx-stepnav-text span { display: block; margin-top: 2px; font-size: 11px; line-height: 15px; color: #646a73; } .lx-stepnav-item.is-on .lx-stepnav-text b { color: #1677ff; } .lx-client-formcard__head { flex: none; padding: 14px 20px 10px; border-bottom: 1px solid #eef1f6; } .lx-client-formcard__head b { display: block; font-size: 14px; } .lx-client-formcard__head span { display: block; margin-top: 2px; font-size: 12px; color: #646a73; } .lx-indpick { display: flex; flex-direction: column; gap: 12px; } .lx-indpick-group { border: 1px solid #eef1f6; border-radius: 6px; overflow: hidden; } .lx-indpick-root { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; background: #fafbfc; border-bottom: 1px solid #eef1f6; } .lx-indpick-dot { width: 7px; height: 7px; border-radius: 2px; background: #1677ff; } .lx-indpick-root b { font-size: 13px; } .lx-indpick-root span { margin-left: auto; font-size: 12px; color: #646a73; } .lx-indpick-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 10px 14px; } .lx-radio { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; font-size: 13px; color: #646a73; text-align: left; cursor: pointer; } .lx-radio:hover { background: #f7f8fa; } .lx-radio.is-on { background: #e8f1ff; border-color: rgba(22, 119, 255, 0.24); color: #1f2329; } .lx-radio-dot { width: 15px; height: 15px; border-radius: 50%; border: 1px solid #d0d5dd; background: #fff; flex: none; position: relative; } .lx-radio.is-on .lx-radio-dot { border-color: #1677ff; } .lx-radio.is-on .lx-radio-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #1677ff; } .lx-radio i { margin-left: auto; font-style: normal; font-size: 11px; color: #646a73; } .lx-client-membertable { margin-top: 12px; border: 1px solid #eef1f6; border-radius: 6px; overflow: hidden; } .lx-client-membertable__head, .lx-client-membertable__row { display: grid; grid-template-columns: 1.3fr 1.6fr 0.8fr 0.8fr 0.6fr; gap: 10px; align-items: center; padding: 10px 12px; } .lx-client-membertable__head { background: #fafbfc; font-size: 12px; color: #646a73; border-bottom: 1px solid #eef1f6; } .lx-client-membertable__row { border-bottom: 1px solid #eef1f6; font-size: 13px; color: #646a73; } .lx-client-membertable__row:last-child { border-bottom: 0; } .lx-client-membertable__row b { color: #1f2329; font-weight: 500; } .lx-client-membertable__row i { margin-left: 6px; font-style: normal; font-size: 11px; color: #646a73; } .lx-client-linkdanger { border: 0; background: transparent; color: #f53f3f; font-size: 12px; cursor: pointer; text-align: left; } .lx-client-linkdanger:hover { text-decoration: underline; } .lx-client-tablehead { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #eef1f6; } .lx-client-tablehead b { font-size: 14px; } .lx-client-tablehead span { font-size: 12px; color: #646a73; } .lx-client-tablehead__stats { margin-left: auto; display: flex; gap: 14px; font-size: 12px; color: #646a73; } .lx-client-tablehead__stats b { font-size: 14px; margin-left: 4px; } .lx-client-seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 6px; background: #f5f7fa; } .lx-client-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: #646a73; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .lx-client-seg button.is-on { background: #fff; color: #1f2329; font-weight: 500; box-shadow: 0 1px 2px rgba(31, 35, 41, 0.08); } .lx-client-seg i { font-style: normal; font-size: 12px; color: #646a73; } .lx-client-sideacts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .lx-client-sideacts .semi-button { width: 100%; justify-content: flex-start; } .lx-client-tag { width: max-content; } .lx-client-newgrid { min-height: 620px; } .lx-client-stepnav, .lx-client-formcard { min-height: 620px; } .lx-tree-caret { width: 14px; font-size: 12px; color: #8f959e; flex: none; } .lx-tree-dot { width: 6px; height: 6px; border-radius: 50%; background: #d0d5dd; flex: none; } .lx-client-tree__row.is-child .lx-tree-dot { margin-left: 6px; }