2022 lines
138 KiB
HTML
2022 lines
138 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<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">
|
||
<link href="../css/banner.css" rel="stylesheet">
|
||
<script>
|
||
tailwind.config = {
|
||
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',
|
||
'gray-13': '#242424',
|
||
},
|
||
fontFamily: {
|
||
sans: ['Noto Sans SC', 'sans-serif'],
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
body {
|
||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
}
|
||
/* 优化banner内元素对比度 */
|
||
.banner-bg .stat-value {
|
||
color: #ffffff;
|
||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||
}
|
||
.banner-bg .stat-highlight {
|
||
color: #a7f3d0;
|
||
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
|
||
}
|
||
.banner-bg .stat-label {
|
||
color: rgba(255,255,255,0.85);
|
||
}
|
||
.banner-bg .info-card {
|
||
background: rgba(255,255,255,0.2);
|
||
border: 1px solid rgba(255,255,255,0.15);
|
||
}
|
||
/* 收入情况卡片 */
|
||
.income-tier {
|
||
position: relative;
|
||
padding: 12px;
|
||
border-radius: 12px;
|
||
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
|
||
border: 1px solid #86efac;
|
||
}
|
||
.income-tier.next {
|
||
background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
|
||
border: 1px solid #fde047;
|
||
}
|
||
.tier-badge {
|
||
position: absolute;
|
||
top: -8px;
|
||
right: 12px;
|
||
padding: 2px 10px;
|
||
border-radius: 10px;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
}
|
||
.tier-badge.current {
|
||
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
|
||
color: white;
|
||
}
|
||
.tier-badge.next {
|
||
background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
|
||
color: white;
|
||
}
|
||
/* 奖励闪烁效果 */
|
||
.bonus-highlight {
|
||
animation: pulse-glow 2s ease-in-out infinite;
|
||
}
|
||
@keyframes pulse-glow {
|
||
0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
|
||
50% { box-shadow: 0 0 20px 4px rgba(245, 158, 11, 0.6); }
|
||
}
|
||
/* 客户列表项 */
|
||
.customer-item {
|
||
transition: all 0.2s ease;
|
||
}
|
||
.customer-item:active {
|
||
background: #f3f4f6;
|
||
}
|
||
/* 业绩数值 */
|
||
.perf-value {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.date-divider {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 14px 16px 4px;
|
||
}
|
||
.date-divider::after {
|
||
content: '';
|
||
flex: 1;
|
||
height: 1px;
|
||
background: #dcdcdc;
|
||
}
|
||
.date-divider span {
|
||
font-size: 11px;
|
||
color: #8b8b8b;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-1 min-h-screen pb-8">
|
||
<!-- Tailwind 动态类预加载 -->
|
||
<div class="hidden">
|
||
<span class="rounded-lg from-blue-400 to-indigo-500 from-pink-400 to-rose-500 from-teal-400 to-emerald-500 from-green-400 to-teal-500 from-orange-400 to-amber-500 from-purple-400 to-violet-500 from-violet-400 to-purple-500 from-teal-300 to-emerald-400 from-amber-400 to-yellow-500 from-sky-400 to-blue-500 from-fuchsia-400 to-pink-500 from-rose-400 to-red-500 from-lime-400 to-green-500 from-slate-400 to-gray-500 from-indigo-300 to-violet-400 from-pink-300 to-rose-400 from-emerald-300 to-teal-400 from-cyan-400 to-sky-500 from-orange-300 to-red-400 from-yellow-400 to-orange-500 from-blue-300 to-purple-400 from-gray-300 to-gray-400"></span>
|
||
</div>
|
||
|
||
<!-- 通栏 Banner -->
|
||
<div class="banner-bg theme-blue-light 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>
|
||
</button>
|
||
<h1 class="flex-1 text-center text-base font-medium">业绩详情</h1>
|
||
</div>
|
||
|
||
<!-- 个人信息 -->
|
||
<div class="px-5 pt-2 pb-2">
|
||
<div class="flex items-center gap-4 mb-5">
|
||
<div class="w-14 h-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg overflow-hidden">
|
||
<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-1">
|
||
<span class="text-xl font-semibold">小燕</span>
|
||
<span class="px-2 py-0.5 bg-white/20 rounded-full text-xs">助教</span>
|
||
</div>
|
||
<p class="text-white/70 text-sm">广州朗朗桌球</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核心数据 -->
|
||
<div class="grid grid-cols-2 gap-3 mb-4">
|
||
<div class="info-card rounded-xl p-4 backdrop-blur-sm text-center">
|
||
<p class="stat-label text-xs mb-1">本月预计收入</p>
|
||
<p class="stat-value text-2xl font-bold">¥6,206</p>
|
||
</div>
|
||
<div class="info-card rounded-xl p-4 backdrop-blur-sm text-center">
|
||
<p class="stat-label text-xs mb-1">上月收入</p>
|
||
<p class="stat-highlight text-2xl font-bold">¥16,880</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 指标内容 -->
|
||
<div class="p-4 space-y-4">
|
||
<!-- 收入情况 -->
|
||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||
<div class="flex items-center gap-2 mb-4">
|
||
<span class="w-2 h-2 rounded-full bg-primary"></span>
|
||
<h2 class="text-sm font-semibold text-gray-13">收入情况</h2>
|
||
</div>
|
||
|
||
<!-- 当前档位 -->
|
||
<div class="income-tier mb-3">
|
||
<div class="tier-badge current">当前档位</div>
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-2xl">📊</span>
|
||
<span class="text-sm font-medium text-green-700">当前档位</span>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<div class="text-center w-16">
|
||
<div class="flex items-baseline gap-1">
|
||
<span class="text-lg font-bold text-green-700">80</span>
|
||
<span class="text-xs text-green-600">元/h</span>
|
||
</div>
|
||
<p class="text-[10px] text-green-600 mt-0.5">基础课到手</p>
|
||
</div>
|
||
<div class="w-px h-8 bg-green-200"></div>
|
||
<div class="text-center w-16">
|
||
<div class="flex items-baseline gap-1">
|
||
<span class="text-lg font-bold text-green-700">95</span>
|
||
<span class="text-xs text-green-600">元/h</span>
|
||
</div>
|
||
<p class="text-[10px] text-green-600 mt-0.5">激励课到手</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 下一阶段 -->
|
||
<div class="income-tier next mb-3">
|
||
<div class="tier-badge next">下一阶段</div>
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-2xl">🎯</span>
|
||
<span class="text-sm font-medium text-yellow-700">下一阶段</span>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<div class="text-center w-16">
|
||
<div class="flex items-baseline gap-1">
|
||
<span class="text-lg font-bold text-yellow-700">90</span>
|
||
<span class="text-xs text-yellow-600">元/h</span>
|
||
</div>
|
||
<p class="text-[10px] text-yellow-600 mt-0.5">基础课到手</p>
|
||
</div>
|
||
<div class="w-px h-8 bg-yellow-200"></div>
|
||
<div class="text-center w-16">
|
||
<div class="flex items-baseline gap-1">
|
||
<span class="text-lg font-bold text-yellow-700">114</span>
|
||
<span class="text-xs text-yellow-600">元/h</span>
|
||
</div>
|
||
<p class="text-[10px] text-yellow-600 mt-0.5">激励课到手</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 升级提示 -->
|
||
<div class="flex items-center justify-between bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-3 border border-blue-100">
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-lg">⏱️</span>
|
||
<div>
|
||
<p class="text-xs text-gray-600">距离下一阶段</p>
|
||
<p class="text-sm font-semibold text-blue-700">需完成 <span class="text-base">15</span> 小时</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<div class="bonus-highlight inline-block bg-gradient-to-r from-amber-400 to-orange-400 text-white px-3 py-1.5 rounded-lg">
|
||
<p class="text-[10px] opacity-90">到达即得</p>
|
||
<p class="text-lg font-bold">800元</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 本月业绩 -->
|
||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||
<div class="flex items-center gap-2 mb-4">
|
||
<span class="w-2 h-2 rounded-full bg-success"></span>
|
||
<h2 class="text-sm font-semibold text-gray-13">本月业绩 预估</h2>
|
||
</div>
|
||
|
||
<!-- 业绩明细 -->
|
||
<div class="space-y-3">
|
||
<!-- 基础课 -->
|
||
<div class="flex items-center justify-between py-2 border-b border-gray-100">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center">
|
||
<span class="text-sm">🎱</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">基础课</p>
|
||
<p class="text-[10px] text-gray-5">80元/h × 75h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-base font-bold text-gray-13 perf-value">¥6,000</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 激励课 -->
|
||
<div class="flex items-center justify-between py-2 border-b border-gray-100">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded-lg bg-amber-100 flex items-center justify-center">
|
||
<span class="text-sm">⭐</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">激励课</p>
|
||
<p class="text-[10px] text-gray-5">95.05元/h × 10h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-base font-bold text-gray-13 perf-value">¥950.5</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 充值激励 -->
|
||
<div class="flex items-center justify-between py-2 border-b border-gray-100">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
|
||
<span class="text-sm">💰</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">充值激励</p>
|
||
<p class="text-[10px] text-gray-5">客户充值返佣</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-base font-bold text-gray-13 perf-value">¥500</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 销冠奖 -->
|
||
<div class="flex items-center justify-between py-2 border-b border-gray-100">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center">
|
||
<span class="text-sm">🏆</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">TOP3 销冠奖</p>
|
||
<p class="text-[10px] text-gray-5">全店业绩前三名奖励</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-base font-bold text-gray-5 perf-value">继续努力</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 合计 -->
|
||
<div class="flex items-center justify-between pt-2">
|
||
<span class="text-sm font-medium text-gray-7">本月合计 预估</span>
|
||
<span class="text-xl font-bold text-success perf-value">¥6,950.5</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我的服务记录明细 -->
|
||
<div class="mt-5 -mx-4 -mb-4 px-4 pt-5 pb-4 bg-gray-100/70 rounded-b-2xl">
|
||
<div class="flex items-center gap-2 mb-0.5">
|
||
<span class="text-sm">📋</span>
|
||
<span class="text-sm font-semibold text-gray-13">我的服务记录明细</span>
|
||
</div>
|
||
<div id="thisMonthRecords" class="space-y-0">
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>2月7日</span></div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">王先生</span>
|
||
<span class="text-xs text-gray-6">20:00-22:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">3号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-pink-400 to-rose-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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">李女士</span>
|
||
<span class="text-xs text-gray-6">16:00-18:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-blue-50 text-blue-700 rounded text-[11px] font-medium flex-shrink-0">包厢课</span>
|
||
<span class="text-xs text-gray-7">VIP1号房</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥190</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>2月6日</span></div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">张先生</span>
|
||
<span class="text-xs text-gray-6">19:00-21:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">5号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="thisMonthRecordsMore" class="hidden">
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-orange-400 to-amber-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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">刘先生</span>
|
||
<span class="text-xs text-gray-6">15:30-17:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-amber-600 perf-value">1.5h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-amber-50 text-amber-700 rounded text-[11px] font-medium flex-shrink-0">打赏课</span>
|
||
<span class="text-xs text-gray-7">打赏</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥120</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>2月5日</span></div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">陈女士</span>
|
||
<span class="text-xs text-gray-6">20:00-22:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">2号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">赵先生</span>
|
||
<span class="text-xs text-gray-6">14:00-16:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
<span class="text-[10px] text-gray-5 font-normal">(折前4.0h)</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">7号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>2月4日</span></div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">孙先生</span>
|
||
<span class="text-xs text-gray-6">19:00-21:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-blue-50 text-blue-700 rounded text-[11px] font-medium flex-shrink-0">包厢课</span>
|
||
<span class="text-xs text-gray-7">VIP2号房</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥190</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-teal-300 to-emerald-400 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">吴</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">吴女士</span>
|
||
<span class="text-xs text-gray-6">15:00-17:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">1号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>2月3日</span></div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">郑先生</span>
|
||
<span class="text-xs text-gray-6">20:00-22:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">4号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-sky-400 to-blue-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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">黄女士</span>
|
||
<span class="text-xs text-gray-6">14:30-16:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-amber-600 perf-value">1.5h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-amber-50 text-amber-700 rounded text-[11px] font-medium flex-shrink-0">打赏课</span>
|
||
<span class="text-xs text-gray-7">打赏</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥120</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>2月2日</span></div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">林先生</span>
|
||
<span class="text-xs text-gray-6">19:00-21:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">6号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-rose-400 to-red-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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">何女士</span>
|
||
<span class="text-xs text-gray-6">13:00-15:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-blue-50 text-blue-700 rounded text-[11px] font-medium flex-shrink-0">包厢课</span>
|
||
<span class="text-xs text-gray-7">VIP3号房</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥190</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>2月1日</span></div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">王先生</span>
|
||
<span class="text-xs text-gray-6">20:30-22:30</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">3号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-lime-400 to-green-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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">马先生</span>
|
||
<span class="text-xs text-gray-6">16:00-18:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">8号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-slate-400 to-gray-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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">罗女士</span>
|
||
<span class="text-xs text-gray-6">12:30-14:30</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
<span class="text-[10px] text-gray-5 font-normal">(折前4.0h)</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">2号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-indigo-300 to-violet-400 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">梁</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">梁先生</span>
|
||
<span class="text-xs text-gray-6">10:00-12:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">5号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-pink-300 to-rose-400 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">宋</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">宋女士</span>
|
||
<span class="text-xs text-gray-6">8:30-10:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-amber-600 perf-value">1.5h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-amber-50 text-amber-700 rounded text-[11px] font-medium flex-shrink-0">打赏课</span>
|
||
<span class="text-xs text-gray-7">打赏</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥120</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-emerald-300 to-teal-400 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">谢</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">谢先生</span>
|
||
<span class="text-xs text-gray-6">7:00-8:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">1.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">1号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥80</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月31日</span></div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">韩女士</span>
|
||
<span class="text-xs text-gray-6">21:00-23:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">4号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-orange-300 to-red-400 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">唐</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">唐先生</span>
|
||
<span class="text-xs text-gray-6">18:30-20:30</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
<span class="text-[10px] text-gray-5 font-normal">(折前4.0h)</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-blue-50 text-blue-700 rounded text-[11px] font-medium flex-shrink-0">包厢课</span>
|
||
<span class="text-xs text-gray-7">VIP2号房</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的预估收入 <span class="font-medium text-gray-9">¥190</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 展开/查看全部 -->
|
||
<div class="flex items-center justify-center gap-4 pt-2">
|
||
<button id="thisMonthRecordsToggle" onclick="toggleThisMonthRecords()" class="text-xs text-primary flex items-center gap-1">
|
||
<span id="thisMonthRecordsBtnText">展开更多</span>
|
||
<svg id="thisMonthRecordsArrow" class="w-3 h-3 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="6 9 12 15 18 9"/>
|
||
</svg>
|
||
</button>
|
||
<span class="text-gray-3">|</span>
|
||
<a href="performance-records.html" class="text-xs text-primary flex items-center gap-0.5">查看全部 <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 上月收入 -->
|
||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||
<div class="flex items-center gap-2 mb-4">
|
||
<span class="w-2 h-2 rounded-full bg-warning"></span>
|
||
<h2 class="text-sm font-semibold text-gray-13">上月收入</h2>
|
||
</div>
|
||
|
||
<!-- 业绩明细 -->
|
||
<div class="space-y-3">
|
||
<!-- 基础课 -->
|
||
<div class="flex items-center justify-between py-2 border-b border-gray-100">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center">
|
||
<span class="text-sm">🎱</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">基础课</p>
|
||
<p class="text-[10px] text-gray-5">105元/h × 175h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-base font-bold text-gray-13 perf-value">¥16,625</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 激励课 -->
|
||
<div class="flex items-center justify-between py-2 border-b border-gray-100">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded-lg bg-amber-100 flex items-center justify-center">
|
||
<span class="text-sm">⭐</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">激励课</p>
|
||
<p class="text-[10px] text-gray-5">123.5元/h × 15h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-base font-bold text-gray-13 perf-value">¥1,852.5</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 充值激励 -->
|
||
<div class="flex items-center justify-between py-2 border-b border-gray-100">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
|
||
<span class="text-sm">💰</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">充值激励</p>
|
||
<p class="text-[10px] text-gray-5">客户充值返佣</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-base font-bold text-gray-13 perf-value">¥2,500</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 销冠奖 -->
|
||
<div class="flex items-center justify-between py-2 border-b border-gray-100">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded-lg bg-orange-100 flex items-center justify-center">
|
||
<span class="text-sm">🏆</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">TOP3 销冠奖</p>
|
||
<p class="text-[10px] text-warning">全店业绩 第2名</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-base font-bold text-warning perf-value">¥600</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 合计 -->
|
||
<div class="flex items-center justify-between pt-2">
|
||
<span class="text-sm font-medium text-gray-7">上月合计</span>
|
||
<span class="text-xl font-bold text-warning perf-value">¥21,577.5</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我的服务记录明细 -->
|
||
<div class="mt-5 -mx-4 -mb-4 px-4 pt-5 pb-4 bg-gray-100/70 rounded-b-2xl">
|
||
<div class="flex items-center gap-2 mb-0.5">
|
||
<span class="text-sm">📋</span>
|
||
<span class="text-sm font-semibold text-gray-13">我的服务记录明细</span>
|
||
</div>
|
||
<div id="lastMonthRecords" class="space-y-0">
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月31日</span></div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">王先生</span>
|
||
<span class="text-xs text-gray-6">20:00-22:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">3号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-pink-400 to-rose-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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">李女士</span>
|
||
<span class="text-xs text-gray-6">16:00-18:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-blue-50 text-blue-700 rounded text-[11px] font-medium flex-shrink-0">包厢课</span>
|
||
<span class="text-xs text-gray-7">VIP1号房</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥190</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月30日</span></div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">张先生</span>
|
||
<span class="text-xs text-gray-6">19:30-21:30</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">5号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="lastMonthRecordsMore" class="hidden">
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-orange-400 to-amber-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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">刘先生</span>
|
||
<span class="text-xs text-gray-6">14:30-16:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-amber-600 perf-value">1.5h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-amber-50 text-amber-700 rounded text-[11px] font-medium flex-shrink-0">打赏课</span>
|
||
<span class="text-xs text-gray-7">打赏</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥120</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月29日</span></div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">陈女士</span>
|
||
<span class="text-xs text-gray-6">20:00-22:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">2号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月28日</span></div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">赵先生</span>
|
||
<span class="text-xs text-gray-6">19:00-21:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
<span class="text-[10px] text-gray-5 font-normal">(折前4.0h)</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">7号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月27日</span></div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">孙先生</span>
|
||
<span class="text-xs text-gray-6">20:00-22:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-blue-50 text-blue-700 rounded text-[11px] font-medium flex-shrink-0">包厢课</span>
|
||
<span class="text-xs text-gray-7">VIP2号房</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥190</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月26日</span></div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-teal-300 to-emerald-400 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">吴</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">吴女士</span>
|
||
<span class="text-xs text-gray-6">15:00-17:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">1号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月25日</span></div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">郑先生</span>
|
||
<span class="text-xs text-gray-6">20:00-22:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">4号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月24日</span></div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-sky-400 to-blue-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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">黄女士</span>
|
||
<span class="text-xs text-gray-6">15:00-16:30</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-amber-600 perf-value">1.5h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-amber-50 text-amber-700 rounded text-[11px] font-medium flex-shrink-0">打赏课</span>
|
||
<span class="text-xs text-gray-7">打赏</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥120</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月23日</span></div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">林先生</span>
|
||
<span class="text-xs text-gray-6">19:00-21:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">6号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月22日</span></div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-rose-400 to-red-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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">何女士</span>
|
||
<span class="text-xs text-gray-6">13:00-15:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-blue-50 text-blue-700 rounded text-[11px] font-medium flex-shrink-0">包厢课</span>
|
||
<span class="text-xs text-gray-7">VIP3号房</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥190</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月21日</span></div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">王先生</span>
|
||
<span class="text-xs text-gray-6">20:30-22:30</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">3号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月20日</span></div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-lime-400 to-green-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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">马先生</span>
|
||
<span class="text-xs text-gray-6">16:00-18:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">8号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月19日</span></div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-slate-400 to-gray-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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">罗女士</span>
|
||
<span class="text-xs text-gray-6">12:30-14:30</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
<span class="text-[10px] text-gray-5 font-normal">(折前4.0h)</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">2号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月18日</span></div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-indigo-300 to-violet-400 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">梁</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">梁先生</span>
|
||
<span class="text-xs text-gray-6">10:00-12:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">5号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月17日</span></div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-pink-300 to-rose-400 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">宋</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">宋女士</span>
|
||
<span class="text-xs text-gray-6">19:30-21:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-amber-600 perf-value">1.5h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-amber-50 text-amber-700 rounded text-[11px] font-medium flex-shrink-0">打赏课</span>
|
||
<span class="text-xs text-gray-7">打赏</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥120</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月16日</span></div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-emerald-300 to-teal-400 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">谢</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">谢先生</span>
|
||
<span class="text-xs text-gray-6">20:00-22:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">1号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月15日</span></div>
|
||
<div class="record-item flex items-center gap-3 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">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">韩女士</span>
|
||
<span class="text-xs text-gray-6">15:00-17:00</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-emerald-50 text-emerald-700 rounded text-[11px] font-medium flex-shrink-0">基础课</span>
|
||
<span class="text-xs text-gray-7">4号台</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥160</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="date-divider" style="padding-left:0;padding-right:0"><span>1月14日</span></div>
|
||
<div class="record-item flex items-center gap-3 py-2.5">
|
||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-orange-300 to-red-400 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">唐</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<span class="text-sm font-medium text-gray-13 flex-shrink-0">唐先生</span>
|
||
<span class="text-xs text-gray-6">18:30-20:30</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-emerald-600 perf-value">2.0h</span>
|
||
<span class="text-[10px] text-gray-5 font-normal">(折前4.0h)</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between mt-1">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="px-1.5 py-px bg-blue-50 text-blue-700 rounded text-[11px] font-medium flex-shrink-0">包厢课</span>
|
||
<span class="text-xs text-gray-7">VIP2号房</span>
|
||
</div>
|
||
<span class="text-[11px] text-gray-5 flex-shrink-0">我的收入 <span class="font-medium text-gray-9">¥190</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 展开/查看全部 -->
|
||
<div class="flex items-center justify-center gap-4 pt-2">
|
||
<button id="lastMonthRecordsToggle" onclick="toggleLastMonthRecords()" class="text-xs text-primary flex items-center gap-1">
|
||
<span id="lastMonthRecordsBtnText">展开更多</span>
|
||
<svg id="lastMonthRecordsArrow" class="w-3 h-3 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="6 9 12 15 18 9"/>
|
||
</svg>
|
||
</button>
|
||
<span class="text-gray-3">|</span>
|
||
<a href="performance-records.html" class="text-xs text-primary flex items-center gap-0.5">查看全部 <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我的新客 -->
|
||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-cyan-500"></span>
|
||
<h2 class="text-sm font-semibold text-gray-13">我的新客</h2>
|
||
</div>
|
||
<span class="text-xs text-gray-5">按时间顺序</span>
|
||
</div>
|
||
|
||
<!-- 新客列表 -->
|
||
<div id="newCustomerList" class="space-y-1">
|
||
<!-- 新客1 -->
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-violet-300 to-purple-400 flex items-center justify-center text-white text-sm">孙</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">孙先生</p>
|
||
<p class="text-[10px] text-gray-5">1月24日首次 · 已消费2次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-cyan-100 text-cyan-700 text-[10px] rounded-full">新</span>
|
||
</div>
|
||
|
||
<!-- 新客2 -->
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-teal-300 to-emerald-400 flex items-center justify-center text-white text-sm">吴</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">吴女士</p>
|
||
<p class="text-[10px] text-gray-5">1月22日首次 · 已消费3次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-cyan-100 text-cyan-700 text-[10px] rounded-full">新</span>
|
||
</div>
|
||
|
||
<!-- 新客3 -->
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-amber-300 to-yellow-400 flex items-center justify-center text-white text-sm">郑</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">郑先生</p>
|
||
<p class="text-[10px] text-gray-5">1月20日首次 · 已消费1次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-cyan-100 text-cyan-700 text-[10px] rounded-full">新</span>
|
||
</div>
|
||
|
||
<!-- 新客4 -->
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-rose-300 to-red-400 flex items-center justify-center text-white text-sm">黄</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">黄女士</p>
|
||
<p class="text-[10px] text-gray-5">1月18日首次 · 已消费4次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-emerald-100 text-emerald-700 text-[10px] rounded-full">活跃</span>
|
||
</div>
|
||
|
||
<!-- 新客5 -->
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-sky-300 to-blue-400 flex items-center justify-center text-white text-sm">林</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">林先生</p>
|
||
<p class="text-[10px] text-gray-5">1月15日首次 · 已消费2次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-cyan-100 text-cyan-700 text-[10px] rounded-full">新</span>
|
||
</div>
|
||
|
||
<!-- 新客6 -->
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-fuchsia-300 to-pink-400 flex items-center justify-center text-white text-sm">何</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">何女士</p>
|
||
<p class="text-[10px] text-gray-5">1月12日首次 · 已消费5次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-emerald-100 text-emerald-700 text-[10px] rounded-full">活跃</span>
|
||
</div>
|
||
|
||
<!-- 更多新客（默认隐藏） -->
|
||
<div id="newCustomerMore" class="hidden space-y-1">
|
||
<!-- 新客7-20 -->
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-lime-300 to-green-400 flex items-center justify-center text-white text-sm">马</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">马先生</p>
|
||
<p class="text-[10px] text-gray-5">1月10日首次 · 已消费3次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-cyan-100 text-cyan-700 text-[10px] rounded-full">新</span>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-orange-300 to-amber-400 flex items-center justify-center text-white text-sm">罗</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">罗女士</p>
|
||
<p class="text-[10px] text-gray-5">1月8日首次 · 已消费1次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-gray-100 text-gray-500 text-[10px] rounded-full">待跟进</span>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-slate-300 to-gray-400 flex items-center justify-center text-white text-sm">梁</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">梁先生</p>
|
||
<p class="text-[10px] text-gray-5">1月5日首次 · 已消费2次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-cyan-100 text-cyan-700 text-[10px] rounded-full">新</span>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-indigo-300 to-violet-400 flex items-center justify-center text-white text-sm">宋</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">宋女士</p>
|
||
<p class="text-[10px] text-gray-5">1月3日首次 · 已消费6次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-emerald-100 text-emerald-700 text-[10px] rounded-full">活跃</span>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-pink-300 to-rose-400 flex items-center justify-center text-white text-sm">谢</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">谢先生</p>
|
||
<p class="text-[10px] text-gray-5">12月28日首次 · 已消费2次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-cyan-100 text-cyan-700 text-[10px] rounded-full">新</span>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-emerald-300 to-teal-400 flex items-center justify-center text-white text-sm">韩</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">韩女士</p>
|
||
<p class="text-[10px] text-gray-5">12月25日首次 · 已消费4次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-emerald-100 text-emerald-700 text-[10px] rounded-full">活跃</span>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-blue-300 to-indigo-400 flex items-center justify-center text-white text-sm">唐</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">唐先生</p>
|
||
<p class="text-[10px] text-gray-5">12月22日首次 · 已消费1次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-gray-100 text-gray-500 text-[10px] rounded-full">待跟进</span>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-yellow-300 to-orange-400 flex items-center justify-center text-white text-sm">冯</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">冯女士</p>
|
||
<p class="text-[10px] text-gray-5">12月20日首次 · 已消费3次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-cyan-100 text-cyan-700 text-[10px] rounded-full">新</span>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-purple-300 to-violet-400 flex items-center justify-center text-white text-sm">董</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">董先生</p>
|
||
<p class="text-[10px] text-gray-5">12月18日首次 · 已消费2次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-cyan-100 text-cyan-700 text-[10px] rounded-full">新</span>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-red-300 to-pink-400 flex items-center justify-center text-white text-sm">萧</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">萧女士</p>
|
||
<p class="text-[10px] text-gray-5">12月15日首次 · 已消费5次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-emerald-100 text-emerald-700 text-[10px] rounded-full">活跃</span>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-cyan-300 to-sky-400 flex items-center justify-center text-white text-sm">程</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">程先生</p>
|
||
<p class="text-[10px] text-gray-5">12月12日首次 · 已消费1次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-gray-100 text-gray-500 text-[10px] rounded-full">待跟进</span>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-amber-300 to-yellow-400 flex items-center justify-center text-white text-sm">曹</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">曹女士</p>
|
||
<p class="text-[10px] text-gray-5">12月10日首次 · 已消费2次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-cyan-100 text-cyan-700 text-[10px] rounded-full">新</span>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-green-300 to-emerald-400 flex items-center justify-center text-white text-sm">袁</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">袁先生</p>
|
||
<p class="text-[10px] text-gray-5">12月8日首次 · 已消费3次</p>
|
||
</div>
|
||
</div>
|
||
<span class="px-2 py-0.5 bg-cyan-100 text-cyan-700 text-[10px] rounded-full">新</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 查看更多按钮 -->
|
||
<div class="flex items-center justify-center pt-2">
|
||
<button id="newCustomerToggle" onclick="toggleNewCustomer()" class="text-xs text-primary flex items-center gap-1">
|
||
<span id="newCustomerBtnText">查看更多</span>
|
||
<svg id="newCustomerArrow" class="w-3 h-3 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="6 9 12 15 18 9"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我的常客 -->
|
||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-pink-500"></span>
|
||
<h2 class="text-sm font-semibold text-gray-13">我的常客</h2>
|
||
</div>
|
||
<span class="text-xs text-gray-5">近2月贡献TOP20</span>
|
||
</div>
|
||
|
||
<!-- 客户列表 -->
|
||
<div id="regularCustomerList" class="space-y-1">
|
||
<!-- 客户1 -->
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-white text-xs font-bold">1</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-pink-300 to-purple-400 flex items-center justify-center text-white text-sm">王</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">王先生</p>
|
||
<p class="text-[10px] text-gray-5">28次 · 42h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-pink-600">¥4,116</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 客户2 -->
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-gray-300 to-gray-400 flex items-center justify-center text-white text-xs font-bold">2</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-blue-300 to-cyan-400 flex items-center justify-center text-white text-sm">李</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">李女士</p>
|
||
<p class="text-[10px] text-gray-5">22次 · 35h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-pink-600">¥3,430</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 客户3 -->
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-amber-600 to-yellow-600 flex items-center justify-center text-white text-xs font-bold">3</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-green-300 to-teal-400 flex items-center justify-center text-white text-sm">张</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">张先生</p>
|
||
<p class="text-[10px] text-gray-5">18次 · 28h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-pink-600">¥2,744</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 客户4 -->
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-medium">4</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-orange-300 to-red-400 flex items-center justify-center text-white text-sm">刘</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">刘先生</p>
|
||
<p class="text-[10px] text-gray-5">15次 · 22h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-gray-600">¥2,156</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 客户5 -->
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-medium">5</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-indigo-300 to-purple-400 flex items-center justify-center text-white text-sm">陈</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">陈女士</p>
|
||
<p class="text-[10px] text-gray-5">12次 · 18h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-gray-600">¥1,764</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 客户6 -->
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-medium">6</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-rose-300 to-pink-400 flex items-center justify-center text-white text-sm">赵</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">赵先生</p>
|
||
<p class="text-[10px] text-gray-5">10次 · 15h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-gray-600">¥1,470</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 更多常客（默认隐藏） -->
|
||
<div id="regularCustomerMore" class="hidden space-y-1">
|
||
<!-- 客户7-20 -->
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-medium">7</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-cyan-300 to-blue-400 flex items-center justify-center text-white text-sm">周</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">周女士</p>
|
||
<p class="text-[10px] text-gray-5">9次 · 13h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-gray-600">¥1,274</p>
|
||
</div>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-medium">8</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-violet-300 to-purple-400 flex items-center justify-center text-white text-sm">吴</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">吴先生</p>
|
||
<p class="text-[10px] text-gray-5">8次 · 12h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-gray-600">¥1,176</p>
|
||
</div>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-medium">9</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-teal-300 to-emerald-400 flex items-center justify-center text-white text-sm">郑</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">郑女士</p>
|
||
<p class="text-[10px] text-gray-5">7次 · 11h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-gray-600">¥1,078</p>
|
||
</div>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-medium">10</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-amber-300 to-yellow-400 flex items-center justify-center text-white text-sm">孙</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">孙先生</p>
|
||
<p class="text-[10px] text-gray-5">6次 · 10h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-gray-600">¥980</p>
|
||
</div>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-medium">11</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-sky-300 to-blue-400 flex items-center justify-center text-white text-sm">黄</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">黄女士</p>
|
||
<p class="text-[10px] text-gray-5">6次 · 9h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-gray-600">¥882</p>
|
||
</div>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-medium">12</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-fuchsia-300 to-pink-400 flex items-center justify-center text-white text-sm">林</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">林先生</p>
|
||
<p class="text-[10px] text-gray-5">5次 · 8h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-gray-600">¥784</p>
|
||
</div>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-medium">13</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-lime-300 to-green-400 flex items-center justify-center text-white text-sm">何</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">何女士</p>
|
||
<p class="text-[10px] text-gray-5">5次 · 7h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-gray-600">¥686</p>
|
||
</div>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-medium">14</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-orange-300 to-amber-400 flex items-center justify-center text-white text-sm">马</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">马先生</p>
|
||
<p class="text-[10px] text-gray-5">4次 · 6h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-gray-600">¥588</p>
|
||
</div>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-medium">15</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-slate-300 to-gray-400 flex items-center justify-center text-white text-sm">罗</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">罗女士</p>
|
||
<p class="text-[10px] text-gray-5">4次 · 6h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-gray-600">¥588</p>
|
||
</div>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-medium">16</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-indigo-300 to-violet-400 flex items-center justify-center text-white text-sm">梁</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">梁先生</p>
|
||
<p class="text-[10px] text-gray-5">4次 · 5h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-gray-600">¥490</p>
|
||
</div>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-medium">17</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-pink-300 to-rose-400 flex items-center justify-center text-white text-sm">宋</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">宋女士</p>
|
||
<p class="text-[10px] text-gray-5">3次 · 5h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-gray-600">¥490</p>
|
||
</div>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-medium">18</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-emerald-300 to-teal-400 flex items-center justify-center text-white text-sm">谢</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">谢先生</p>
|
||
<p class="text-[10px] text-gray-5">3次 · 4h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-gray-600">¥392</p>
|
||
</div>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-medium">19</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-blue-300 to-indigo-400 flex items-center justify-center text-white text-sm">韩</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">韩女士</p>
|
||
<p class="text-[10px] text-gray-5">3次 · 4h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-gray-600">¥392</p>
|
||
</div>
|
||
</div>
|
||
<div class="customer-item flex items-center justify-between py-2.5">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs font-medium">20</div>
|
||
<div class="w-9 h-9 rounded-lg bg-gray-200 overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-yellow-300 to-orange-400 flex items-center justify-center text-white text-sm">唐</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-13">唐先生</p>
|
||
<p class="text-[10px] text-gray-5">2次 · 3h</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold text-gray-600">¥294</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 查看更多按钮 -->
|
||
<div class="flex items-center justify-center pt-2">
|
||
<button id="regularCustomerToggle" onclick="toggleRegularCustomer()" class="text-xs text-primary flex items-center gap-1">
|
||
<span id="regularCustomerBtnText">查看更多</span>
|
||
<svg id="regularCustomerArrow" class="w-3 h-3 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="6 9 12 15 18 9"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 悬浮助手按钮 -->
|
||
<script src="../js/ai-float-btn.js"></script>
|
||
|
||
<!-- 展开收起交互 -->
|
||
<script>
|
||
function toggleNewCustomer() {
|
||
const moreSection = document.getElementById('newCustomerMore');
|
||
const btnText = document.getElementById('newCustomerBtnText');
|
||
const arrow = document.getElementById('newCustomerArrow');
|
||
|
||
if (moreSection.classList.contains('hidden')) {
|
||
moreSection.classList.remove('hidden');
|
||
btnText.textContent = '收起';
|
||
arrow.style.transform = 'rotate(180deg)';
|
||
} else {
|
||
moreSection.classList.add('hidden');
|
||
btnText.textContent = '查看更多';
|
||
arrow.style.transform = 'rotate(0deg)';
|
||
}
|
||
}
|
||
|
||
function toggleRegularCustomer() {
|
||
const moreSection = document.getElementById('regularCustomerMore');
|
||
const btnText = document.getElementById('regularCustomerBtnText');
|
||
const arrow = document.getElementById('regularCustomerArrow');
|
||
|
||
if (moreSection.classList.contains('hidden')) {
|
||
moreSection.classList.remove('hidden');
|
||
btnText.textContent = '收起';
|
||
arrow.style.transform = 'rotate(180deg)';
|
||
} else {
|
||
moreSection.classList.add('hidden');
|
||
btnText.textContent = '查看更多';
|
||
arrow.style.transform = 'rotate(0deg)';
|
||
}
|
||
}
|
||
|
||
function toggleThisMonthRecords() {
|
||
const moreSection = document.getElementById('thisMonthRecordsMore');
|
||
const btnText = document.getElementById('thisMonthRecordsBtnText');
|
||
const arrow = document.getElementById('thisMonthRecordsArrow');
|
||
|
||
if (moreSection.classList.contains('hidden')) {
|
||
moreSection.classList.remove('hidden');
|
||
btnText.textContent = '收起';
|
||
arrow.style.transform = 'rotate(180deg)';
|
||
} else {
|
||
moreSection.classList.add('hidden');
|
||
btnText.textContent = '展开更多';
|
||
arrow.style.transform = 'rotate(0deg)';
|
||
}
|
||
}
|
||
|
||
function toggleLastMonthRecords() {
|
||
const moreSection = document.getElementById('lastMonthRecordsMore');
|
||
const btnText = document.getElementById('lastMonthRecordsBtnText');
|
||
const arrow = document.getElementById('lastMonthRecordsArrow');
|
||
|
||
if (moreSection.classList.contains('hidden')) {
|
||
moreSection.classList.remove('hidden');
|
||
btnText.textContent = '收起';
|
||
arrow.style.transform = 'rotate(180deg)';
|
||
} else {
|
||
moreSection.classList.add('hidden');
|
||
btnText.textContent = '展开更多';
|
||
arrow.style.transform = 'rotate(0deg)';
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|