166 lines
16 KiB
HTML
166 lines
16 KiB
HTML
<!-- 客户分析页 -->
|
||
<style>
|
||
.page-cust-analysis .ca-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
|
||
.page-cust-analysis .ca-stat {
|
||
background:#fff; border-radius:10px; padding:16px 20px;
|
||
box-shadow:var(--g-shadow-sm); transition:var(--g-transition);
|
||
}
|
||
.page-cust-analysis .ca-stat:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
|
||
.page-cust-analysis .ca-stat .label { font-size:13px; color:var(--g-text-muted); margin-bottom:6px; }
|
||
.page-cust-analysis .ca-stat .val { font-size:24px; font-weight:700; color:var(--g-text); }
|
||
.page-cust-analysis .ca-stat .val.blue { color:var(--primary); }
|
||
.page-cust-analysis .ca-stat .val.green { color:var(--g-success); }
|
||
.page-cust-analysis .ca-stat .val.orange { color:var(--g-warning); }
|
||
.page-cust-analysis .ca-stat .sub { font-size:12px; color:var(--g-text-muted); margin-top:4px; }
|
||
|
||
.page-cust-analysis .ca-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
|
||
.page-cust-analysis .ca-card { background:#fff; border-radius:10px; padding:20px; box-shadow:var(--g-shadow-sm); }
|
||
.page-cust-analysis .ca-card.full { grid-column:1/-1; }
|
||
.page-cust-analysis .ca-card-title { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
|
||
|
||
.page-cust-analysis .ca-bars { display:flex; align-items:flex-end; gap:6px; height:140px; }
|
||
.page-cust-analysis .ca-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
|
||
.page-cust-analysis .ca-bar { width:100%; border-radius:4px 4px 0 0; transition:var(--g-transition); cursor:pointer; }
|
||
.page-cust-analysis .ca-bar:hover { opacity:.85; }
|
||
.page-cust-analysis .ca-bar-lbl { font-size:11px; color:var(--g-text-muted); }
|
||
.page-cust-analysis .ca-bar-val { font-size:11px; color:var(--g-text-secondary); font-weight:500; }
|
||
|
||
.page-cust-analysis .ca-donut-wrap { display:flex; align-items:center; gap:24px; }
|
||
.page-cust-analysis .ca-donut {
|
||
width:130px; height:130px; border-radius:50%; position:relative; flex-shrink:0;
|
||
background:conic-gradient(var(--primary) 0deg 158deg, var(--g-success) 158deg 270deg, var(--g-warning) 270deg 331deg, #e5e7eb 331deg 360deg);
|
||
}
|
||
.page-cust-analysis .ca-donut-hole {
|
||
position:absolute; inset:25px; border-radius:50%; background:#fff;
|
||
display:flex; flex-direction:column; align-items:center; justify-content:center;
|
||
}
|
||
.page-cust-analysis .ca-donut-hole .num { font-size:18px; font-weight:700; color:var(--g-text); }
|
||
.page-cust-analysis .ca-donut-hole .lbl { font-size:11px; color:var(--g-text-muted); }
|
||
.page-cust-analysis .ca-legend { font-size:13px; }
|
||
.page-cust-analysis .ca-legend-item { display:flex; align-items:center; gap:8px; padding:6px 0; }
|
||
.page-cust-analysis .ca-legend-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
|
||
|
||
.page-cust-analysis .ca-rfm { display:grid; grid-template-columns:auto repeat(4,1fr); gap:2px; font-size:12px; }
|
||
.page-cust-analysis .ca-rfm-header { background:#f8f9fb; padding:8px; text-align:center; font-weight:600; color:#6b7280; }
|
||
.page-cust-analysis .ca-rfm-label { background:#f8f9fb; padding:8px 10px; font-weight:600; color:#6b7280; white-space:nowrap; }
|
||
.page-cust-analysis .ca-rfm-cell { padding:10px 8px; text-align:center; border-radius:4px; font-weight:500; cursor:pointer; transition:var(--g-transition); }
|
||
.page-cust-analysis .ca-rfm-cell:hover { transform:scale(1.05); }
|
||
.page-cust-analysis .ca-rfm-cell.hot { background:color-mix(in srgb, var(--primary) 30%, #fff); color:var(--primary); }
|
||
.page-cust-analysis .ca-rfm-cell.warm { background:color-mix(in srgb, var(--primary) 15%, #fff); color:var(--primary); }
|
||
.page-cust-analysis .ca-rfm-cell.cool { background:color-mix(in srgb, var(--g-warning) 15%, #fff); color:var(--g-warning); }
|
||
.page-cust-analysis .ca-rfm-cell.cold { background:#f8f9fb; color:var(--g-text-muted); }
|
||
|
||
.page-cust-analysis .ca-dist-row { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:13px; }
|
||
.page-cust-analysis .ca-dist-label { width:90px; color:var(--g-text-secondary); flex-shrink:0; }
|
||
.page-cust-analysis .ca-dist-bar { flex:1; height:20px; background:#f0f0f0; border-radius:4px; overflow:hidden; }
|
||
.page-cust-analysis .ca-dist-bar-inner { height:100%; border-radius:4px; transition:var(--g-transition); }
|
||
.page-cust-analysis .ca-dist-val { width:60px; text-align:right; font-weight:500; color:var(--g-text); }
|
||
</style>
|
||
|
||
<div class="page-cust-analysis">
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;background:#fff;border-radius:10px;padding:10px 14px;box-shadow:var(--g-shadow-sm);">
|
||
<span style="font-size:13px;color:var(--g-text-secondary);">统计周期</span>
|
||
<div class="g-seg">
|
||
<div class="g-seg-item">近7天</div>
|
||
<div class="g-seg-item active">近30天</div>
|
||
<div class="g-seg-item">近90天</div>
|
||
<div class="g-seg-item">近1年</div>
|
||
</div>
|
||
<div style="flex:1;"></div>
|
||
<button class="g-btn"><i data-lucide="download" style="width:14px;height:14px;"></i>导出报表</button>
|
||
</div>
|
||
|
||
<div class="ca-stats">
|
||
<div class="ca-stat"><div class="label">客户总数</div><div class="val blue">1,286</div><div class="sub">较上月 +10.2%</div></div>
|
||
<div class="ca-stat"><div class="label">本月新增</div><div class="val green">+128</div><div class="sub">日均 4.3 人</div></div>
|
||
<div class="ca-stat"><div class="label">活跃率</div><div class="val orange">36%</div><div class="sub">463 / 1,286</div></div>
|
||
<div class="ca-stat"><div class="label">平均客户价值</div><div class="val">¥286</div><div class="sub">生命周期价值</div></div>
|
||
</div>
|
||
|
||
<div class="ca-grid">
|
||
<div class="ca-card full">
|
||
<div class="ca-card-title">客户增长趋势</div>
|
||
<div class="ca-bars">
|
||
<div class="ca-bar-col"><div class="ca-bar-val">68</div><div class="ca-bar" style="height:48px;background:var(--primary);opacity:.7;"></div><span class="ca-bar-lbl">3月</span></div>
|
||
<div class="ca-bar-col"><div class="ca-bar-val">82</div><div class="ca-bar" style="height:58px;background:var(--primary);opacity:.7;"></div><span class="ca-bar-lbl">4月</span></div>
|
||
<div class="ca-bar-col"><div class="ca-bar-val">95</div><div class="ca-bar" style="height:67px;background:var(--primary);opacity:.7;"></div><span class="ca-bar-lbl">5月</span></div>
|
||
<div class="ca-bar-col"><div class="ca-bar-val">110</div><div class="ca-bar" style="height:78px;background:var(--primary);opacity:.7;"></div><span class="ca-bar-lbl">6月</span></div>
|
||
<div class="ca-bar-col"><div class="ca-bar-val">88</div><div class="ca-bar" style="height:62px;background:var(--primary);opacity:.7;"></div><span class="ca-bar-lbl">7月</span></div>
|
||
<div class="ca-bar-col"><div class="ca-bar-val">102</div><div class="ca-bar" style="height:72px;background:var(--primary);opacity:.7;"></div><span class="ca-bar-lbl">8月</span></div>
|
||
<div class="ca-bar-col"><div class="ca-bar-val">76</div><div class="ca-bar" style="height:54px;background:var(--primary);opacity:.7;"></div><span class="ca-bar-lbl">9月</span></div>
|
||
<div class="ca-bar-col"><div class="ca-bar-val">118</div><div class="ca-bar" style="height:84px;background:var(--primary);opacity:.7;"></div><span class="ca-bar-lbl">10月</span></div>
|
||
<div class="ca-bar-col"><div class="ca-bar-val">90</div><div class="ca-bar" style="height:64px;background:var(--primary);opacity:.7;"></div><span class="ca-bar-lbl">11月</span></div>
|
||
<div class="ca-bar-col"><div class="ca-bar-val">135</div><div class="ca-bar" style="height:96px;background:var(--primary);opacity:.7;"></div><span class="ca-bar-lbl">12月</span></div>
|
||
<div class="ca-bar-col"><div class="ca-bar-val">111</div><div class="ca-bar" style="height:79px;background:var(--primary);opacity:.7;"></div><span class="ca-bar-lbl">1月</span></div>
|
||
<div class="ca-bar-col"><div class="ca-bar-val">128</div><div class="ca-bar" style="height:91px;background:var(--primary);"></div><span class="ca-bar-lbl">2月</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ca-card">
|
||
<div class="ca-card-title">新老客占比</div>
|
||
<div class="ca-donut-wrap">
|
||
<div class="ca-donut"><div class="ca-donut-hole"><div class="num">1,286</div><div class="lbl">总客户</div></div></div>
|
||
<div class="ca-legend">
|
||
<div class="ca-legend-item"><span class="ca-legend-dot" style="background:var(--primary);"></span><span style="flex:1;">老客户（复购2次+）</span><span style="font-weight:600;">44%</span></div>
|
||
<div class="ca-legend-item"><span class="ca-legend-dot" style="background:var(--g-success);"></span><span style="flex:1;">活跃新客</span><span style="font-weight:600;">31%</span></div>
|
||
<div class="ca-legend-item"><span class="ca-legend-dot" style="background:var(--g-warning);"></span><span style="flex:1;">沉睡客户</span><span style="font-weight:600;">17%</span></div>
|
||
<div class="ca-legend-item"><span class="ca-legend-dot" style="background:#e5e7eb;"></span><span style="flex:1;">流失客户</span><span style="font-weight:600;">8%</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ca-card">
|
||
<div class="ca-card-title">客单价分布</div>
|
||
<div class="ca-dist-row"><span class="ca-dist-label">0 - 30元</span><div class="ca-dist-bar"><div class="ca-dist-bar-inner" style="width:25%;background:color-mix(in srgb, var(--primary) 50%, #fff);"></div></div><span class="ca-dist-val">18%</span></div>
|
||
<div class="ca-dist-row"><span class="ca-dist-label">30 - 60元</span><div class="ca-dist-bar"><div class="ca-dist-bar-inner" style="width:45%;background:color-mix(in srgb, var(--primary) 65%, #fff);"></div></div><span class="ca-dist-val">32%</span></div>
|
||
<div class="ca-dist-row"><span class="ca-dist-label">60 - 100元</span><div class="ca-dist-bar"><div class="ca-dist-bar-inner" style="width:55%;background:var(--primary);"></div></div><span class="ca-dist-val">28%</span></div>
|
||
<div class="ca-dist-row"><span class="ca-dist-label">100 - 150元</span><div class="ca-dist-bar"><div class="ca-dist-bar-inner" style="width:20%;background:color-mix(in srgb, var(--primary) 80%, #fff);"></div></div><span class="ca-dist-val">14%</span></div>
|
||
<div class="ca-dist-row"><span class="ca-dist-label">150元以上</span><div class="ca-dist-bar"><div class="ca-dist-bar-inner" style="width:12%;background:color-mix(in srgb, var(--primary) 40%, #fff);"></div></div><span class="ca-dist-val">8%</span></div>
|
||
</div>
|
||
|
||
<div class="ca-card full">
|
||
<div class="ca-card-title">RFM 客户分层</div>
|
||
<div class="ca-rfm">
|
||
<div class="ca-rfm-header"></div>
|
||
<div class="ca-rfm-header">高频高额</div><div class="ca-rfm-header">高频低额</div><div class="ca-rfm-header">低频高额</div><div class="ca-rfm-header">低频低额</div>
|
||
<div class="ca-rfm-label">近期活跃</div>
|
||
<div class="ca-rfm-cell hot">186人<br><span style="font-size:11px;opacity:.7;">重要价值</span></div>
|
||
<div class="ca-rfm-cell warm">142人<br><span style="font-size:11px;opacity:.7;">潜力客户</span></div>
|
||
<div class="ca-rfm-cell warm">98人<br><span style="font-size:11px;opacity:.7;">新客培育</span></div>
|
||
<div class="ca-rfm-cell cool">37人<br><span style="font-size:11px;opacity:.7;">一般维护</span></div>
|
||
<div class="ca-rfm-label">中期沉默</div>
|
||
<div class="ca-rfm-cell warm">124人<br><span style="font-size:11px;opacity:.7;">重要挽留</span></div>
|
||
<div class="ca-rfm-cell cool">168人<br><span style="font-size:11px;opacity:.7;">一般发展</span></div>
|
||
<div class="ca-rfm-cell cool">86人<br><span style="font-size:11px;opacity:.7;">一般保持</span></div>
|
||
<div class="ca-rfm-cell cold">52人<br><span style="font-size:11px;opacity:.7;">低优先级</span></div>
|
||
<div class="ca-rfm-label">长期流失</div>
|
||
<div class="ca-rfm-cell cool">76人<br><span style="font-size:11px;opacity:.7;">重要召回</span></div>
|
||
<div class="ca-rfm-cell cold">112人<br><span style="font-size:11px;opacity:.7;">即将流失</span></div>
|
||
<div class="ca-rfm-cell cold">98人<br><span style="font-size:11px;opacity:.7;">基本流失</span></div>
|
||
<div class="ca-rfm-cell cold">107人<br><span style="font-size:11px;opacity:.7;">已流失</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ca-card full">
|
||
<div class="ca-card-title">高价值客户 TOP 10</div>
|
||
<table style="width:100%;border-collapse:collapse;font-size:13px;">
|
||
<thead><tr>
|
||
<th style="background:#f8f9fb;padding:8px 12px;text-align:left;font-weight:600;color:#6b7280;border-bottom:1px solid #e5e7eb;">排名</th>
|
||
<th style="background:#f8f9fb;padding:8px 12px;text-align:left;font-weight:600;color:#6b7280;border-bottom:1px solid #e5e7eb;">客户</th>
|
||
<th style="background:#f8f9fb;padding:8px 12px;text-align:left;font-weight:600;color:#6b7280;border-bottom:1px solid #e5e7eb;">累计消费</th>
|
||
<th style="background:#f8f9fb;padding:8px 12px;text-align:left;font-weight:600;color:#6b7280;border-bottom:1px solid #e5e7eb;">下单次数</th>
|
||
<th style="background:#f8f9fb;padding:8px 12px;text-align:left;font-weight:600;color:#6b7280;border-bottom:1px solid #e5e7eb;">客单价</th>
|
||
<th style="background:#f8f9fb;padding:8px 12px;text-align:left;font-weight:600;color:#6b7280;border-bottom:1px solid #e5e7eb;">最近下单</th>
|
||
<th style="background:#f8f9fb;padding:8px 12px;text-align:left;font-weight:600;color:#6b7280;border-bottom:1px solid #e5e7eb;">标签</th>
|
||
</tr></thead>
|
||
<tbody>
|
||
<tr style="border-bottom:1px solid #f3f4f6;"><td style="padding:10px 12px;font-weight:700;color:var(--primary);">1</td><td style="padding:10px 12px;">王大力</td><td style="padding:10px 12px;font-weight:600;">¥4,210</td><td style="padding:10px 12px;">35</td><td style="padding:10px 12px;">¥120</td><td style="padding:10px 12px;color:var(--g-text-secondary);">02-12</td><td style="padding:10px 12px;"><span class="g-tag g-tag-orange">高价值</span></td></tr>
|
||
<tr style="border-bottom:1px solid #f3f4f6;"><td style="padding:10px 12px;font-weight:700;color:var(--primary);">2</td><td style="padding:10px 12px;">张小明</td><td style="padding:10px 12px;font-weight:600;">¥3,628</td><td style="padding:10px 12px;">42</td><td style="padding:10px 12px;">¥86</td><td style="padding:10px 12px;color:var(--g-text-secondary);">02-14</td><td style="padding:10px 12px;"><span class="g-tag g-tag-orange">高价值</span></td></tr>
|
||
<tr style="border-bottom:1px solid #f3f4f6;"><td style="padding:10px 12px;font-weight:700;color:var(--primary);">3</td><td style="padding:10px 12px;">周雅琴</td><td style="padding:10px 12px;font-weight:600;">¥3,150</td><td style="padding:10px 12px;">30</td><td style="padding:10px 12px;">¥105</td><td style="padding:10px 12px;color:var(--g-text-secondary);">02-13</td><td style="padding:10px 12px;"><span class="g-tag g-tag-orange">高价值</span></td></tr>
|
||
<tr style="border-bottom:1px solid #f3f4f6;"><td style="padding:10px 12px;color:var(--g-text-secondary);">4</td><td style="padding:10px 12px;">吴强</td><td style="padding:10px 12px;font-weight:600;">¥2,890</td><td style="padding:10px 12px;">26</td><td style="padding:10px 12px;">¥111</td><td style="padding:10px 12px;color:var(--g-text-secondary);">02-11</td><td style="padding:10px 12px;"><span class="g-tag g-tag-blue">活跃</span></td></tr>
|
||
<tr style="border-bottom:1px solid #f3f4f6;"><td style="padding:10px 12px;color:var(--g-text-secondary);">5</td><td style="padding:10px 12px;">李婷婷</td><td style="padding:10px 12px;font-weight:600;">¥2,156</td><td style="padding:10px 12px;">28</td><td style="padding:10px 12px;">¥77</td><td style="padding:10px 12px;color:var(--g-text-secondary);">02-13</td><td style="padding:10px 12px;"><span class="g-tag g-tag-blue">活跃</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div> |