在准备环境前提交次全部更改。
This commit is contained in:
@@ -115,6 +115,8 @@
|
||||
.coach-card {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.dim-container { display: none; }
|
||||
.dim-container.active { display: block; }
|
||||
.coach-card:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
@@ -133,22 +135,22 @@
|
||||
|
||||
<!-- 筛选区域（二级） -->
|
||||
<div id="filterBar" class="bg-gray-1 sticky top-[44px] z-10 px-4 py-2 border-b border-gray-2">
|
||||
<div class="bg-white rounded-2xl p-1.5 flex gap-2 shadow-sm border border-gray-2">
|
||||
<button onclick="toggleFilter('sort')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||
<span id="sortLabel">定档业绩最高</span>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<div class="bg-white rounded-2xl p-1.5 flex gap-1.5 shadow-sm border border-gray-2">
|
||||
<button onclick="toggleFilter('sort')" class="flex-[2] px-2 py-2 bg-gray-50 rounded-lg text-xs text-gray-10 flex items-center justify-center gap-0.5 border border-gray-100 whitespace-nowrap">
|
||||
<span id="sortLabel" class="truncate">定档业绩最高</span>
|
||||
<svg class="w-3.5 h-3.5 text-gray-5 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button onclick="toggleFilter('skill')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||
<span id="skillLabel">不限</span>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<button onclick="toggleFilter('skill')" class="flex-1 px-2 py-2 bg-gray-50 rounded-lg text-xs text-gray-10 flex items-center justify-center gap-0.5 border border-gray-100 whitespace-nowrap">
|
||||
<span id="skillLabel" class="truncate">不限</span>
|
||||
<svg class="w-3.5 h-3.5 text-gray-5 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button onclick="toggleFilter('time')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100">
|
||||
<span id="timeLabel">本月</span>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<button onclick="toggleFilter('time')" class="flex-1 px-2 py-2 bg-gray-50 rounded-lg text-xs text-gray-10 flex items-center justify-center gap-0.5 border border-gray-100 whitespace-nowrap">
|
||||
<span id="timeLabel" class="truncate">本月</span>
|
||||
<svg class="w-3.5 h-3.5 text-gray-5 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
@@ -165,7 +167,7 @@
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('定档业绩最低')">定档业绩最低</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('工资最高')">工资最高</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('工资最低')">工资最低</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('高客源储值额最高')">高客源储值额最高</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('客源储值最高')">客源储值最高</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('任务完成最多')">任务完成最多</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -185,186 +187,730 @@
|
||||
<div id="timeDropdown" class="filter-dropdown">
|
||||
<div class="p-4 space-y-2">
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('本月')">本月</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('上个月')">上个月</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('最近3个月')">最近3个月</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('本季度')">本季度</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('上月')">上月</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('前3个月')">前3个月（不含本月）</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('上季度')">上季度</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('最近6个月')">最近6个月（不含本月，不支持客源储值最高）</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 助教列表 -->
|
||||
<div class="p-4 space-y-3">
|
||||
<!-- 助教卡片 1 -->
|
||||
<!-- ====== 定档业绩最高/最低 ====== -->
|
||||
<div id="dim-perf" class="dim-container active p-4 space-y-3">
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">小</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">小燕</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded">中🎱</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">小</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-success font-semibold">8.6万</p>
|
||||
<p class="text-xs text-gray-6">本期流水</p>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">小燕</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">中🎱</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-2 text-xs">
|
||||
<span class="font-bold text-primary text-sm">86.2h</span>
|
||||
<span class="text-gray-7">下一档还需 <span class="text-warning font-medium">13.8h</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💖 王先生</span>
|
||||
<span>💖 李女士</span>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 王先生</span><span>💖 李女士</span><span>💛 赵总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">86.2h</b></span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span>折前 <b class="text-gray-10">92.0h</b></span>
|
||||
</div>
|
||||
<span class="text-gray-6">上课86小时</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 助教卡片 2 -->
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">泡</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">泡芙</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-purple-400 to-violet-400 text-white text-xs rounded">高级</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded">斯诺克</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">泡</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-success font-semibold">7.2万</p>
|
||||
<p class="text-xs text-gray-6">本期流水</p>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">泡芙</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-purple-400 to-violet-400 text-white text-xs rounded flex-shrink-0">高级</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯诺克</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-2 text-xs">
|
||||
<span class="font-bold text-primary text-sm">72.5h</span>
|
||||
<span class="text-gray-7">下一档还需 <span class="text-warning font-medium">7.5h</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💖 陈先生</span>
|
||||
<span>💛 刘女士</span>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 陈先生</span><span>💛 刘女士</span><span>💛 黄总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">72.5h</b></span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span>折前 <b class="text-gray-10">78.0h</b></span>
|
||||
</div>
|
||||
<span class="text-gray-6">上课72小时</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 助教卡片 3 -->
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">A</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">Amy</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded">中🎱</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded">斯诺克</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">A</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-success font-semibold">6.8万</p>
|
||||
<p class="text-xs text-gray-6">本期流水</p>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">Amy</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">中🎱</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯诺克</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-2 text-xs">
|
||||
<span class="font-bold text-primary text-sm">68.0h</span>
|
||||
<span class="text-gray-7">下一档还需 <span class="text-warning font-medium">32.0h</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💖 张先生</span>
|
||||
<span>💛 周女士</span>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 张先生</span><span>💛 周女士</span><span>💛 吴总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">68.0h</b></span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span>折前 <b class="text-gray-10">72.5h</b></span>
|
||||
</div>
|
||||
<span class="text-gray-6">上课68小时</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 助教卡片 4 -->
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">M</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">Mia</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded">麻将</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">M</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-success font-semibold">5.5万</p>
|
||||
<p class="text-xs text-gray-6">本期流水</p>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">Mia</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded flex-shrink-0">麻将</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-2 text-xs">
|
||||
<span class="font-bold text-primary text-sm">55.0h</span>
|
||||
<span class="text-gray-7">下一档还需 <span class="text-warning font-medium">5.0h</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💛 赵先生</span>
|
||||
<span>💛 吴女士</span>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 赵先生</span><span>💛 吴女士</span><span>💛 孙总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">55.0h</b></span>
|
||||
|
||||
</div>
|
||||
<span class="text-gray-6">上课55小时</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 助教卡片 5 -->
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">糖</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">糖糖</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-gray-400 to-gray-500 text-white text-xs rounded">初级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded">中🎱</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">糖</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-success font-semibold">4.2万</p>
|
||||
<p class="text-xs text-gray-6">本期流水</p>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">糖糖</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-gray-400 to-gray-500 text-white text-xs rounded flex-shrink-0">初级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">中🎱</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-2 text-xs">
|
||||
<span class="font-bold text-success text-sm">42.0h</span>
|
||||
<span class="text-success font-medium">✅ 已达标</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💛 钱先生</span>
|
||||
<span>💛 孙女士</span>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 钱先生</span><span>💛 孙女士</span><span>💛 周总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">42.0h</b></span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span>折前 <b class="text-gray-10">45.0h</b></span>
|
||||
</div>
|
||||
<span class="text-gray-6">上课42小时</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 助教卡片 6 -->
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center">
|
||||
<span class="text-white font-semibold">露</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">露露</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded">团建</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">露</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-success font-semibold">3.8万</p>
|
||||
<p class="text-xs text-gray-6">本期流水</p>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">露露</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded flex-shrink-0">团建</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-2 text-xs">
|
||||
<span class="font-bold text-primary text-sm">38.0h</span>
|
||||
<span class="text-gray-7">下一档还需 <span class="text-warning font-medium">22.0h</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-6">
|
||||
<span>💛 郑先生</span>
|
||||
<span>💛 冯女士</span>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 郑先生</span><span>💛 冯女士</span><span>💛 陈总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">38.0h</b></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- ====== 工资最高/最低 ====== -->
|
||||
<div id="dim-salary" class="dim-container p-4 space-y-3">
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">小</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">小燕</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">中🎱</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-2">
|
||||
<span class="text-lg font-semibold text-gray-13">¥12,680</span>
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded">预估</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 王先生</span><span>💖 李女士</span><span>💛 赵总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">86.2h</b></span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span>折前 <b class="text-gray-10">92.0h</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">泡</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">泡芙</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-purple-400 to-violet-400 text-white text-xs rounded flex-shrink-0">高级</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯诺克</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-2">
|
||||
<span class="text-lg font-semibold text-gray-13">¥10,200</span>
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded">预估</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 陈先生</span><span>💛 刘女士</span><span>💛 黄总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">72.5h</b></span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span>折前 <b class="text-gray-10">78.0h</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">A</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">Amy</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">中🎱</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯诺克</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-2">
|
||||
<span class="text-lg font-semibold text-gray-13">¥9,800</span>
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded">预估</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 张先生</span><span>💛 周女士</span><span>💛 吴总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">68.0h</b></span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span>折前 <b class="text-gray-10">72.5h</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">M</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">Mia</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded flex-shrink-0">麻将</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-2">
|
||||
<span class="text-lg font-semibold text-gray-13">¥7,500</span>
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded">预估</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 赵先生</span><span>💛 吴女士</span><span>💛 孙总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">55.0h</b></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">糖</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">糖糖</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-gray-400 to-gray-500 text-white text-xs rounded flex-shrink-0">初级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">中🎱</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-2">
|
||||
<span class="text-lg font-semibold text-gray-13">¥6,200</span>
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded">预估</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 钱先生</span><span>💛 孙女士</span><span>💛 周总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">42.0h</b></span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span>折前 <b class="text-gray-10">45.0h</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">露</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">露露</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded flex-shrink-0">团建</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-2">
|
||||
<span class="text-lg font-semibold text-gray-13">¥5,100</span>
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded">预估</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 郑先生</span><span>💛 冯女士</span><span>💛 陈总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">38.0h</b></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- ====== 客源储值最高 ====== -->
|
||||
<div id="dim-sv" class="dim-container p-4 space-y-3">
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">小</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">小燕</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">中🎱</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<span class="text-lg font-semibold text-gray-13">¥45,200</span>
|
||||
<span class="text-xs text-gray-6 ml-1">客户储值余额</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 王先生</span><span>💖 李女士</span><span>💛 赵总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>周期消耗 <b class="text-gray-10">¥8,600</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">泡</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">泡芙</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-purple-400 to-violet-400 text-white text-xs rounded flex-shrink-0">高级</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯诺克</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<span class="text-lg font-semibold text-gray-13">¥38,600</span>
|
||||
<span class="text-xs text-gray-6 ml-1">客户储值余额</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 陈先生</span><span>💛 刘女士</span><span>💛 黄总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>周期消耗 <b class="text-gray-10">¥6,200</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">A</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">Amy</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">中🎱</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯诺克</span>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<span class="text-lg font-semibold text-gray-13">¥32,100</span>
|
||||
<span class="text-xs text-gray-6 ml-1">客户储值余额</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 张先生</span><span>💛 周女士</span><span>💛 吴总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>周期消耗 <b class="text-gray-10">¥5,800</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">M</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">Mia</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded flex-shrink-0">麻将</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<span class="text-lg font-semibold text-gray-13">¥28,500</span>
|
||||
<span class="text-xs text-gray-6 ml-1">客户储值余额</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 赵先生</span><span>💛 吴女士</span><span>💛 孙总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>周期消耗 <b class="text-gray-10">¥4,100</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">糖</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">糖糖</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-gray-400 to-gray-500 text-white text-xs rounded flex-shrink-0">初级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">中🎱</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<span class="text-lg font-semibold text-gray-13">¥22,000</span>
|
||||
<span class="text-xs text-gray-6 ml-1">客户储值余额</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 钱先生</span><span>💛 孙女士</span><span>💛 周总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>周期消耗 <b class="text-gray-10">¥3,500</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">露</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">露露</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded flex-shrink-0">团建</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<span class="text-lg font-semibold text-gray-13">¥18,300</span>
|
||||
<span class="text-xs text-gray-6 ml-1">客户储值余额</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 郑先生</span><span>💛 冯女士</span><span>💛 陈总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>周期消耗 <b class="text-gray-10">¥2,800</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- ====== 任务完成最多 ====== -->
|
||||
<div id="dim-task" class="dim-container p-4 space-y-3">
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">小</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">小燕</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">中🎱</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-3">
|
||||
<div><span class="text-lg font-semibold text-primary">32</span><span class="text-xs text-gray-6 ml-0.5">个任务</span></div>
|
||||
<div class="w-px h-4 bg-gray-3"></div>
|
||||
<div><span class="text-lg font-semibold text-gray-13">18</span><span class="text-xs text-gray-6 ml-0.5">位客户</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 王先生</span><span>💖 李女士</span><span>💛 赵总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">86.2h</b></span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span>折前 <b class="text-gray-10">92.0h</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">泡</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">泡芙</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-purple-400 to-violet-400 text-white text-xs rounded flex-shrink-0">高级</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯诺克</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-3">
|
||||
<div><span class="text-lg font-semibold text-primary">28</span><span class="text-xs text-gray-6 ml-0.5">个任务</span></div>
|
||||
<div class="w-px h-4 bg-gray-3"></div>
|
||||
<div><span class="text-lg font-semibold text-gray-13">15</span><span class="text-xs text-gray-6 ml-0.5">位客户</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 陈先生</span><span>💛 刘女士</span><span>💛 黄总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">72.5h</b></span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span>折前 <b class="text-gray-10">78.0h</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">A</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">Amy</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">中🎱</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯诺克</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-3">
|
||||
<div><span class="text-lg font-semibold text-primary">25</span><span class="text-xs text-gray-6 ml-0.5">个任务</span></div>
|
||||
<div class="w-px h-4 bg-gray-3"></div>
|
||||
<div><span class="text-lg font-semibold text-gray-13">14</span><span class="text-xs text-gray-6 ml-0.5">位客户</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 张先生</span><span>💛 周女士</span><span>💛 吴总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">68.0h</b></span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span>折前 <b class="text-gray-10">72.5h</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">M</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">Mia</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded flex-shrink-0">麻将</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-3">
|
||||
<div><span class="text-lg font-semibold text-primary">20</span><span class="text-xs text-gray-6 ml-0.5">个任务</span></div>
|
||||
<div class="w-px h-4 bg-gray-3"></div>
|
||||
<div><span class="text-lg font-semibold text-gray-13">12</span><span class="text-xs text-gray-6 ml-0.5">位客户</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 赵先生</span><span>💛 吴女士</span><span>💛 孙总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">55.0h</b></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">糖</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">糖糖</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-gray-400 to-gray-500 text-white text-xs rounded flex-shrink-0">初级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">中🎱</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-3">
|
||||
<div><span class="text-lg font-semibold text-primary">18</span><span class="text-xs text-gray-6 ml-0.5">个任务</span></div>
|
||||
<div class="w-px h-4 bg-gray-3"></div>
|
||||
<div><span class="text-lg font-semibold text-gray-13">10</span><span class="text-xs text-gray-6 ml-0.5">位客户</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 钱先生</span><span>💛 孙女士</span><span>💛 周总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">42.0h</b></span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span>折前 <b class="text-gray-10">45.0h</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-start gap-3 mb-2.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">露</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">露露</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded flex-shrink-0">团建</span>
|
||||
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-3">
|
||||
<div><span class="text-lg font-semibold text-primary">15</span><span class="text-xs text-gray-6 ml-0.5">个任务</span></div>
|
||||
<div class="w-px h-4 bg-gray-3"></div>
|
||||
<div><span class="text-lg font-semibold text-gray-13">9</span><span class="text-xs text-gray-6 ml-0.5">位客户</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 郑先生</span><span>💛 冯女士</span><span>💛 陈总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
|
||||
<span>定档 <b class="text-gray-10">38.0h</b></span>
|
||||
|
||||
</div>
|
||||
<span class="text-gray-6">上课38小时</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -423,6 +969,18 @@
|
||||
function selectSort(value) {
|
||||
document.getElementById('sortLabel').textContent = value;
|
||||
closeAllFilters();
|
||||
// 切换维度容器
|
||||
var dimMap = {
|
||||
'定档业绩最高': 'dim-perf',
|
||||
'定档业绩最低': 'dim-perf',
|
||||
'工资最高': 'dim-salary',
|
||||
'工资最低': 'dim-salary',
|
||||
'客源储值最高': 'dim-sv',
|
||||
'任务完成最多': 'dim-task'
|
||||
};
|
||||
document.querySelectorAll('.dim-container').forEach(function(el) { el.classList.remove('active'); });
|
||||
var id = dimMap[value];
|
||||
if (id) document.getElementById(id).classList.add('active');
|
||||
}
|
||||
|
||||
function selectSkill(value) {
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.3px;
|
||||
transform: translateY(-0.5px);
|
||||
transform: translateY(1.5px);
|
||||
}
|
||||
.assistant-badge-follow {
|
||||
color: #ffffff;
|
||||
@@ -217,28 +217,31 @@
|
||||
<span class="text-sm text-gray-5">共100名客户</span>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ==================== 最应召回（默认） ==================== -->
|
||||
|
||||
<!-- ==================== 最应召回（默认） ==================== -->
|
||||
<div id="dim-recall" class="dim-container active p-4 pt-1 space-y-3">
|
||||
<!-- Card 1: 演示 assignee (红色加粗+跟) + normal + abandoned (灰色+弃) -->
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center shrink-0">
|
||||
<span class="text-white font-semibold text-sm">王</span>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-13">王先生</span>
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="text-primary font-bold">0.92</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">召回指数</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-13">王先生</span>
|
||||
<div class="flex items-center gap-1.5 mt-0.5">
|
||||
<span class="text-xs text-gray-6">理想 <span class="text-gray-11 font-medium">7天</span></span>
|
||||
<span class="text-xs text-gray-6">已过 <span class="text-error font-bold">15天</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="px-2.5 py-1 bg-error/10 text-error text-sm font-bold rounded-lg">超期 8天</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs mb-2.5 ml-11">
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1 text-sm ml-11 mb-2">
|
||||
<div class="text-gray-6">30天到店 <span class="text-gray-11 font-medium">5次</span></div>
|
||||
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">15天前</span></div>
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">7天</span></div>
|
||||
<div class="text-gray-6">超过 <span class="text-error font-medium">8天</span></div>
|
||||
<div class="text-gray-6">余额合计 <span class="text-gray-11 font-medium">¥8,000</span></div>
|
||||
<div class="text-gray-6">余额 <span class="text-gray-11 font-medium">¥8,000</span></div>
|
||||
<div class="text-gray-6">召回指数 <span class="text-primary font-bold">0.92</span></div>
|
||||
</div>
|
||||
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
||||
<span class="text-gray-6">助教:</span>
|
||||
@@ -250,26 +253,26 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 2: 全部 normal 助教 -->
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center shrink-0">
|
||||
<span class="text-white font-semibold text-sm">李</span>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-13">李女士</span>
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="text-primary font-bold">0.88</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">召回指数</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-13">李女士</span>
|
||||
<div class="flex items-center gap-1.5 mt-0.5">
|
||||
<span class="text-xs text-gray-6">理想 <span class="text-gray-11 font-medium">10天</span></span>
|
||||
<span class="text-xs text-gray-6">已过 <span class="text-error font-bold">20天</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="px-2.5 py-1 bg-warning/10 text-warning text-sm font-bold rounded-lg">超期 10天</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs mb-2.5 ml-11">
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1 text-sm ml-11 mb-2">
|
||||
<div class="text-gray-6">30天到店 <span class="text-gray-11 font-medium">3次</span></div>
|
||||
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">20天前</span></div>
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">10天</span></div>
|
||||
<div class="text-gray-6">超过 <span class="text-error font-medium">10天</span></div>
|
||||
<div class="text-gray-6">余额合计 <span class="text-gray-11 font-medium">¥12,500</span></div>
|
||||
<div class="text-gray-6">余额 <span class="text-gray-11 font-medium">¥12,500</span></div>
|
||||
<div class="text-gray-6">召回指数 <span class="text-primary font-bold">0.88</span></div>
|
||||
</div>
|
||||
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
||||
<span class="text-gray-6">助教:</span>
|
||||
@@ -279,26 +282,26 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 3: 另一位 assignee 助教 -->
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center shrink-0">
|
||||
<span class="text-white font-semibold text-sm">张</span>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-13">张先生</span>
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="text-primary font-bold">0.85</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">召回指数</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-13">张先生</span>
|
||||
<div class="flex items-center gap-1.5 mt-0.5">
|
||||
<span class="text-xs text-gray-6">理想 <span class="text-gray-11 font-medium">7天</span></span>
|
||||
<span class="text-xs text-gray-6">已过 <span class="text-error font-bold">18天</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="px-2.5 py-1 bg-error/10 text-error text-sm font-bold rounded-lg">超期 11天</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs mb-2.5 ml-11">
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1 text-sm ml-11 mb-2">
|
||||
<div class="text-gray-6">30天到店 <span class="text-gray-11 font-medium">2次</span></div>
|
||||
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">18天前</span></div>
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">7天</span></div>
|
||||
<div class="text-gray-6">超过 <span class="text-error font-medium">11天</span></div>
|
||||
<div class="text-gray-6">余额合计 <span class="text-gray-11 font-medium">¥3,200</span></div>
|
||||
<div class="text-gray-6">余额 <span class="text-gray-11 font-medium">¥3,200</span></div>
|
||||
<div class="text-gray-6">召回指数 <span class="text-primary font-bold">0.85</span></div>
|
||||
</div>
|
||||
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
||||
<span class="text-gray-6">助教:</span>
|
||||
@@ -321,14 +324,19 @@
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="text-primary font-bold">0.95</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">消费潜力指数</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">消费潜力</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs mb-2.5 ml-11">
|
||||
<div class="text-gray-6">近30天消费 <span class="text-gray-11 font-medium">¥4,800</span></div>
|
||||
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">5天前</span></div>
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">10天</span></div>
|
||||
<div class="text-gray-6">余额合计 <span class="text-gray-11 font-medium">¥15,000</span></div>
|
||||
<div class="ml-11 mb-2 bg-gradient-to-r from-primary/5 to-blue-50 rounded-lg p-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-sm font-bold text-primary">🔥 S级潜力</span>
|
||||
<span class="text-xs text-gray-6">高频 · 高客单 · 高余额</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2 text-center">
|
||||
<div><p class="text-sm font-bold text-gray-13">¥4,800</p><p class="text-xs text-gray-6">近30天消费</p></div>
|
||||
<div><p class="text-sm font-bold text-gray-13">8次</p><p class="text-xs text-gray-6">月均到店</p></div>
|
||||
<div><p class="text-sm font-bold text-success">¥15,000</p><p class="text-xs text-gray-6">余额</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
||||
<span class="text-gray-6">助教:</span>
|
||||
@@ -348,14 +356,19 @@
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="text-primary font-bold">0.87</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">消费潜力指数</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">消费潜力</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs mb-2.5 ml-11">
|
||||
<div class="text-gray-6">近30天消费 <span class="text-gray-11 font-medium">¥3,500</span></div>
|
||||
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">8天前</span></div>
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">14天</span></div>
|
||||
<div class="text-gray-6">余额合计 <span class="text-gray-11 font-medium">¥6,800</span></div>
|
||||
<div class="ml-11 mb-2 bg-gradient-to-r from-primary/5 to-blue-50 rounded-lg p-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-sm font-bold text-primary">⭐ A级潜力</span>
|
||||
<span class="text-xs text-gray-6">中频 · 高客单</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2 text-center">
|
||||
<div><p class="text-sm font-bold text-gray-13">¥3,500</p><p class="text-xs text-gray-6">近30天消费</p></div>
|
||||
<div><p class="text-sm font-bold text-gray-13">5次</p><p class="text-xs text-gray-6">月均到店</p></div>
|
||||
<div><p class="text-sm font-bold text-success">¥6,800</p><p class="text-xs text-gray-6">余额</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
||||
<span class="text-gray-6">助教:</span>
|
||||
@@ -369,52 +382,64 @@
|
||||
<!-- ==================== 最高余额 ==================== -->
|
||||
<div id="dim-balance" class="dim-container p-4 pt-1 space-y-3">
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-rose-400 to-pink-500 flex items-center justify-center shrink-0">
|
||||
<span class="text-white font-semibold text-sm">赵</span>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-13">赵女士</span>
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="text-primary font-bold">0.78</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">消费潜力指数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs mb-2.5 ml-11">
|
||||
<div class="text-gray-6">余额合计 <span class="text-warning font-bold">¥25,000</span></div>
|
||||
<div class="text-gray-6">近60天消费 <span class="text-gray-11 font-medium">¥6,200</span></div>
|
||||
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">12天前</span></div>
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">10天</span></div>
|
||||
<div class="ml-11 mb-2">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="text-lg font-bold text-warning">¥25,000</span>
|
||||
<span class="text-xs text-gray-6">余额</span>
|
||||
<span class="text-xs text-gray-5">·</span>
|
||||
<span class="text-sm font-medium text-success">可用约8个月</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mt-2 text-sm">
|
||||
<div class="text-gray-6">60天消费 <span class="text-gray-11 font-medium">¥6,200</span></div>
|
||||
<div class="text-gray-6">月均消耗 <span class="text-gray-11 font-medium">¥3,100</span></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mt-1 text-sm">
|
||||
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">12天前</span></div>
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">10天</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
||||
<span class="text-gray-6">助教:</span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-normal">泡芙</span></span>
|
||||
<span class="assistant-sep">|</span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-normal">小燕</span></span>
|
||||
<span class="assistant-sep">|</span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-normal">泡芙</span></span>
|
||||
<span class="assistant-sep">|</span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-abandoned">Amy</span><span class="assistant-badge assistant-badge-drop">弃</span></span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center shrink-0">
|
||||
<span class="text-white font-semibold text-sm">陈</span>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-13">陈先生</span>
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="text-primary font-bold">0.72</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">消费潜力指数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs mb-2.5 ml-11">
|
||||
<div class="text-gray-6">余额合计 <span class="text-warning font-bold">¥18,500</span></div>
|
||||
<div class="text-gray-6">近60天消费 <span class="text-gray-11 font-medium">¥3,800</span></div>
|
||||
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">8天前</span></div>
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">14天</span></div>
|
||||
<div class="ml-11 mb-2">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="text-lg font-bold text-warning">¥18,500</span>
|
||||
<span class="text-xs text-gray-6">余额</span>
|
||||
<span class="text-xs text-gray-5">·</span>
|
||||
<span class="text-sm font-medium text-success">可用约9.7个月</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mt-2 text-sm">
|
||||
<div class="text-gray-6">60天消费 <span class="text-gray-11 font-medium">¥3,800</span></div>
|
||||
<div class="text-gray-6">月均消耗 <span class="text-gray-11 font-medium">¥1,900</span></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mt-1 text-sm">
|
||||
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">8天前</span></div>
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">14天</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
||||
<span class="text-gray-6">助教:</span>
|
||||
@@ -428,23 +453,31 @@
|
||||
<!-- ==================== 最近充值 ==================== -->
|
||||
<div id="dim-recharge" class="dim-container p-4 pt-1 space-y-3">
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-indigo-400 to-blue-500 flex items-center justify-center shrink-0">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-indigo-400 to-blue-500 flex items-center justify-center shrink-0">
|
||||
<span class="text-white font-semibold text-sm">吴</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="font-semibold text-gray-13">吴先生</span>
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="text-primary font-bold">¥5,000</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">充值金额</div>
|
||||
<span class="text-[10px] text-gray-6">2天前充值</span>
|
||||
</div>
|
||||
<div class="ml-11 mb-2 bg-gradient-to-r from-emerald-50 to-green-50 rounded-lg p-2.5 border border-emerald-100/50">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<span class="text-lg font-bold text-success">+¥5,000</span>
|
||||
<span class="text-[10px] text-gray-6 ml-1">充值</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-xs text-gray-6">充后余额</div>
|
||||
<div class="text-sm font-bold text-gray-13">¥8,200</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs mb-2.5 ml-11">
|
||||
<div class="text-gray-6">最近充值 <span class="text-gray-11 font-medium">2天前</span></div>
|
||||
<div class="text-gray-6">余额合计 <span class="text-gray-11 font-medium">¥8,200</span></div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1 text-sm ml-11 mb-2">
|
||||
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">2天前</span></div>
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">7天</span></div>
|
||||
<div class="text-gray-6">近3月充值 <span class="text-success font-medium">3次</span></div>
|
||||
</div>
|
||||
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
||||
<span class="text-gray-6">助教:</span>
|
||||
@@ -455,29 +488,37 @@
|
||||
</a>
|
||||
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-orange-400 to-amber-500 flex items-center justify-center shrink-0">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-orange-400 to-amber-500 flex items-center justify-center shrink-0">
|
||||
<span class="text-white font-semibold text-sm">郑</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="font-semibold text-gray-13">郑女士</span>
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="text-primary font-bold">¥3,000</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">充值金额</div>
|
||||
<span class="text-[10px] text-gray-6">5天前充值</span>
|
||||
</div>
|
||||
<div class="ml-11 mb-2 bg-gradient-to-r from-emerald-50 to-green-50 rounded-lg p-2.5 border border-emerald-100/50">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<span class="text-lg font-bold text-success">+¥3,000</span>
|
||||
<span class="text-[10px] text-gray-6 ml-1">充值</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-xs text-gray-6">充后余额</div>
|
||||
<div class="text-sm font-bold text-gray-13">¥6,500</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs mb-2.5 ml-11">
|
||||
<div class="text-gray-6">最近充值 <span class="text-gray-11 font-medium">5天前</span></div>
|
||||
<div class="text-gray-6">余额合计 <span class="text-gray-11 font-medium">¥6,500</span></div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1 text-sm ml-11 mb-2">
|
||||
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">5天前</span></div>
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">10天</span></div>
|
||||
<div class="text-gray-6">近3月充值 <span class="text-success font-medium">2次</span></div>
|
||||
</div>
|
||||
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
||||
<span class="text-gray-6">助教:</span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-assignee">泡芙</span><span class="assistant-badge assistant-badge-follow">跟</span></span>
|
||||
<span class="assistant-sep">|</span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-normal">Amy</span></span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-normal">小燕</span></span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -492,24 +533,26 @@
|
||||
</div>
|
||||
<span class="font-semibold text-gray-13">李女士</span>
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="text-primary font-bold">0.91</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">消费潜力指数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs mb-2.5 ml-11">
|
||||
<div class="text-gray-6">近60天消费 <span class="text-warning font-bold">¥12,800</span></div>
|
||||
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">3天前</span></div>
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">7天</span></div>
|
||||
<div class="text-gray-6">余额合计 <span class="text-gray-11 font-medium">¥8,200</span></div>
|
||||
<div class="ml-11 mb-2">
|
||||
<div class="flex items-baseline gap-3">
|
||||
<div>
|
||||
<span class="text-lg font-bold text-warning">¥12,800</span>
|
||||
<span class="text-xs text-gray-6 ml-1">近60天消费</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-5">·</span>
|
||||
<span class="text-sm text-gray-9">18次到店</span>
|
||||
<span class="text-xs text-gray-5">·</span>
|
||||
<span class="text-sm text-gray-9">次均¥711</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
||||
<span class="text-gray-6">助教:</span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-assignee">小燕</span><span class="assistant-badge assistant-badge-follow">跟</span></span>
|
||||
<span class="assistant-sep">|</span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-normal">Amy</span></span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-normal">泡芙</span></span>
|
||||
<span class="assistant-sep">|</span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-abandoned">泡芙</span><span class="assistant-badge assistant-badge-drop">弃</span></span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-abandoned">Amy</span><span class="assistant-badge assistant-badge-drop">弃</span></span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@@ -521,22 +564,24 @@
|
||||
</div>
|
||||
<span class="font-semibold text-gray-13">王先生</span>
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="text-primary font-bold">0.84</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">消费潜力指数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs mb-2.5 ml-11">
|
||||
<div class="text-gray-6">近60天消费 <span class="text-warning font-bold">¥9,500</span></div>
|
||||
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">15天前</span></div>
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">7天</span></div>
|
||||
<div class="text-gray-6">余额合计 <span class="text-gray-11 font-medium">¥5,000</span></div>
|
||||
<div class="ml-11 mb-2">
|
||||
<div class="flex items-baseline gap-3">
|
||||
<div>
|
||||
<span class="text-lg font-bold text-warning">¥9,500</span>
|
||||
<span class="text-xs text-gray-6 ml-1">近60天消费</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-5">·</span>
|
||||
<span class="text-sm text-gray-9">12次到店</span>
|
||||
<span class="text-xs text-gray-5">·</span>
|
||||
<span class="text-sm text-gray-9">次均¥792</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
||||
<span class="text-gray-6">助教:</span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-normal">泡芙</span></span>
|
||||
<span class="assistant-sep">|</span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-normal">小燕</span></span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-normal">Amy</span></span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -549,19 +594,34 @@
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center shrink-0">
|
||||
<span class="text-white font-semibold text-sm">张</span>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-13">张先生</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="font-semibold text-gray-13">张先生</span>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-xs">
|
||||
<span class="text-gray-6">平均间隔 <span class="text-primary font-medium">3.3天</span></span>
|
||||
<span class="text-gray-6">60天消费 <span class="text-gray-11 font-medium">¥8,600</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="text-primary font-bold">0.82</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">消费潜力指数</div>
|
||||
<div class="text-primary font-bold text-lg">18<span class="text-xs font-normal text-gray-6">天</span></div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">60天到店</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs mb-2.5 ml-11">
|
||||
<div class="text-gray-6">60天到店 <span class="text-warning font-bold">18天</span></div>
|
||||
<div class="text-gray-6">近60天消费 <span class="text-gray-11 font-medium">¥8,600</span></div>
|
||||
<div class="text-gray-6">余额合计 <span class="text-gray-11 font-medium">¥4,200</span></div>
|
||||
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">2天前</span></div>
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">3天</span></div>
|
||||
<div class="ml-11 mb-2">
|
||||
<div class="flex items-center justify-between text-[10px] text-gray-5 mb-0.5">
|
||||
<span>8周前</span>
|
||||
<span>本周 <span class="text-primary font-bold text-xs">3</span></span>
|
||||
</div>
|
||||
<div class="flex items-end gap-0.5 h-6">
|
||||
<div class="flex-1 bg-primary/20 rounded-t" style="height:60%"></div>
|
||||
<div class="flex-1 bg-primary/30 rounded-t" style="height:80%"></div>
|
||||
<div class="flex-1 bg-primary/40 rounded-t" style="height:50%"></div>
|
||||
<div class="flex-1 bg-primary/50 rounded-t" style="height:100%"></div>
|
||||
<div class="flex-1 bg-primary/40 rounded-t" style="height:70%"></div>
|
||||
<div class="flex-1 bg-primary/60 rounded-t" style="height:90%"></div>
|
||||
<div class="flex-1 bg-primary/30 rounded-t" style="height:40%"></div>
|
||||
<div class="flex-1 bg-primary/50 rounded-t" style="height:75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
||||
<span class="text-gray-6">助教:</span>
|
||||
@@ -579,19 +639,34 @@
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center shrink-0">
|
||||
<span class="text-white font-semibold text-sm">陈</span>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-13">陈先生</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="font-semibold text-gray-13">陈先生</span>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-xs">
|
||||
<span class="text-gray-6">平均间隔 <span class="text-primary font-medium">4天</span></span>
|
||||
<span class="text-gray-6">60天消费 <span class="text-gray-11 font-medium">¥6,200</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="text-primary font-bold">0.79</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">消费潜力指数</div>
|
||||
<div class="text-primary font-bold text-lg">15<span class="text-xs font-normal text-gray-6">天</span></div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">60天到店</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs mb-2.5 ml-11">
|
||||
<div class="text-gray-6">60天到店 <span class="text-warning font-bold">15天</span></div>
|
||||
<div class="text-gray-6">近60天消费 <span class="text-gray-11 font-medium">¥6,200</span></div>
|
||||
<div class="text-gray-6">余额合计 <span class="text-gray-11 font-medium">¥7,800</span></div>
|
||||
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">3天前</span></div>
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">4天</span></div>
|
||||
<div class="ml-11 mb-2">
|
||||
<div class="flex items-center justify-between text-[10px] text-gray-5 mb-0.5">
|
||||
<span>8周前</span>
|
||||
<span>本周 <span class="text-primary font-bold text-xs">2</span></span>
|
||||
</div>
|
||||
<div class="flex items-end gap-0.5 h-6">
|
||||
<div class="flex-1 bg-primary/20 rounded-t" style="height:40%"></div>
|
||||
<div class="flex-1 bg-primary/30 rounded-t" style="height:60%"></div>
|
||||
<div class="flex-1 bg-primary/40 rounded-t" style="height:70%"></div>
|
||||
<div class="flex-1 bg-primary/30 rounded-t" style="height:50%"></div>
|
||||
<div class="flex-1 bg-primary/50 rounded-t" style="height:80%"></div>
|
||||
<div class="flex-1 bg-primary/40 rounded-t" style="height:65%"></div>
|
||||
<div class="flex-1 bg-primary/60 rounded-t" style="height:90%"></div>
|
||||
<div class="flex-1 bg-primary/50 rounded-t" style="height:70%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
||||
<span class="text-gray-6">助教:</span>
|
||||
@@ -605,24 +680,22 @@
|
||||
<!-- ==================== 最近到店 ==================== -->
|
||||
<div id="dim-recent" class="dim-container p-4 pt-1 space-y-3">
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center shrink-0">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center shrink-0">
|
||||
<span class="text-white font-semibold text-sm">刘</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="font-semibold text-gray-13">刘先生</span>
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="text-primary font-bold">0.88</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">消费潜力指数</div>
|
||||
<div class="flex items-baseline gap-0.5 shrink-0">
|
||||
<span class="text-2xl font-bold text-success">1</span>
|
||||
<span class="text-xs text-gray-6">天前到店</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs mb-2.5 ml-11">
|
||||
<div class="text-gray-6">最近到店 <span class="text-success font-bold">1天前</span></div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1 text-sm ml-11 mb-2">
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">7天</span></div>
|
||||
<div class="text-gray-6">60天到店 <span class="text-gray-11 font-medium">12天</span></div>
|
||||
<div class="text-gray-6">近60天消费 <span class="text-gray-11 font-medium">¥5,400</span></div>
|
||||
<div class="text-gray-6">余额合计 <span class="text-gray-11 font-medium">¥9,200</span></div>
|
||||
<div class="text-gray-6">次均消费 <span class="text-gray-11 font-medium">¥450</span></div>
|
||||
</div>
|
||||
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
||||
<span class="text-gray-6">助教:</span>
|
||||
@@ -633,24 +706,22 @@
|
||||
</a>
|
||||
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center shrink-0">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center shrink-0">
|
||||
<span class="text-white font-semibold text-sm">周</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="font-semibold text-gray-13">周先生</span>
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="text-primary font-bold">0.75</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">消费潜力指数</div>
|
||||
<div class="flex items-baseline gap-0.5 shrink-0">
|
||||
<span class="text-2xl font-bold text-success">2</span>
|
||||
<span class="text-xs text-gray-6">天前到店</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs mb-2.5 ml-11">
|
||||
<div class="text-gray-6">最近到店 <span class="text-success font-bold">2天前</span></div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1 text-sm ml-11 mb-2">
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">10天</span></div>
|
||||
<div class="text-gray-6">60天到店 <span class="text-gray-11 font-medium">8天</span></div>
|
||||
<div class="text-gray-6">近60天消费 <span class="text-gray-11 font-medium">¥3,800</span></div>
|
||||
<div class="text-gray-6">余额合计 <span class="text-gray-11 font-medium">¥5,500</span></div>
|
||||
<div class="text-gray-6">次均消费 <span class="text-gray-11 font-medium">¥475</span></div>
|
||||
</div>
|
||||
<div class="text-xs border-t border-gray-1 pt-2 ml-11">
|
||||
<span class="text-gray-6">助教:</span>
|
||||
@@ -664,61 +735,84 @@
|
||||
<!-- ==================== 最专一 ==================== -->
|
||||
<div id="dim-loyal" class="dim-container p-4 pt-1 space-y-3">
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-teal-400 to-cyan-500 flex items-center justify-center shrink-0">
|
||||
<div class="flex items-center gap-2 mb-2.5">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-teal-400 to-cyan-500 flex items-center justify-center shrink-0">
|
||||
<span class="text-white font-semibold text-sm">孙</span>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-13">孙先生</span>
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="text-primary font-bold">0.81</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">消费潜力指数</div>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-13">孙先生</span>
|
||||
</div>
|
||||
<!-- 最专一：助教信息优先，带关系指数 -->
|
||||
<div class="text-xs mb-2 ml-11 pb-2 border-b border-gray-1">
|
||||
<span class="text-gray-6">助教:</span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-assignee">小燕</span><span class="assistant-badge assistant-badge-follow">跟</span></span><span class="text-gray-5 text-[10px] ml-0.5">(0.95)</span>
|
||||
<span class="assistant-sep">|</span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-normal">泡芙</span></span><span class="text-gray-5 text-[10px] ml-0.5">(0.68)</span>
|
||||
<span class="assistant-sep">|</span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-abandoned">Amy</span><span class="assistant-badge assistant-badge-drop">弃</span></span><span class="text-gray-5 text-[10px] ml-0.5">(0.32)</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs ml-11">
|
||||
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">6天前</span></div>
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">7天</span></div>
|
||||
<div class="text-gray-6">60天到店 <span class="text-gray-11 font-medium">10天</span></div>
|
||||
<div class="text-gray-6">近60天消费 <span class="text-gray-11 font-medium">¥4,500</span></div>
|
||||
<div class="text-gray-6">余额合计 <span class="text-gray-11 font-medium">¥7,200</span></div>
|
||||
<div class="ml-11 mb-1 space-y-1.5">
|
||||
<!-- 表头 -->
|
||||
<div class="flex items-center text-[10px] text-gray-5 gap-1">
|
||||
<span class="w-14"></span>
|
||||
<span class="flex-1"></span>
|
||||
<span class="w-12 text-right">次均时长</span>
|
||||
<span class="w-12 text-right">60天时长</span>
|
||||
<span class="w-10 text-right">服务次</span>
|
||||
</div>
|
||||
<!-- 小燕 -->
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="w-14 flex items-center gap-0.5 shrink-0"><span class="text-xs">❤️</span><span class="text-xs font-medium text-error">小燕</span></span>
|
||||
<span class="text-[10px] text-gray-5 shrink-0">0.95</span>
|
||||
<span class="assistant-badge assistant-badge-follow text-[9px] shrink-0">跟</span>
|
||||
<span class="flex-1"></span>
|
||||
<span class="w-12 text-right text-xs font-medium text-gray-11">2.1h</span>
|
||||
<span class="w-12 text-right text-xs font-medium text-gray-11">25.2h</span>
|
||||
<span class="w-10 text-right text-xs font-medium text-gray-11">12</span>
|
||||
</div>
|
||||
<!-- 泡芙 -->
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="w-14 flex items-center gap-0.5 shrink-0"><span class="text-xs">❤️</span><span class="text-xs font-medium text-gray-13">泡芙</span></span>
|
||||
<span class="text-[10px] text-gray-5 shrink-0">0.68</span>
|
||||
<span class="flex-1"></span>
|
||||
<span class="w-12 text-right text-xs font-medium text-gray-11">1.8h</span>
|
||||
<span class="w-12 text-right text-xs font-medium text-gray-11">9.0h</span>
|
||||
<span class="w-10 text-right text-xs font-medium text-gray-11">5</span>
|
||||
</div>
|
||||
<!-- Amy -->
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="w-14 flex items-center gap-0.5 shrink-0"><span class="text-xs">❤️</span><span class="text-xs font-medium text-gray-5">Amy</span></span>
|
||||
<span class="text-[10px] text-gray-5 shrink-0">0.32</span>
|
||||
<span class="assistant-badge assistant-badge-drop text-[9px] shrink-0">弃</span>
|
||||
<span class="flex-1"></span>
|
||||
<span class="w-12 text-right text-xs text-gray-7">1.2h</span>
|
||||
<span class="w-12 text-right text-xs text-gray-7">3.6h</span>
|
||||
<span class="w-10 text-right text-xs text-gray-7">3</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="customer-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm customer-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-rose-400 to-pink-500 flex items-center justify-center shrink-0">
|
||||
<div class="flex items-center gap-2 mb-2.5">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-rose-400 to-pink-500 flex items-center justify-center shrink-0">
|
||||
<span class="text-white font-semibold text-sm">赵</span>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-13">赵女士</span>
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="text-primary font-bold">0.90</div>
|
||||
<div class="text-[10px] text-gray-6 -mt-0.5">消费潜力指数</div>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-13">赵女士</span>
|
||||
</div>
|
||||
<div class="text-xs mb-2 ml-11 pb-2 border-b border-gray-1">
|
||||
<span class="text-gray-6">助教:</span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-normal">Amy</span></span><span class="text-gray-5 text-[10px] ml-0.5">(0.88)</span>
|
||||
<span class="assistant-sep">|</span>
|
||||
<span class="assistant-tag">❤️ <span class="assistant-normal">泡芙</span></span><span class="text-gray-5 text-[10px] ml-0.5">(0.72)</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs ml-11">
|
||||
<div class="text-gray-6">最近到店 <span class="text-gray-11 font-medium">4天前</span></div>
|
||||
<div class="text-gray-6">理想间隔 <span class="text-gray-11 font-medium">5天</span></div>
|
||||
<div class="text-gray-6">60天到店 <span class="text-gray-11 font-medium">14天</span></div>
|
||||
<div class="text-gray-6">近60天消费 <span class="text-gray-11 font-medium">¥7,800</span></div>
|
||||
<div class="text-gray-6">余额合计 <span class="text-gray-11 font-medium">¥12,000</span></div>
|
||||
<div class="ml-11 mb-1 space-y-1.5">
|
||||
<div class="flex items-center text-[10px] text-gray-5 gap-1">
|
||||
<span class="w-14"></span>
|
||||
<span class="flex-1"></span>
|
||||
<span class="w-12 text-right">次均时长</span>
|
||||
<span class="w-12 text-right">60天时长</span>
|
||||
<span class="w-10 text-right">服务次</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="w-14 flex items-center gap-0.5 shrink-0"><span class="text-xs">❤️</span><span class="text-xs font-medium text-gray-13">Amy</span></span>
|
||||
<span class="text-[10px] text-gray-5 shrink-0">0.88</span>
|
||||
<span class="flex-1"></span>
|
||||
<span class="w-12 text-right text-xs font-medium text-gray-11">2.3h</span>
|
||||
<span class="w-12 text-right text-xs font-medium text-gray-11">32.2h</span>
|
||||
<span class="w-10 text-right text-xs font-medium text-gray-11">14</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="w-14 flex items-center gap-0.5 shrink-0"><span class="text-xs">❤️</span><span class="text-xs font-medium text-gray-13">泡芙</span></span>
|
||||
<span class="text-[10px] text-gray-5 shrink-0">0.72</span>
|
||||
<span class="flex-1"></span>
|
||||
<span class="w-12 text-right text-xs font-medium text-gray-11">1.5h</span>
|
||||
<span class="w-12 text-right text-xs font-medium text-gray-11">12.0h</span>
|
||||
<span class="w-10 text-right text-xs font-medium text-gray-11">8</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -12,113 +12,62 @@
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#0052d9',
|
||||
'primary-light': '#ecf2fe',
|
||||
success: '#00a870',
|
||||
warning: '#ed7b2f',
|
||||
error: '#e34d59',
|
||||
'gray-1': '#f3f3f3',
|
||||
'gray-2': '#eeeeee',
|
||||
'gray-3': '#e7e7e7',
|
||||
'gray-4': '#dcdcdc',
|
||||
'gray-5': '#c5c5c5',
|
||||
'gray-6': '#a6a6a6',
|
||||
'gray-7': '#8b8b8b',
|
||||
'gray-8': '#777777',
|
||||
'gray-9': '#5e5e5e',
|
||||
'gray-10': '#4b4b4b',
|
||||
'gray-11': '#393939',
|
||||
'gray-12': '#2c2c2c',
|
||||
primary: '#0052d9', 'primary-light': '#ecf2fe',
|
||||
success: '#00a870', warning: '#ed7b2f', error: '#e34d59',
|
||||
'gray-1': '#f3f3f3', 'gray-2': '#eeeeee', 'gray-3': '#e7e7e7',
|
||||
'gray-4': '#dcdcdc', 'gray-5': '#c5c5c5', 'gray-6': '#a6a6a6',
|
||||
'gray-7': '#8b8b8b', 'gray-8': '#777777', 'gray-9': '#5e5e5e',
|
||||
'gray-10': '#4b4b4b', 'gray-11': '#393939', 'gray-12': '#2c2c2c',
|
||||
'gray-13': '#242424',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Noto Sans SC', 'sans-serif'],
|
||||
}
|
||||
fontFamily: { sans: ['Noto Sans SC', 'sans-serif'] }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
/* 覆盖banner样式 */
|
||||
.banner-bg.theme-coral .text-white {
|
||||
color: #ffffff !important;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
.banner-bg.theme-coral .text-emerald-300 {
|
||||
color: #6ee7b7 !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
.section-title {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||
.section-title.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||
.section-title.pink::before { background: linear-gradient(180deg, #e851a4, #f5a0c0); }
|
||||
body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; padding-bottom: 20px; }
|
||||
.st { position: relative; padding-left: 12px; }
|
||||
.st::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; border-radius: 2px; }
|
||||
.st.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||
.st.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||
.st.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||
.st.pink::before { background: linear-gradient(180deg, #e851a4, #f5a0c0); }
|
||||
.st.purple::before { background: linear-gradient(180deg, #7c3aed, #a78bfa); }
|
||||
.st.teal::before { background: linear-gradient(180deg, #0d9488, #5eead4); }
|
||||
.pv { font-variant-numeric: tabular-nums; }
|
||||
.progress-sm { height: 6px; border-radius: 3px; background: #e7e7e7; overflow: hidden; }
|
||||
.progress-sm .fill { height: 100%; border-radius: 3px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 通栏 Banner - 助教信息 -->
|
||||
<!-- Banner -->
|
||||
<div class="banner-bg theme-coral texture-aurora relative text-white">
|
||||
<!-- 导航栏 -->
|
||||
<div class="h-11 flex items-center relative px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center text-base font-medium">助教详情</h1>
|
||||
</div>
|
||||
|
||||
<!-- 助教信息 -->
|
||||
<div class="px-5 pt-2 pb-6">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg overflow-hidden">
|
||||
<div class="px-5 pt-2 pb-5">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-14 h-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg overflow-hidden flex-shrink-0">
|
||||
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl font-semibold">小燕</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-lg font-semibold">小燕</span>
|
||||
<span class="px-2 py-0.5 bg-amber-400/30 text-amber-100 rounded-full text-xs">星级</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-white/70 text-sm">
|
||||
<span class="px-2 py-0.5 bg-white/20 rounded text-xs">中🎱</span>
|
||||
<span class="px-2 py-0.5 bg-white/20 rounded text-xs">🎯 斯诺克</span>
|
||||
<div class="flex items-center gap-2 text-white/70 text-xs">
|
||||
<span class="px-2 py-0.5 bg-white/20 rounded">中🎱</span>
|
||||
<span class="px-2 py-0.5 bg-white/20 rounded">🎯 斯诺克</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">工龄</p>
|
||||
<p class="font-medium text-sm">3年</p>
|
||||
</div>
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">客户数</p>
|
||||
<p class="font-medium text-sm">68</p>
|
||||
</div>
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">当前任务数</p>
|
||||
<p class="font-medium text-sm">12</p>
|
||||
</div>
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">本月任务完成数</p>
|
||||
<p class="font-medium text-sm">38</p>
|
||||
<!-- 工龄 + 客户数 放右侧 -->
|
||||
<div class="flex-shrink-0 text-right space-y-1.5">
|
||||
<div class="text-white/70 text-xs">工龄 <span class="text-white font-bold text-base">3年</span></div>
|
||||
<div class="text-white/70 text-xs">客户 <span class="text-white font-bold text-base">68人</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -126,88 +75,432 @@
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- 专业技能 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">专业技能</h2>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">中🎱 精通</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎯 斯诺克</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-full border border-orange-100">🎳 花式</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
专攻中式八球和斯诺克教学，具有 3 年专业教学经验。擅长基础教学和进阶技巧指导，累计培训学员 200+，多名学员参加业余比赛获奖。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 擅长领域 -->
|
||||
<!-- 绩效概览 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">擅长领域</h2>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="p-3 bg-gray-50 rounded-xl">
|
||||
<p class="text-sm font-medium text-gray-13 mb-1">基础入门</p>
|
||||
<p class="text-xs text-gray-6">零基础学员快速上手</p>
|
||||
<h2 class="st blue text-base font-semibold text-gray-13 mb-4">绩效概览</h2>
|
||||
<div class="grid grid-cols-2 gap-3 mb-4">
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-3 border border-blue-100/50">
|
||||
<p class="text-[10px] text-gray-6 mb-1">本月定档业绩</p>
|
||||
<p class="text-2xl font-bold text-primary pv">87.5<span class="text-xs font-normal text-gray-6">h</span></p>
|
||||
<p class="text-[10px] text-gray-5 mt-0.5">折算前 89.0h</p>
|
||||
</div>
|
||||
<div class="p-3 bg-gray-50 rounded-xl">
|
||||
<p class="text-sm font-medium text-gray-13 mb-1">技巧进阶</p>
|
||||
<p class="text-xs text-gray-6">走位、翻袋、解球</p>
|
||||
<div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-3 border border-green-100/50">
|
||||
<p class="text-[10px] text-gray-6 mb-1">本月工资（预估）</p>
|
||||
<p class="text-2xl font-bold text-success pv">¥6,950</p>
|
||||
<p class="text-[10px] text-warning mt-0.5">含预估部分</p>
|
||||
</div>
|
||||
<div class="p-3 bg-gray-50 rounded-xl">
|
||||
<p class="text-sm font-medium text-gray-13 mb-1">心态训练</p>
|
||||
<p class="text-xs text-gray-6">比赛心理素质培养</p>
|
||||
<div class="bg-gradient-to-br from-orange-50 to-amber-50 rounded-xl p-3 border border-orange-100/50">
|
||||
<p class="text-[10px] text-gray-6 mb-1">客源储值余额</p>
|
||||
<p class="text-2xl font-bold text-warning pv">¥86,200</p>
|
||||
<p class="text-[10px] text-gray-5 mt-0.5">68位客户合计</p>
|
||||
</div>
|
||||
<div class="p-3 bg-gray-50 rounded-xl">
|
||||
<p class="text-sm font-medium text-gray-13 mb-1">战术分析</p>
|
||||
<p class="text-xs text-gray-6">局面判断与策略</p>
|
||||
<div class="bg-gradient-to-br from-purple-50 to-violet-50 rounded-xl p-3 border border-purple-100/50">
|
||||
<p class="text-[10px] text-gray-6 mb-1">本月任务完成</p>
|
||||
<p class="text-2xl font-bold text-purple-600 pv">38<span class="text-xs font-normal text-gray-6">个</span></p>
|
||||
<p class="text-[10px] text-gray-5 mt-0.5">覆盖 22 位客户</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 档位进度 -->
|
||||
<div class="bg-gray-50 rounded-xl p-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-xs text-gray-9 font-medium">绩效档位进度</span>
|
||||
<span class="text-xs text-primary font-medium">距下一档还差 12.5h</span>
|
||||
</div>
|
||||
<div class="progress-sm">
|
||||
<div class="fill bg-gradient-to-r from-primary to-blue-400" style="width:72%"></div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-1.5 text-[10px] text-gray-5">
|
||||
<span>当前 80h</span>
|
||||
<span>目标 100h</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 与我的关系 -->
|
||||
<!-- 收入明细 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title orange text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-4 py-2 bg-gradient-to-r from-green-500 to-emerald-500 text-white text-sm font-semibold rounded-xl shadow-sm">很好</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="h-3 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-gradient-to-r from-green-400 to-emerald-500 rounded-full" style="width: 92%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-lg font-bold text-success">0.92</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
您是该助教的熟客，共接受过 25 次教学服务。该助教对您的技术水平和学习偏好非常了解，能够提供针对性指导。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 我与该助教相关的客户 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title pink text-sm font-semibold text-gray-13 mb-4">相关客户</h2>
|
||||
<h2 class="st green text-base font-semibold text-gray-13 mb-4">收入明细</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-lg">💖</span>
|
||||
<span class="text-sm font-medium text-gray-13">张三</span>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-primary"></span>
|
||||
<span class="text-base text-gray-9">基础课时费</span>
|
||||
</div>
|
||||
<span class="text-sm text-success font-medium">0.95</span>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥3,500</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-lg">💛</span>
|
||||
<span class="text-sm font-medium text-gray-13">李四</span>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-success"></span>
|
||||
<span class="text-base text-gray-9">激励课时费</span>
|
||||
</div>
|
||||
<span class="text-sm text-warning font-medium">0.82</span>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥1,800</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-lg">💛</span>
|
||||
<span class="text-sm font-medium text-gray-13">王五</span>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-warning"></span>
|
||||
<span class="text-base text-gray-9">充值提成</span>
|
||||
</div>
|
||||
<span class="text-sm text-gray-7 font-medium">0.68</span>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥1,200</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-purple-500"></span>
|
||||
<span class="text-base text-gray-9">酒水提成</span>
|
||||
</div>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥450</span>
|
||||
</div>
|
||||
<div class="border-t border-gray-100 pt-2 flex items-center justify-between">
|
||||
<span class="text-base font-semibold text-gray-9">合计（预估）</span>
|
||||
<span class="text-base font-bold text-success pv">¥6,950</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 任务执行 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="st orange text-base font-semibold text-gray-13 mb-4">任务执行</h2>
|
||||
<!-- 当前任务概况 -->
|
||||
<div class="grid grid-cols-3 gap-2 mb-4">
|
||||
<div class="bg-red-50 rounded-xl p-3 text-center border border-red-100/50">
|
||||
<p class="text-2xl font-bold text-error pv">3</p>
|
||||
<p class="text-xs text-gray-7 mt-0.5">置顶任务</p>
|
||||
</div>
|
||||
<div class="bg-blue-50 rounded-xl p-3 text-center border border-blue-100/50">
|
||||
<p class="text-2xl font-bold text-primary pv">9</p>
|
||||
<p class="text-xs text-gray-7 mt-0.5">普通待办</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-xl p-3 text-center border border-gray-200">
|
||||
<p class="text-2xl font-bold text-gray-5 pv">2</p>
|
||||
<p class="text-xs text-gray-7 mt-0.5">已放弃</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 置顶任务 -->
|
||||
<p class="text-xs font-semibold text-error mb-2 flex items-center gap-1">📌 置顶任务</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex items-center gap-3 p-2.5 bg-red-50/60 rounded-lg border border-red-100/60">
|
||||
<span class="text-xs">🔴</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm font-medium text-gray-13">回访王先生 — 续卡意向</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月10日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-error/10 text-error rounded font-medium">紧急</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-red-50/60 rounded-lg border border-red-100/60">
|
||||
<span class="text-xs">🔴</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm font-medium text-gray-13">李女士充值跟进</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月12日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-error/10 text-error rounded font-medium">紧急</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-red-50/60 rounded-lg border border-red-100/60">
|
||||
<span class="text-xs">🔴</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm font-medium text-gray-13">陈女士激活 — 30天未到店</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月15日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-warning/10 text-warning rounded font-medium">重要</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 普通任务 -->
|
||||
<p class="text-xs font-semibold text-primary mb-2 flex items-center gap-1">📋 普通任务</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex items-center gap-3 p-2.5 bg-blue-50/40 rounded-lg border border-blue-100/40">
|
||||
<span class="text-xs">🔵</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-13">关怀张先生</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月18日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-primary/10 text-primary rounded">进行中</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-blue-50/40 rounded-lg border border-blue-100/40">
|
||||
<span class="text-xs">🔵</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-13">赵总生日关怀</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月20日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-primary/10 text-primary rounded">待开始</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-blue-50/40 rounded-lg border border-blue-100/40">
|
||||
<span class="text-xs">🔵</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-13">周女士课程推荐</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月22日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-primary/10 text-primary rounded">待开始</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 已放弃任务 -->
|
||||
<p class="text-xs font-semibold text-gray-5 mb-2 flex items-center gap-1">🚫 已放弃</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex items-center gap-3 p-2.5 bg-gray-50 rounded-lg border border-gray-200 opacity-60">
|
||||
<span class="text-xs">⚪</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-7 line-through">吴先生续卡</span>
|
||||
<span class="text-xs text-gray-5 ml-2">放弃于 2月3日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-gray-100 text-gray-5 rounded">客户拒绝</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-gray-50 rounded-lg border border-gray-200 opacity-60">
|
||||
<span class="text-xs">⚪</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-7 line-through">郑女士团建推荐</span>
|
||||
<span class="text-xs text-gray-5 ml-2">放弃于 1月28日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-gray-100 text-gray-5 rounded">超时未响应</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 已完成简报 -->
|
||||
<p class="text-xs font-semibold text-success mb-2 flex items-center gap-1">✅ 已完成 <span class="text-primary font-bold">38</span> 个</p>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-3 p-2.5 bg-gray-50 rounded-lg border border-gray-100">
|
||||
<span class="text-xs">✅</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-13">回访王先生</span>
|
||||
<span class="text-xs text-gray-6 ml-2">2月7日</span>
|
||||
</div>
|
||||
<span class="text-xs text-success font-medium">已完成</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-gray-50 rounded-lg border border-gray-100">
|
||||
<span class="text-xs">✅</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-13">充值跟进李女士</span>
|
||||
<span class="text-xs text-gray-6 ml-2">2月6日</span>
|
||||
</div>
|
||||
<span class="text-xs text-success font-medium">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-center">
|
||||
<button class="text-sm text-primary font-medium">查看全部任务 →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 客户关系 TOP5 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="st pink text-base font-semibold text-gray-13 mb-4">客户关系 TOP5</h2>
|
||||
<div class="space-y-2.5">
|
||||
<!-- 客户1 -->
|
||||
<div class="flex items-center gap-3 p-3 bg-gradient-to-r from-pink-50/80 to-rose-50/40 rounded-xl border border-pink-100/40">
|
||||
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center text-white text-xs font-medium flex-shrink-0">王</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-sm font-medium text-gray-13">王先生</span>
|
||||
<span class="text-xs">❤️</span>
|
||||
<span class="text-[10px] text-success font-medium pv">0.95</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-[10px] text-gray-6">
|
||||
<span>服务 25次</span>
|
||||
<span>储值 ¥8,600</span>
|
||||
<span>消费 ¥12,800</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<!-- 客户2 -->
|
||||
<div class="flex items-center gap-3 p-3 bg-gradient-to-r from-amber-50/80 to-yellow-50/40 rounded-xl border border-amber-100/40">
|
||||
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-white text-xs font-medium flex-shrink-0">李</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-sm font-medium text-gray-13">李女士</span>
|
||||
<span class="text-xs">❤️</span>
|
||||
<span class="text-[10px] text-success font-medium pv">0.92</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-[10px] text-gray-6">
|
||||
<span>服务 22次</span>
|
||||
<span>储值 ¥6,200</span>
|
||||
<span>消费 ¥9,500</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<!-- 客户3 -->
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center text-white text-xs font-medium flex-shrink-0">陈</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-sm font-medium text-gray-13">陈女士</span>
|
||||
<span class="text-xs">❤️</span>
|
||||
<span class="text-[10px] text-warning font-medium pv">0.85</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-[10px] text-gray-6">
|
||||
<span>服务 18次</span>
|
||||
<span>储值 ¥5,000</span>
|
||||
<span>消费 ¥7,200</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<!-- 客户4 -->
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-white text-xs font-medium flex-shrink-0">张</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-sm font-medium text-gray-13">张先生</span>
|
||||
<span class="text-xs">💛</span>
|
||||
<span class="text-[10px] text-warning font-medium pv">0.78</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-[10px] text-gray-6">
|
||||
<span>服务 12次</span>
|
||||
<span>储值 ¥3,800</span>
|
||||
<span>消费 ¥5,600</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<!-- 客户5 -->
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center text-white text-xs font-medium flex-shrink-0">赵</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-sm font-medium text-gray-13">赵先生</span>
|
||||
<span class="text-xs">💛</span>
|
||||
<span class="text-[10px] text-gray-7 font-medium pv">0.68</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-[10px] text-gray-6">
|
||||
<span>服务 8次</span>
|
||||
<span>储值 ¥2,000</span>
|
||||
<span>消费 ¥3,200</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 近期服务明细 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="st purple text-base font-semibold text-gray-13 mb-4">近期服务明细</h2>
|
||||
<div class="space-y-3">
|
||||
<!-- 服务记录1 -->
|
||||
<div class="p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium text-gray-13">王先生</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-[10px] rounded">基础课</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-6">2026-02-07 21:30</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="flex items-center gap-3 text-gray-6">
|
||||
<span>2.5h</span>
|
||||
<span>中🎱</span>
|
||||
</div>
|
||||
<span class="font-bold text-gray-13 pv">¥200</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 服务记录2 -->
|
||||
<div class="p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium text-gray-13">李女士</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-[10px] rounded">激励课</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-6">2026-02-07 19:00</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="flex items-center gap-3 text-gray-6">
|
||||
<span>1.5h</span>
|
||||
<span class="text-orange-500">定档绩效：2h</span>
|
||||
<span>斯诺克</span>
|
||||
</div>
|
||||
<span class="font-bold text-gray-13 pv">¥150</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 服务记录3 -->
|
||||
<div class="p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium text-gray-13">陈女士</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-[10px] rounded">基础课</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-6">2026-02-06 20:00</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="flex items-center gap-3 text-gray-6">
|
||||
<span>2h</span>
|
||||
<span>中🎱</span>
|
||||
</div>
|
||||
<span class="font-bold text-gray-13 pv">¥160</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 服务记录4 -->
|
||||
<div class="p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium text-gray-13">张先生</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-[10px] rounded">激励课</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-6">2026-02-05 14:00</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="flex items-center gap-3 text-gray-6">
|
||||
<span>1h</span>
|
||||
<span>中🎱</span>
|
||||
</div>
|
||||
<span class="font-bold text-gray-13 pv">¥80</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 查看更多 -->
|
||||
<div class="mt-3 text-center">
|
||||
<button class="text-xs text-primary font-medium">查看更多服务记录 →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 更多信息 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="st teal text-base font-semibold text-gray-13 mb-4">更多信息</h2>
|
||||
<div class="flex items-center justify-between py-2 border-b border-gray-100 mb-4">
|
||||
<span class="text-base text-gray-7">入职日期</span>
|
||||
<span class="text-base text-gray-13">2023-03-15</span>
|
||||
</div>
|
||||
<!-- 月度数据表格 -->
|
||||
<div class="overflow-x-auto -mx-1">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-200">
|
||||
<th class="text-left py-2 px-2 text-gray-7 font-medium text-xs">月份</th>
|
||||
<th class="text-right py-2 px-2 text-gray-7 font-medium text-xs">服务客户</th>
|
||||
<th class="text-right py-2 px-2 text-gray-7 font-medium text-xs">业绩时长</th>
|
||||
<th class="text-right py-2 px-2 text-gray-7 font-medium text-xs">工资</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-50 bg-blue-50/30">
|
||||
<td class="py-2.5 px-2 text-gray-13 font-medium">本月<span class="text-[10px] text-warning ml-1">预估</span></td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv font-medium">22人</td>
|
||||
<td class="py-2.5 px-2 text-right text-primary pv font-bold">87.5h</td>
|
||||
<td class="py-2.5 px-2 text-right text-success pv font-bold">¥6,950</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-50">
|
||||
<td class="py-2.5 px-2 text-gray-13">上月</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">25人</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">92.0h</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">¥7,200</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-50">
|
||||
<td class="py-2.5 px-2 text-gray-13">4月</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">20人</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">85.0h</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">¥6,600</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-50">
|
||||
<td class="py-2.5 px-2 text-gray-13">3月</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">18人</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">78.5h</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">¥6,100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2.5 px-2 text-gray-13">2月</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">15人</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">65.0h</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">¥5,200</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -12,71 +12,40 @@
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#0052d9',
|
||||
'primary-light': '#ecf2fe',
|
||||
success: '#00a870',
|
||||
warning: '#ed7b2f',
|
||||
error: '#e34d59',
|
||||
'gray-1': '#f3f3f3',
|
||||
'gray-2': '#eeeeee',
|
||||
'gray-3': '#e7e7e7',
|
||||
'gray-4': '#dcdcdc',
|
||||
'gray-5': '#c5c5c5',
|
||||
'gray-6': '#a6a6a6',
|
||||
'gray-7': '#8b8b8b',
|
||||
'gray-8': '#777777',
|
||||
'gray-9': '#5e5e5e',
|
||||
'gray-10': '#4b4b4b',
|
||||
'gray-11': '#393939',
|
||||
'gray-12': '#2c2c2c',
|
||||
primary: '#0052d9', 'primary-light': '#ecf2fe',
|
||||
success: '#00a870', warning: '#ed7b2f', error: '#e34d59',
|
||||
'gray-1': '#f3f3f3', 'gray-2': '#eeeeee', 'gray-3': '#e7e7e7',
|
||||
'gray-4': '#dcdcdc', 'gray-5': '#c5c5c5', 'gray-6': '#a6a6a6',
|
||||
'gray-7': '#8b8b8b', 'gray-8': '#777777', 'gray-9': '#5e5e5e',
|
||||
'gray-10': '#4b4b4b', 'gray-11': '#393939', 'gray-12': '#2c2c2c',
|
||||
'gray-13': '#242424',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Noto Sans SC', 'sans-serif'],
|
||||
}
|
||||
fontFamily: { sans: ['Noto Sans SC', 'sans-serif'] }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.section-title {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||
.section-title.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||
.section-title.pink::before { background: linear-gradient(180deg, #e851a4, #f5a0c0); }
|
||||
body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; padding-bottom: 80px; }
|
||||
.st { position: relative; padding-left: 12px; }
|
||||
.st::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; border-radius: 2px; }
|
||||
.st.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||
.st.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||
.st.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||
.st.pink::before { background: linear-gradient(180deg, #e851a4, #f5a0c0); }
|
||||
.pv { font-variant-numeric: tabular-nums; }
|
||||
.orig-price { text-decoration: line-through; color: #a6a6a6; font-size: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 通栏 Banner - 客户信息 -->
|
||||
<!-- Banner -->
|
||||
<div class="banner-bg theme-dark-gold texture-aurora relative text-white">
|
||||
<!-- 导航栏 -->
|
||||
<div class="h-11 flex items-center relative px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center text-base font-medium">客户详情</h1>
|
||||
</div>
|
||||
|
||||
<!-- 客户信息 -->
|
||||
<div class="px-5 pt-2 pb-6">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg">
|
||||
@@ -93,7 +62,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 rounded-xl backdrop-blur-sm">
|
||||
<div class="grid grid-cols-3">
|
||||
<div class="text-center py-3 border-r border-white/10">
|
||||
@@ -113,275 +81,202 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- 消费习惯 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
||||
<h2 class="st green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">🌙 常来夜场</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎱 偏爱中式</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-full border border-orange-100">💰 高客单价</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-pink-50 to-rose-50 text-error text-xs rounded-full border border-pink-100">🍷 爱点酒水</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
偏好晚间 21:00 后到店，喜欢中式台球和斯诺克。平均消费 350 元/次，月均到店 4-5 次。经常点套餐和饮品，倾向于包厢消费。近 60 天到店 8 次，消费金额 2,800 元。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 消费记录 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title orange text-sm font-semibold text-gray-13 mb-4">消费记录</h2>
|
||||
<div class="space-y-4">
|
||||
|
||||
<!-- Record 1: 台桌详情 - 有食品酒水，2位助教 -->
|
||||
<div class="rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2.5 flex items-center justify-between border-b border-blue-100/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 bg-primary rounded-full"></span>
|
||||
<span class="text-xs font-semibold text-primary">台桌详情</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-6">2026-02-05</span>
|
||||
</div>
|
||||
<!-- 时间轴 -->
|
||||
<div class="px-4 py-3.5 border-b border-gray-100">
|
||||
<div class="flex items-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-primary ring-4 ring-primary/10"></div>
|
||||
<span class="text-[10px] text-gray-5 mt-1">开台</span>
|
||||
<span class="text-sm font-bold text-gray-13">21:30</span>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center mx-2 -mt-4">
|
||||
<div class="h-0.5 bg-gradient-to-r from-primary/40 to-primary/20 flex-1"></div>
|
||||
<div class="px-3 py-1 bg-primary/10 rounded-full mx-1">
|
||||
<span class="text-[11px] font-semibold text-primary">3h 20min</span>
|
||||
</div>
|
||||
<div class="h-0.5 bg-gradient-to-r from-primary/20 to-primary/40 flex-1"></div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-400 ring-4 ring-gray-200"></div>
|
||||
<span class="text-[10px] text-gray-5 mt-1">结束</span>
|
||||
<span class="text-sm font-bold text-gray-13">00:50</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 助教 & 明细 -->
|
||||
<div class="px-4 py-3 space-y-3">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-1.5 mb-1">
|
||||
<span class="text-sm font-medium text-gray-13">小燕</span>
|
||||
<span class="px-1.5 py-0.5 bg-pink-50 text-pink-600 text-[10px] rounded font-medium">高级</span>
|
||||
<span class="px-1.5 py-0.5 bg-blue-50 text-primary text-[10px] rounded font-medium">基础课</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-6">服务 2.5h</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start justify-between border-t border-dashed border-gray-100 pt-3">
|
||||
<div>
|
||||
<div class="flex items-center gap-1.5 mb-1">
|
||||
<span class="text-sm font-medium text-gray-13">Amy</span>
|
||||
<span class="px-1.5 py-0.5 bg-green-50 text-green-600 text-[10px] rounded font-medium">初级</span>
|
||||
<span class="px-1.5 py-0.5 bg-orange-50 text-warning text-[10px] rounded font-medium">激励课</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-gray-6">服务 0.5h</span>
|
||||
<span class="text-xs text-orange-500 font-medium">定档绩效：1小时</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between border-t border-gray-100 pt-3">
|
||||
<span class="text-xs text-gray-6">🍷 食品酒水</span>
|
||||
<span class="text-sm font-medium text-warning">¥260</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between border-t border-gray-200 pt-3">
|
||||
<span class="text-xs font-semibold text-gray-9">总金额</span>
|
||||
<span class="text-base font-bold text-error">¥640</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Record 2: 台桌详情 - 无食品酒水，有定档绩效 -->
|
||||
<div class="rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2.5 flex items-center justify-between border-b border-blue-100/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 bg-primary rounded-full"></span>
|
||||
<span class="text-xs font-semibold text-primary">台桌详情</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-6">2026-02-01</span>
|
||||
</div>
|
||||
<div class="px-4 py-3.5 border-b border-gray-100">
|
||||
<div class="flex items-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-primary ring-4 ring-primary/10"></div>
|
||||
<span class="text-[10px] text-gray-5 mt-1">开台</span>
|
||||
<span class="text-sm font-bold text-gray-13">14:00</span>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center mx-2 -mt-4">
|
||||
<div class="h-0.5 bg-gradient-to-r from-primary/40 to-primary/20 flex-1"></div>
|
||||
<div class="px-3 py-1 bg-primary/10 rounded-full mx-1">
|
||||
<span class="text-[11px] font-semibold text-primary">2h 00min</span>
|
||||
</div>
|
||||
<div class="h-0.5 bg-gradient-to-r from-primary/20 to-primary/40 flex-1"></div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-400 ring-4 ring-gray-200"></div>
|
||||
<span class="text-[10px] text-gray-5 mt-1">结束</span>
|
||||
<span class="text-sm font-bold text-gray-13">16:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 space-y-3">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-1.5 mb-1">
|
||||
<span class="text-sm font-medium text-gray-13">泡芙</span>
|
||||
<span class="px-1.5 py-0.5 bg-purple-50 text-purple-600 text-[10px] rounded font-medium">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-orange-50 text-warning text-[10px] rounded font-medium">激励课</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-gray-6">服务 1.5h</span>
|
||||
<span class="text-xs text-orange-500 font-medium">定档绩效：2小时</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between border-t border-gray-200 pt-3">
|
||||
<span class="text-xs font-semibold text-gray-9">总金额</span>
|
||||
<span class="text-base font-bold text-error">¥220</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Record 3: 商城订单 - 有食品酒水 -->
|
||||
<div class="rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-emerald-50 to-green-50 px-4 py-2.5 flex items-center justify-between border-b border-green-100/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 bg-success rounded-full"></span>
|
||||
<span class="text-xs font-semibold text-success">商城订单</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-6">2026-01-28</span>
|
||||
</div>
|
||||
<div class="px-4 py-3 space-y-3">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-1.5 mb-1">
|
||||
<span class="text-sm font-medium text-gray-13">小燕</span>
|
||||
<span class="px-1.5 py-0.5 bg-pink-50 text-pink-600 text-[10px] rounded font-medium">高级</span>
|
||||
<span class="px-1.5 py-0.5 bg-blue-50 text-primary text-[10px] rounded font-medium">基础课</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-6">服务 1h</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between border-t border-gray-100 pt-3">
|
||||
<span class="text-xs text-gray-6">🍷 食品酒水</span>
|
||||
<span class="text-sm font-medium text-warning">¥180</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">偏好晚间 21:00 后到店，喜欢中式台球和斯诺克。平均消费 350 元/次，月均到店 4-5 次。近 60 天到店 8 次，消费金额 2,800 元。</p>
|
||||
</div>
|
||||
|
||||
<!-- 最喜欢的助教 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title pink text-sm font-semibold text-gray-13 mb-4">最喜欢的助教</h2>
|
||||
<h2 class="st pink text-sm font-semibold text-gray-13 mb-4">最喜欢的助教</h2>
|
||||
<div class="space-y-3">
|
||||
<!-- 小燕 -->
|
||||
<div class="p-4 bg-gradient-to-br from-pink-50/80 to-rose-50/60 rounded-xl border border-pink-100/60">
|
||||
<div class="flex items-center justify-between mb-2.5">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="text-lg">❤️</span>
|
||||
<span class="text-sm font-semibold text-gray-13">小燕</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[10px] text-gray-5">关系指数</span>
|
||||
<span class="text-lg font-bold text-success">0.92</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5"><span class="text-lg">❤️</span><span class="text-sm font-semibold text-gray-13">小燕</span></div>
|
||||
<div class="flex items-center gap-1.5"><span class="text-[10px] text-gray-7">关系指数</span><span class="text-lg font-bold text-success">0.92</span></div>
|
||||
</div>
|
||||
<p class="text-[10px] text-gray-5 mb-1.5 pl-0.5">近60天</p>
|
||||
<p class="text-[10px] text-gray-7 mb-1.5 pl-0.5">近60天</p>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">基础</p>
|
||||
<p class="text-sm font-bold text-primary">12h</p>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">激励</p>
|
||||
<p class="text-sm font-bold text-warning">5h</p>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">上课</p>
|
||||
<p class="text-sm font-bold text-gray-13">18次</p>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">充值</p>
|
||||
<p class="text-sm font-bold text-success">¥5,000</p>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-[10px] text-gray-7 mb-0.5">基础</p><p class="text-sm font-bold text-primary">12h</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-[10px] text-gray-7 mb-0.5">激励</p><p class="text-sm font-bold text-warning">5h</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-[10px] text-gray-7 mb-0.5">上课</p><p class="text-sm font-bold text-gray-13">18次</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-[10px] text-gray-7 mb-0.5">充值</p><p class="text-sm font-bold text-success">¥5,000</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 泡芙 -->
|
||||
<div class="p-4 bg-gradient-to-br from-amber-50/80 to-yellow-50/60 rounded-xl border border-amber-100/60">
|
||||
<div class="flex items-center justify-between mb-2.5">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="text-lg">💛</span>
|
||||
<span class="text-sm font-semibold text-gray-13">泡芙</span>
|
||||
<div class="flex items-center gap-2.5"><span class="text-lg">💛</span><span class="text-sm font-semibold text-gray-13">泡芙</span></div>
|
||||
<div class="flex items-center gap-1.5"><span class="text-[10px] text-gray-7">关系指数</span><span class="text-lg font-bold text-warning">0.78</span></div>
|
||||
</div>
|
||||
<p class="text-[10px] text-gray-7 mb-1.5 pl-0.5">近60天</p>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-[10px] text-gray-7 mb-0.5">基础</p><p class="text-sm font-bold text-primary">8h</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-[10px] text-gray-7 mb-0.5">激励</p><p class="text-sm font-bold text-warning">3h</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-[10px] text-gray-7 mb-0.5">上课</p><p class="text-sm font-bold text-gray-13">12次</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-[10px] text-gray-7 mb-0.5">充值</p><p class="text-sm font-bold text-success">¥3,000</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消费记录（放在最下方） -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="st orange text-sm font-semibold text-gray-13 mb-4">消费记录</h2>
|
||||
<div class="space-y-4">
|
||||
|
||||
<!-- 台桌详情 Record 1：有团购折扣，2位助教，有食品酒水 -->
|
||||
<div class="rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2 flex items-center justify-between border-b border-blue-100/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 bg-primary rounded-full"></span>
|
||||
<span class="text-xs font-semibold text-primary">A12号台</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[10px] text-gray-5">关系指数</span>
|
||||
<span class="text-lg font-bold text-warning">0.78</span>
|
||||
<span class="text-xs text-gray-8">2026-02-05</span>
|
||||
</div>
|
||||
<!-- 时间信息：紧凑一行 -->
|
||||
<div class="px-4 py-2.5 border-b border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 text-sm">
|
||||
<span class="text-gray-13 font-medium pv">21:30</span>
|
||||
<span class="text-gray-7">→</span>
|
||||
<span class="text-gray-13 font-medium pv">00:50</span>
|
||||
<span class="px-2 py-0.5 bg-primary/10 text-primary text-[10px] rounded-full font-medium">3h20min</span>
|
||||
</div>
|
||||
<!-- 台费（有团购折扣） -->
|
||||
<div class="text-right flex-shrink-0">
|
||||
<span class="text-sm font-bold text-gray-13 pv">¥180</span>
|
||||
<span class="orig-price ml-1">¥240</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-[10px] text-gray-5 mb-1.5 pl-0.5">近60天</p>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">基础</p>
|
||||
<p class="text-sm font-bold text-primary">8h</p>
|
||||
<!-- 助教列表：一行2个卡片 -->
|
||||
<div class="px-4 py-3">
|
||||
<div class="grid grid-cols-2 gap-2 mb-3">
|
||||
<!-- 助教卡片1：小燕 -->
|
||||
<div class="bg-gray-50 rounded-lg p-2.5">
|
||||
<div class="flex items-center gap-1 mb-0.5">
|
||||
<span class="text-xs font-medium text-gray-13">小燕</span>
|
||||
<span class="px-1 py-px bg-pink-50 text-pink-600 text-[9px] rounded">高级</span>
|
||||
</div>
|
||||
<div class="text-[10px] text-gray-8">基础课 · 2.5h</div>
|
||||
<div class="text-right mt-0.5">
|
||||
<span class="text-xs font-bold text-gray-13 pv">¥200</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 助教卡片2：Amy -->
|
||||
<div class="bg-gray-50 rounded-lg p-2.5">
|
||||
<div class="flex items-center gap-1 mb-0.5">
|
||||
<span class="text-xs font-medium text-gray-13">Amy</span>
|
||||
<span class="px-1 py-px bg-green-50 text-green-600 text-[9px] rounded">初级</span>
|
||||
</div>
|
||||
<div class="text-[10px] text-gray-8">激励课 · 0.5h</div>
|
||||
<div class="flex items-center justify-between mt-0.5">
|
||||
<span class="text-[10px] text-orange-500">定档绩效：1h</span>
|
||||
<span class="text-xs font-bold text-gray-13 pv">¥50</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">激励</p>
|
||||
<p class="text-sm font-bold text-warning">3h</p>
|
||||
<!-- 食品酒水 -->
|
||||
<div class="flex items-center justify-between py-2 border-t border-gray-100">
|
||||
<span class="text-xs text-gray-8">🍷 食品酒水</span>
|
||||
<div class="text-right">
|
||||
<span class="text-sm font-medium text-warning pv">¥210</span>
|
||||
<span class="orig-price ml-1">¥260</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">上课</p>
|
||||
<p class="text-sm font-bold text-gray-13">12次</p>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">充值</p>
|
||||
<p class="text-sm font-bold text-success">¥3,000</p>
|
||||
<!-- 总金额 -->
|
||||
<div class="flex items-center justify-between pt-2 border-t border-gray-200">
|
||||
<span class="text-xs font-semibold text-gray-9">总金额</span>
|
||||
<div class="text-right">
|
||||
<span class="text-base font-bold text-error pv">¥640</span>
|
||||
<span class="orig-price ml-1">¥750</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Amy -->
|
||||
<div class="p-4 bg-gradient-to-br from-slate-50/80 to-gray-50/60 rounded-xl border border-gray-200/60">
|
||||
<div class="flex items-center justify-between mb-2.5">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="text-lg">💛</span>
|
||||
<span class="text-sm font-semibold text-gray-13">Amy</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[10px] text-gray-5">关系指数</span>
|
||||
<span class="text-lg font-bold text-gray-7">0.65</span>
|
||||
|
||||
<!-- 台桌详情 Record 2：无食品酒水，有定档绩效，无折扣 -->
|
||||
<div class="rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2 flex items-center justify-between border-b border-blue-100/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 bg-primary rounded-full"></span>
|
||||
<span class="text-xs font-semibold text-primary">888号台</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-8">2026-02-01</span>
|
||||
</div>
|
||||
<p class="text-[10px] text-gray-5 mb-1.5 pl-0.5">近60天</p>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">基础</p>
|
||||
<p class="text-sm font-bold text-primary">5h</p>
|
||||
<div class="px-4 py-2.5 border-b border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 text-sm">
|
||||
<span class="text-gray-13 font-medium pv">14:00</span>
|
||||
<span class="text-gray-7">→</span>
|
||||
<span class="text-gray-13 font-medium pv">16:00</span>
|
||||
<span class="px-2 py-0.5 bg-primary/10 text-primary text-[10px] rounded-full font-medium">2h00min</span>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">激励</p>
|
||||
<p class="text-sm font-bold text-warning">2h</p>
|
||||
<span class="text-sm font-bold text-gray-13 pv">¥120</span>
|
||||
</div>
|
||||
<div class="px-4 py-3">
|
||||
<div class="grid grid-cols-2 gap-2 mb-3">
|
||||
<div class="bg-gray-50 rounded-lg p-2.5">
|
||||
<div class="flex items-center gap-1 mb-0.5">
|
||||
<span class="text-xs font-medium text-gray-13">泡芙</span>
|
||||
<span class="px-1 py-px bg-purple-50 text-purple-600 text-[9px] rounded">中级</span>
|
||||
</div>
|
||||
<div class="text-[10px] text-gray-8">激励课 · 1.5h</div>
|
||||
<div class="flex items-center justify-between mt-0.5">
|
||||
<span class="text-[10px] text-orange-500">定档绩效：2h</span>
|
||||
<span class="text-xs font-bold text-gray-13 pv">¥100</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">上课</p>
|
||||
<p class="text-sm font-bold text-gray-13">8次</p>
|
||||
</div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center">
|
||||
<p class="text-[10px] text-gray-5 mb-0.5">充值</p>
|
||||
<p class="text-sm font-bold text-success">¥2,000</p>
|
||||
<!-- 总金额（无食品酒水，不展示该行） -->
|
||||
<div class="flex items-center justify-between pt-2 border-t border-gray-200">
|
||||
<span class="text-xs font-semibold text-gray-9">总金额</span>
|
||||
<span class="text-base font-bold text-error pv">¥220</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商城订单 Record 3：有食品酒水 -->
|
||||
<div class="rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-emerald-50 to-green-50 px-4 py-2 flex items-center justify-between border-b border-green-100/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 bg-success rounded-full"></span>
|
||||
<span class="text-xs font-semibold text-success">商城订单</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-8">2026-01-28</span>
|
||||
</div>
|
||||
<div class="px-4 py-3 space-y-2.5">
|
||||
<!-- 助教卡片列表：同台桌详情风格 -->
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="bg-gray-50 rounded-lg p-2.5">
|
||||
<div class="flex items-center gap-1 mb-0.5">
|
||||
<span class="text-xs font-medium text-gray-13">小燕</span>
|
||||
<span class="px-1 py-px bg-pink-50 text-pink-600 text-[9px] rounded">高级</span>
|
||||
</div>
|
||||
<div class="text-[10px] text-gray-8">基础课 · 1h</div>
|
||||
<div class="text-right mt-0.5">
|
||||
<span class="text-xs font-bold text-gray-13 pv">¥100</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 食品酒水 -->
|
||||
<div class="flex items-center justify-between pt-2 border-t border-gray-100">
|
||||
<span class="text-xs text-gray-8">🍷 食品酒水</span>
|
||||
<span class="text-sm font-medium text-warning pv">¥180</span>
|
||||
</div>
|
||||
<!-- 总金额 -->
|
||||
<div class="flex items-center justify-between pt-2 border-t border-gray-200">
|
||||
<span class="text-xs font-semibold text-gray-9">总金额</span>
|
||||
<span class="text-base font-bold text-error pv">¥280</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -389,47 +284,13 @@
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center gap-3 px-4">
|
||||
<button onclick="window.location.href='chat.html'" class="flex-1 h-11 bg-gradient-to-r from-primary to-blue-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-primary/30">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>
|
||||
问问助手
|
||||
</button>
|
||||
<button onclick="showNoteModal()" class="flex-1 h-11 bg-gray-100 text-gray-13 font-medium rounded-xl flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
<button class="flex-1 h-11 bg-gray-100 text-gray-13 font-medium rounded-xl flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
||||
备注
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 备注弹窗 -->
|
||||
<div id="noteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-end">
|
||||
<div class="w-full bg-white rounded-t-3xl p-5 pb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||
<button onclick="hideNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<textarea class="w-full h-32 p-4 bg-gray-50 rounded-xl resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||
<button class="w-full h-12 bg-gradient-to-r from-primary to-blue-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-primary/30">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showNoteModal() {
|
||||
document.getElementById('noteModal').classList.remove('hidden');
|
||||
document.getElementById('noteModal').classList.add('flex');
|
||||
}
|
||||
|
||||
function hideNoteModal() {
|
||||
document.getElementById('noteModal').classList.add('hidden');
|
||||
document.getElementById('noteModal').classList.remove('flex');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>备注记录 - 球房运营助手</title>
|
||||
<title>客户备注 - 球房运营助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
@@ -55,7 +55,7 @@
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center text-base font-medium text-gray-13">备注记录</h1>
|
||||
<h1 class="flex-1 text-center text-base font-medium text-gray-13">客户备注</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
完成高优先召回任务。客户反馈最近工作太忙，这周末会来店里。已提醒客户储值卡还有2000元余额，下月到期需要续费。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="px-2.5 py-1 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-lg border border-orange-100">任务：高优先召回</span>
|
||||
<span class="px-2.5 py-1 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-lg border border-blue-100">客户：王先生</span>
|
||||
<span class="text-xs text-gray-6">2024-11-26 18:45</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,7 +89,7 @@
|
||||
泡芙本月表现优秀，课时完成率达到120%，客户评价全部5星。建议下月提升课时费标准。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="px-2.5 py-1 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-lg border border-green-100">助教：泡芙</span>
|
||||
<span class="px-2.5 py-1 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-lg border border-blue-100">客户：陈女士</span>
|
||||
<span class="text-xs text-gray-6">2024-11-25 10:20</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,7 +111,7 @@
|
||||
关系构建任务完成。与客户进行了30分钟的深入交流，了解到客户是企业高管，经常需要商务宴请场地。已记录客户需求，后续可以推荐团建套餐。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="px-2.5 py-1 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-lg border border-orange-100">任务：关系构建</span>
|
||||
<span class="px-2.5 py-1 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-lg border border-blue-100">客户：张先生</span>
|
||||
<span class="text-xs text-gray-6">2024-11-23 19:30</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -133,7 +133,7 @@
|
||||
Amy最近工作状态很好，主动承担了培训新员工的任务。但需要注意她最近加班较多，避免过度疲劳。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="px-2.5 py-1 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-lg border border-green-100">助教：Amy</span>
|
||||
<span class="px-2.5 py-1 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-lg border border-blue-100">客户：李女士</span>
|
||||
<span class="text-xs text-gray-6">2024-11-21 09:45</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -58,18 +58,23 @@
|
||||
gap: 8px;
|
||||
padding: 14px 16px 4px;
|
||||
}
|
||||
.date-divider::after {
|
||||
content: '';
|
||||
.date-divider .dd-line {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: #dcdcdc;
|
||||
}
|
||||
.date-divider span {
|
||||
.date-divider .dd-date {
|
||||
font-size: 11px;
|
||||
color: #8b8b8b;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.date-divider .dd-stats {
|
||||
font-size: 11px;
|
||||
color: #a6a6a6;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen pb-8">
|
||||
@@ -107,20 +112,23 @@
|
||||
|
||||
<!-- 统计概览 -->
|
||||
<div class="px-4 py-3 bg-white border-b border-gray-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="text-center flex-1">
|
||||
<p class="text-[10px] text-gray-6 mb-0.5">总记录</p>
|
||||
<p class="text-lg font-bold text-gray-13 perf-value" id="totalCount">32笔</p>
|
||||
</div>
|
||||
<div class="w-px h-8 bg-gray-2"></div>
|
||||
<div class="w-px h-10 bg-gray-2 mt-0.5"></div>
|
||||
<div class="text-center flex-1">
|
||||
<p class="text-[10px] text-gray-6 mb-0.5">总业绩时长</p>
|
||||
<p class="text-lg font-bold text-primary perf-value" id="totalMinutes">59.0h</p>
|
||||
<p class="text-[10px] text-gray-5">折算前 60.5h</p>
|
||||
<p class="text-[10px] text-warning">预估</p>
|
||||
</div>
|
||||
<div class="w-px h-8 bg-gray-2"></div>
|
||||
<div class="w-px h-10 bg-gray-2 mt-0.5"></div>
|
||||
<div class="text-center flex-1">
|
||||
<p class="text-[10px] text-gray-6 mb-0.5">折算扣减</p>
|
||||
<p class="text-lg font-bold text-error perf-value" id="totalPenalty">-1.5h</p>
|
||||
<p class="text-[10px] text-gray-6 mb-0.5">收入</p>
|
||||
<p class="text-lg font-bold text-success perf-value" id="totalIncome">¥4,720</p>
|
||||
<p class="text-[10px] text-warning">预估</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -129,7 +137,7 @@
|
||||
<div class="p-4">
|
||||
<div id="recordsList" class="bg-white rounded-2xl shadow-sm overflow-hidden">
|
||||
<!-- 2月7日 -->
|
||||
<div class="date-divider"><span>2月7日</span></div>
|
||||
<div class="date-divider"><span class="dd-date">2月7日</span><div class="dd-line"></div><span class="dd-stats">时长 6.0h · 预估收入 ¥510</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">王</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
@@ -194,7 +202,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 2月6日 -->
|
||||
<div class="date-divider"><span>2月6日</span></div>
|
||||
<div class="date-divider"><span class="dd-date">2月6日</span><div class="dd-line"></div><span class="dd-stats">时长 3.5h · 预估收入 ¥280</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-green-400 to-teal-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">张</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
@@ -238,7 +246,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 2月5日 -->
|
||||
<div class="date-divider"><span>2月5日</span></div>
|
||||
<div class="date-divider"><span class="dd-date">2月5日</span><div class="dd-line"></div><span class="dd-stats">时长 4.0h · 预估收入 ¥320</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-teal-400 to-emerald-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">陈</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
@@ -282,7 +290,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 2月4日 -->
|
||||
<div class="date-divider"><span>2月4日</span></div>
|
||||
<div class="date-divider"><span class="dd-date">2月4日</span><div class="dd-line"></div><span class="dd-stats">时长 4.0h · 预估收入 ¥350</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-violet-400 to-purple-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">孙</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
@@ -326,7 +334,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 2月3日 -->
|
||||
<div class="date-divider"><span>2月3日</span></div>
|
||||
<div class="date-divider"><span class="dd-date">2月3日</span><div class="dd-line"></div><span class="dd-stats">时长 3.5h · 预估收入 ¥280</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-amber-400 to-yellow-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">郑</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
@@ -370,7 +378,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 2月2日 -->
|
||||
<div class="date-divider"><span>2月2日</span></div>
|
||||
<div class="date-divider"><span class="dd-date">2月2日</span><div class="dd-line"></div><span class="dd-stats">时长 4.0h · 预估收入 ¥350</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-fuchsia-400 to-pink-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">林</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
@@ -414,7 +422,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 2月1日 -->
|
||||
<div class="date-divider"><span>2月1日</span></div>
|
||||
<div class="date-divider"><span class="dd-date">2月1日</span><div class="dd-line"></div><span class="dd-stats">时长 6.0h · 预估收入 ¥510</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">王</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
@@ -542,7 +550,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 1月31日 -->
|
||||
<div class="date-divider"><span>1月31日</span></div>
|
||||
<div class="date-divider"><span class="dd-date">1月31日</span><div class="dd-line"></div><span class="dd-stats">时长 5.5h · 收入 ¥470</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-cyan-400 to-sky-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">韩</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
@@ -607,7 +615,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 1月30日 -->
|
||||
<div class="date-divider"><span>1月30日</span></div>
|
||||
<div class="date-divider"><span class="dd-date">1月30日</span><div class="dd-line"></div><span class="dd-stats">时长 3.5h · 收入 ¥280</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-green-400 to-teal-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">张</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
@@ -651,7 +659,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 1月29日 -->
|
||||
<div class="date-divider"><span>1月29日</span></div>
|
||||
<div class="date-divider"><span class="dd-date">1月29日</span><div class="dd-line"></div><span class="dd-stats">时长 4.0h · 收入 ¥320</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-teal-400 to-emerald-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">陈</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
@@ -695,7 +703,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 1月28日 -->
|
||||
<div class="date-divider"><span>1月28日</span></div>
|
||||
<div class="date-divider"><span class="dd-date">1月28日</span><div class="dd-line"></div><span class="dd-stats">时长 4.0h · 收入 ¥350</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">赵</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
@@ -739,7 +747,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 1月27日 -->
|
||||
<div class="date-divider"><span>1月27日</span></div>
|
||||
<div class="date-divider"><span class="dd-date">1月27日</span><div class="dd-line"></div><span class="dd-stats">时长 4.0h · 收入 ¥350</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-violet-400 to-purple-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">孙</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user