109 lines
12 KiB
HTML
109 lines
12 KiB
HTML
<!-- 客户画像页 -->
|
|
<style>
|
|
.page-cust-profile .cp-header { display:flex; align-items:center; gap:16px; background:#fff; border-radius:10px; padding:20px; box-shadow:var(--g-shadow-sm); margin-bottom:16px; }
|
|
.page-cust-profile .cp-avatar { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; color:#fff; background:#3b82f6; flex-shrink:0; }
|
|
.page-cust-profile .cp-name { font-size:18px; font-weight:700; color:var(--g-text); }
|
|
.page-cust-profile .cp-meta { font-size:13px; color:var(--g-text-muted); margin-top:4px; }
|
|
.page-cust-profile .cp-kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:16px; }
|
|
.page-cust-profile .cp-kpi { background:#fff; border-radius:10px; padding:16px; text-align:center; box-shadow:var(--g-shadow-sm); transition:var(--g-transition); }
|
|
.page-cust-profile .cp-kpi:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
|
|
.page-cust-profile .cp-kpi .num { font-size:22px; font-weight:700; color:var(--g-text); }
|
|
.page-cust-profile .cp-kpi .num.blue { color:var(--primary); }
|
|
.page-cust-profile .cp-kpi .lbl { font-size:12px; color:var(--g-text-muted); margin-top:4px; }
|
|
.page-cust-profile .cp-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
|
|
.page-cust-profile .cp-card { background:#fff; border-radius:10px; padding:20px; box-shadow:var(--g-shadow-sm); }
|
|
.page-cust-profile .cp-card.full { grid-column:1/-1; }
|
|
.page-cust-profile .cp-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-profile .cp-pref-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f3f4f6; font-size:13px; }
|
|
.page-cust-profile .cp-pref-row:last-child { border-bottom:none; }
|
|
.page-cust-profile .cp-pref-label { color:var(--g-text-secondary); }
|
|
.page-cust-profile .cp-pref-val { color:var(--g-text); font-weight:500; }
|
|
.page-cust-profile .cp-top-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #f3f4f6; font-size:13px; }
|
|
.page-cust-profile .cp-top-item:last-child { border-bottom:none; }
|
|
.page-cust-profile .cp-top-rank { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
|
|
.page-cust-profile .cp-top-rank.gold { background:#fef3c7; color:#d97706; }
|
|
.page-cust-profile .cp-top-rank.silver { background:#f3f4f6; color:#6b7280; }
|
|
.page-cust-profile .cp-top-bar { flex:1; height:6px; background:#f0f0f0; border-radius:3px; overflow:hidden; }
|
|
.page-cust-profile .cp-top-bar-inner { height:100%; border-radius:3px; background:var(--primary); }
|
|
.page-cust-profile .cp-bars { display:flex; align-items:flex-end; gap:8px; height:120px; }
|
|
.page-cust-profile .cp-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
|
|
.page-cust-profile .cp-bar { width:100%; border-radius:4px 4px 0 0; background:var(--primary); transition:var(--g-transition); cursor:pointer; }
|
|
.page-cust-profile .cp-bar:hover { opacity:.8; }
|
|
.page-cust-profile .cp-bar-lbl { font-size:11px; color:var(--g-text-muted); }
|
|
.page-cust-profile .cp-bar-val { font-size:11px; color:var(--g-text-secondary); font-weight:500; }
|
|
</style>
|
|
<div class="page-cust-profile">
|
|
<div class="cp-header">
|
|
<div class="cp-avatar">王</div>
|
|
<div>
|
|
<div class="cp-name">王大力</div>
|
|
<div class="cp-meta">138****6601 · 首次下单 2025-06-18 · 来源：小程序</div>
|
|
</div>
|
|
<div style="margin-left:auto;display:flex;gap:8px;">
|
|
<span class="g-tag g-tag-orange">高价值</span>
|
|
<span class="g-tag g-tag-blue">活跃</span>
|
|
</div>
|
|
</div>
|
|
<div class="cp-kpis">
|
|
<div class="cp-kpi"><div class="num blue">35</div><div class="lbl">下单次数</div></div>
|
|
<div class="cp-kpi"><div class="num">¥4,210</div><div class="lbl">累计消费</div></div>
|
|
<div class="cp-kpi"><div class="num">¥120</div><div class="lbl">客单价</div></div>
|
|
<div class="cp-kpi"><div class="num" style="color:var(--g-success);">68%</div><div class="lbl">复购率</div></div>
|
|
<div class="cp-kpi"><div class="num">4.2天</div><div class="lbl">平均下单间隔</div></div>
|
|
</div>
|
|
<div class="cp-grid">
|
|
<div class="cp-card">
|
|
<div class="cp-card-title">消费偏好</div>
|
|
<div class="cp-pref-row"><span class="cp-pref-label">偏好品类</span><span class="cp-pref-val">快餐、饮品</span></div>
|
|
<div class="cp-pref-row"><span class="cp-pref-label">常用口味</span><span class="cp-pref-val">微辣、少糖</span></div>
|
|
<div class="cp-pref-row"><span class="cp-pref-label">下单高峰</span><span class="cp-pref-val">11:30-13:00、18:00-19:30</span></div>
|
|
<div class="cp-pref-row"><span class="cp-pref-label">配送方式</span><span class="cp-pref-val">外卖配送 (86%)、自提 (14%)</span></div>
|
|
<div class="cp-pref-row"><span class="cp-pref-label">支付方式</span><span class="cp-pref-val">微信支付</span></div>
|
|
<div class="cp-pref-row"><span class="cp-pref-label">平均配送距离</span><span class="cp-pref-val">2.3 km</span></div>
|
|
</div>
|
|
<div class="cp-card">
|
|
<div class="cp-card-title">常购商品 TOP 5</div>
|
|
<div class="cp-top-item"><span class="cp-top-rank gold">1</span><span style="width:100px;">香辣鸡腿堡</span><div class="cp-top-bar"><div class="cp-top-bar-inner" style="width:90%;"></div></div><span style="width:40px;text-align:right;color:var(--g-text-secondary);">18次</span></div>
|
|
<div class="cp-top-item"><span class="cp-top-rank gold">2</span><span style="width:100px;">珍珠奶茶（大）</span><div class="cp-top-bar"><div class="cp-top-bar-inner" style="width:75%;"></div></div><span style="width:40px;text-align:right;color:var(--g-text-secondary);">15次</span></div>
|
|
<div class="cp-top-item"><span class="cp-top-rank gold">3</span><span style="width:100px;">薯条（中）</span><div class="cp-top-bar"><div class="cp-top-bar-inner" style="width:60%;"></div></div><span style="width:40px;text-align:right;color:var(--g-text-secondary);">12次</span></div>
|
|
<div class="cp-top-item"><span class="cp-top-rank silver">4</span><span style="width:100px;">麻辣烫套餐</span><div class="cp-top-bar"><div class="cp-top-bar-inner" style="width:45%;"></div></div><span style="width:40px;text-align:right;color:var(--g-text-secondary);">9次</span></div>
|
|
<div class="cp-top-item"><span class="cp-top-rank silver">5</span><span style="width:100px;">可乐（中）</span><div class="cp-top-bar"><div class="cp-top-bar-inner" style="width:35%;"></div></div><span style="width:40px;text-align:right;color:var(--g-text-secondary);">7次</span></div>
|
|
</div>
|
|
<div class="cp-card full">
|
|
<div class="cp-card-title">月度消费趋势</div>
|
|
<div class="cp-bars">
|
|
<div class="cp-bar-col"><div class="cp-bar-val">¥280</div><div class="cp-bar" style="height:47px;opacity:.6;"></div><span class="cp-bar-lbl">3月</span></div>
|
|
<div class="cp-bar-col"><div class="cp-bar-val">¥350</div><div class="cp-bar" style="height:58px;opacity:.6;"></div><span class="cp-bar-lbl">4月</span></div>
|
|
<div class="cp-bar-col"><div class="cp-bar-val">¥420</div><div class="cp-bar" style="height:70px;opacity:.7;"></div><span class="cp-bar-lbl">5月</span></div>
|
|
<div class="cp-bar-col"><div class="cp-bar-val">¥310</div><div class="cp-bar" style="height:52px;opacity:.6;"></div><span class="cp-bar-lbl">6月</span></div>
|
|
<div class="cp-bar-col"><div class="cp-bar-val">¥480</div><div class="cp-bar" style="height:80px;opacity:.7;"></div><span class="cp-bar-lbl">7月</span></div>
|
|
<div class="cp-bar-col"><div class="cp-bar-val">¥390</div><div class="cp-bar" style="height:65px;opacity:.7;"></div><span class="cp-bar-lbl">8月</span></div>
|
|
<div class="cp-bar-col"><div class="cp-bar-val">¥260</div><div class="cp-bar" style="height:43px;opacity:.6;"></div><span class="cp-bar-lbl">9月</span></div>
|
|
<div class="cp-bar-col"><div class="cp-bar-val">¥520</div><div class="cp-bar" style="height:87px;opacity:.8;"></div><span class="cp-bar-lbl">10月</span></div>
|
|
<div class="cp-bar-col"><div class="cp-bar-val">¥340</div><div class="cp-bar" style="height:57px;opacity:.6;"></div><span class="cp-bar-lbl">11月</span></div>
|
|
<div class="cp-bar-col"><div class="cp-bar-val">¥450</div><div class="cp-bar" style="height:75px;opacity:.7;"></div><span class="cp-bar-lbl">12月</span></div>
|
|
<div class="cp-bar-col"><div class="cp-bar-val">¥380</div><div class="cp-bar" style="height:63px;opacity:.7;"></div><span class="cp-bar-lbl">1月</span></div>
|
|
<div class="cp-bar-col"><div class="cp-bar-val">¥210</div><div class="cp-bar" style="height:35px;"></div><span class="cp-bar-lbl">2月</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="cp-card full">
|
|
<div class="cp-card-title">最近订单</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>
|
|
</tr></thead>
|
|
<tbody>
|
|
<tr><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;">#20260212035</td><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;">¥128</td><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;">香辣鸡腿堡 x1、珍珠奶茶 x1、薯条 x1</td><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;"><span class="g-tag g-tag-blue">外卖</span></td><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;"><span style="color:var(--g-success);font-weight:600;">已完成</span></td><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;color:var(--g-text-muted);">02-12 18:32</td></tr>
|
|
<tr><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;">#20260210021</td><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;">¥86</td><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;">麻辣烫套餐 x1、可乐 x1</td><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;"><span class="g-tag g-tag-blue">外卖</span></td><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;"><span style="color:var(--g-success);font-weight:600;">已完成</span></td><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;color:var(--g-text-muted);">02-10 12:15</td></tr>
|
|
<tr><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;">#20260208018</td><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;">¥152</td><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;">香辣鸡腿堡 x2、珍珠奶茶 x2</td><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;"><span class="g-tag g-tag-green">自提</span></td><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;"><span style="color:var(--g-success);font-weight:600;">已完成</span></td><td style="padding:10px 12px;border-bottom:1px solid #f3f4f6;color:var(--g-text-muted);">02-08 19:47</td></tr>
|
|
<tr><td style="padding:10px 12px;">#20260205009</td><td style="padding:10px 12px;">¥95</td><td style="padding:10px 12px;">薯条 x1、鸡翅桶 x1、可乐 x1</td><td style="padding:10px 12px;"><span class="g-tag g-tag-blue">外卖</span></td><td style="padding:10px 12px;"><span style="color:var(--g-success);font-weight:600;">已完成</span></td><td style="padding:10px 12px;color:var(--g-text-muted);">02-05 11:20</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div> |