在准备环境前提交次全部更改。
This commit is contained in:
@@ -12,113 +12,62 @@
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#0052d9',
|
||||
'primary-light': '#ecf2fe',
|
||||
success: '#00a870',
|
||||
warning: '#ed7b2f',
|
||||
error: '#e34d59',
|
||||
'gray-1': '#f3f3f3',
|
||||
'gray-2': '#eeeeee',
|
||||
'gray-3': '#e7e7e7',
|
||||
'gray-4': '#dcdcdc',
|
||||
'gray-5': '#c5c5c5',
|
||||
'gray-6': '#a6a6a6',
|
||||
'gray-7': '#8b8b8b',
|
||||
'gray-8': '#777777',
|
||||
'gray-9': '#5e5e5e',
|
||||
'gray-10': '#4b4b4b',
|
||||
'gray-11': '#393939',
|
||||
'gray-12': '#2c2c2c',
|
||||
primary: '#0052d9', 'primary-light': '#ecf2fe',
|
||||
success: '#00a870', warning: '#ed7b2f', error: '#e34d59',
|
||||
'gray-1': '#f3f3f3', 'gray-2': '#eeeeee', 'gray-3': '#e7e7e7',
|
||||
'gray-4': '#dcdcdc', 'gray-5': '#c5c5c5', 'gray-6': '#a6a6a6',
|
||||
'gray-7': '#8b8b8b', 'gray-8': '#777777', 'gray-9': '#5e5e5e',
|
||||
'gray-10': '#4b4b4b', 'gray-11': '#393939', 'gray-12': '#2c2c2c',
|
||||
'gray-13': '#242424',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Noto Sans SC', 'sans-serif'],
|
||||
}
|
||||
fontFamily: { sans: ['Noto Sans SC', 'sans-serif'] }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
/* 覆盖banner样式 */
|
||||
.banner-bg.theme-coral .text-white {
|
||||
color: #ffffff !important;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
.banner-bg.theme-coral .text-emerald-300 {
|
||||
color: #6ee7b7 !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
.section-title {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||
.section-title.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||
.section-title.pink::before { background: linear-gradient(180deg, #e851a4, #f5a0c0); }
|
||||
body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; padding-bottom: 20px; }
|
||||
.st { position: relative; padding-left: 12px; }
|
||||
.st::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; border-radius: 2px; }
|
||||
.st.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||
.st.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||
.st.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||
.st.pink::before { background: linear-gradient(180deg, #e851a4, #f5a0c0); }
|
||||
.st.purple::before { background: linear-gradient(180deg, #7c3aed, #a78bfa); }
|
||||
.st.teal::before { background: linear-gradient(180deg, #0d9488, #5eead4); }
|
||||
.pv { font-variant-numeric: tabular-nums; }
|
||||
.progress-sm { height: 6px; border-radius: 3px; background: #e7e7e7; overflow: hidden; }
|
||||
.progress-sm .fill { height: 100%; border-radius: 3px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 通栏 Banner - 助教信息 -->
|
||||
<!-- Banner -->
|
||||
<div class="banner-bg theme-coral texture-aurora relative text-white">
|
||||
<!-- 导航栏 -->
|
||||
<div class="h-11 flex items-center relative px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center text-base font-medium">助教详情</h1>
|
||||
</div>
|
||||
|
||||
<!-- 助教信息 -->
|
||||
<div class="px-5 pt-2 pb-6">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg overflow-hidden">
|
||||
<div class="px-5 pt-2 pb-5">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-14 h-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg overflow-hidden flex-shrink-0">
|
||||
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl font-semibold">小燕</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-lg font-semibold">小燕</span>
|
||||
<span class="px-2 py-0.5 bg-amber-400/30 text-amber-100 rounded-full text-xs">星级</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-white/70 text-sm">
|
||||
<span class="px-2 py-0.5 bg-white/20 rounded text-xs">中🎱</span>
|
||||
<span class="px-2 py-0.5 bg-white/20 rounded text-xs">🎯 斯诺克</span>
|
||||
<div class="flex items-center gap-2 text-white/70 text-xs">
|
||||
<span class="px-2 py-0.5 bg-white/20 rounded">中🎱</span>
|
||||
<span class="px-2 py-0.5 bg-white/20 rounded">🎯 斯诺克</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">工龄</p>
|
||||
<p class="font-medium text-sm">3年</p>
|
||||
</div>
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">客户数</p>
|
||||
<p class="font-medium text-sm">68</p>
|
||||
</div>
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">当前任务数</p>
|
||||
<p class="font-medium text-sm">12</p>
|
||||
</div>
|
||||
<div class="bg-white/15 rounded-xl p-3 text-center backdrop-blur-sm">
|
||||
<p class="text-white/60 text-xs mb-1">本月任务完成数</p>
|
||||
<p class="font-medium text-sm">38</p>
|
||||
<!-- 工龄 + 客户数 放右侧 -->
|
||||
<div class="flex-shrink-0 text-right space-y-1.5">
|
||||
<div class="text-white/70 text-xs">工龄 <span class="text-white font-bold text-base">3年</span></div>
|
||||
<div class="text-white/70 text-xs">客户 <span class="text-white font-bold text-base">68人</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -126,88 +75,432 @@
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- 专业技能 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">专业技能</h2>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-primary text-xs rounded-full border border-blue-100">中🎱 精通</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎯 斯诺克</span>
|
||||
<span class="px-3 py-1.5 bg-gradient-to-r from-orange-50 to-amber-50 text-warning text-xs rounded-full border border-orange-100">🎳 花式</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
专攻中式八球和斯诺克教学，具有 3 年专业教学经验。擅长基础教学和进阶技巧指导，累计培训学员 200+，多名学员参加业余比赛获奖。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 擅长领域 -->
|
||||
<!-- 绩效概览 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">擅长领域</h2>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="p-3 bg-gray-50 rounded-xl">
|
||||
<p class="text-sm font-medium text-gray-13 mb-1">基础入门</p>
|
||||
<p class="text-xs text-gray-6">零基础学员快速上手</p>
|
||||
<h2 class="st blue text-base font-semibold text-gray-13 mb-4">绩效概览</h2>
|
||||
<div class="grid grid-cols-2 gap-3 mb-4">
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-3 border border-blue-100/50">
|
||||
<p class="text-[10px] text-gray-6 mb-1">本月定档业绩</p>
|
||||
<p class="text-2xl font-bold text-primary pv">87.5<span class="text-xs font-normal text-gray-6">h</span></p>
|
||||
<p class="text-[10px] text-gray-5 mt-0.5">折算前 89.0h</p>
|
||||
</div>
|
||||
<div class="p-3 bg-gray-50 rounded-xl">
|
||||
<p class="text-sm font-medium text-gray-13 mb-1">技巧进阶</p>
|
||||
<p class="text-xs text-gray-6">走位、翻袋、解球</p>
|
||||
<div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-3 border border-green-100/50">
|
||||
<p class="text-[10px] text-gray-6 mb-1">本月工资（预估）</p>
|
||||
<p class="text-2xl font-bold text-success pv">¥6,950</p>
|
||||
<p class="text-[10px] text-warning mt-0.5">含预估部分</p>
|
||||
</div>
|
||||
<div class="p-3 bg-gray-50 rounded-xl">
|
||||
<p class="text-sm font-medium text-gray-13 mb-1">心态训练</p>
|
||||
<p class="text-xs text-gray-6">比赛心理素质培养</p>
|
||||
<div class="bg-gradient-to-br from-orange-50 to-amber-50 rounded-xl p-3 border border-orange-100/50">
|
||||
<p class="text-[10px] text-gray-6 mb-1">客源储值余额</p>
|
||||
<p class="text-2xl font-bold text-warning pv">¥86,200</p>
|
||||
<p class="text-[10px] text-gray-5 mt-0.5">68位客户合计</p>
|
||||
</div>
|
||||
<div class="p-3 bg-gray-50 rounded-xl">
|
||||
<p class="text-sm font-medium text-gray-13 mb-1">战术分析</p>
|
||||
<p class="text-xs text-gray-6">局面判断与策略</p>
|
||||
<div class="bg-gradient-to-br from-purple-50 to-violet-50 rounded-xl p-3 border border-purple-100/50">
|
||||
<p class="text-[10px] text-gray-6 mb-1">本月任务完成</p>
|
||||
<p class="text-2xl font-bold text-purple-600 pv">38<span class="text-xs font-normal text-gray-6">个</span></p>
|
||||
<p class="text-[10px] text-gray-5 mt-0.5">覆盖 22 位客户</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 档位进度 -->
|
||||
<div class="bg-gray-50 rounded-xl p-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-xs text-gray-9 font-medium">绩效档位进度</span>
|
||||
<span class="text-xs text-primary font-medium">距下一档还差 12.5h</span>
|
||||
</div>
|
||||
<div class="progress-sm">
|
||||
<div class="fill bg-gradient-to-r from-primary to-blue-400" style="width:72%"></div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-1.5 text-[10px] text-gray-5">
|
||||
<span>当前 80h</span>
|
||||
<span>目标 100h</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 与我的关系 -->
|
||||
<!-- 收入明细 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title orange text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-4 py-2 bg-gradient-to-r from-green-500 to-emerald-500 text-white text-sm font-semibold rounded-xl shadow-sm">很好</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="h-3 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-gradient-to-r from-green-400 to-emerald-500 rounded-full" style="width: 92%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-lg font-bold text-success">0.92</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
您是该助教的熟客，共接受过 25 次教学服务。该助教对您的技术水平和学习偏好非常了解，能够提供针对性指导。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 我与该助教相关的客户 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title pink text-sm font-semibold text-gray-13 mb-4">相关客户</h2>
|
||||
<h2 class="st green text-base font-semibold text-gray-13 mb-4">收入明细</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-lg">💖</span>
|
||||
<span class="text-sm font-medium text-gray-13">张三</span>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-primary"></span>
|
||||
<span class="text-base text-gray-9">基础课时费</span>
|
||||
</div>
|
||||
<span class="text-sm text-success font-medium">0.95</span>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥3,500</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-lg">💛</span>
|
||||
<span class="text-sm font-medium text-gray-13">李四</span>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-success"></span>
|
||||
<span class="text-base text-gray-9">激励课时费</span>
|
||||
</div>
|
||||
<span class="text-sm text-warning font-medium">0.82</span>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥1,800</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-lg">💛</span>
|
||||
<span class="text-sm font-medium text-gray-13">王五</span>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-warning"></span>
|
||||
<span class="text-base text-gray-9">充值提成</span>
|
||||
</div>
|
||||
<span class="text-sm text-gray-7 font-medium">0.68</span>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥1,200</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-purple-500"></span>
|
||||
<span class="text-base text-gray-9">酒水提成</span>
|
||||
</div>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥450</span>
|
||||
</div>
|
||||
<div class="border-t border-gray-100 pt-2 flex items-center justify-between">
|
||||
<span class="text-base font-semibold text-gray-9">合计（预估）</span>
|
||||
<span class="text-base font-bold text-success pv">¥6,950</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 任务执行 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="st orange text-base font-semibold text-gray-13 mb-4">任务执行</h2>
|
||||
<!-- 当前任务概况 -->
|
||||
<div class="grid grid-cols-3 gap-2 mb-4">
|
||||
<div class="bg-red-50 rounded-xl p-3 text-center border border-red-100/50">
|
||||
<p class="text-2xl font-bold text-error pv">3</p>
|
||||
<p class="text-xs text-gray-7 mt-0.5">置顶任务</p>
|
||||
</div>
|
||||
<div class="bg-blue-50 rounded-xl p-3 text-center border border-blue-100/50">
|
||||
<p class="text-2xl font-bold text-primary pv">9</p>
|
||||
<p class="text-xs text-gray-7 mt-0.5">普通待办</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-xl p-3 text-center border border-gray-200">
|
||||
<p class="text-2xl font-bold text-gray-5 pv">2</p>
|
||||
<p class="text-xs text-gray-7 mt-0.5">已放弃</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 置顶任务 -->
|
||||
<p class="text-xs font-semibold text-error mb-2 flex items-center gap-1">📌 置顶任务</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex items-center gap-3 p-2.5 bg-red-50/60 rounded-lg border border-red-100/60">
|
||||
<span class="text-xs">🔴</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm font-medium text-gray-13">回访王先生 — 续卡意向</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月10日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-error/10 text-error rounded font-medium">紧急</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-red-50/60 rounded-lg border border-red-100/60">
|
||||
<span class="text-xs">🔴</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm font-medium text-gray-13">李女士充值跟进</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月12日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-error/10 text-error rounded font-medium">紧急</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-red-50/60 rounded-lg border border-red-100/60">
|
||||
<span class="text-xs">🔴</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm font-medium text-gray-13">陈女士激活 — 30天未到店</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月15日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-warning/10 text-warning rounded font-medium">重要</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 普通任务 -->
|
||||
<p class="text-xs font-semibold text-primary mb-2 flex items-center gap-1">📋 普通任务</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex items-center gap-3 p-2.5 bg-blue-50/40 rounded-lg border border-blue-100/40">
|
||||
<span class="text-xs">🔵</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-13">关怀张先生</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月18日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-primary/10 text-primary rounded">进行中</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-blue-50/40 rounded-lg border border-blue-100/40">
|
||||
<span class="text-xs">🔵</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-13">赵总生日关怀</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月20日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-primary/10 text-primary rounded">待开始</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-blue-50/40 rounded-lg border border-blue-100/40">
|
||||
<span class="text-xs">🔵</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-13">周女士课程推荐</span>
|
||||
<span class="text-xs text-gray-6 ml-2">截止 2月22日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-primary/10 text-primary rounded">待开始</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 已放弃任务 -->
|
||||
<p class="text-xs font-semibold text-gray-5 mb-2 flex items-center gap-1">🚫 已放弃</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex items-center gap-3 p-2.5 bg-gray-50 rounded-lg border border-gray-200 opacity-60">
|
||||
<span class="text-xs">⚪</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-7 line-through">吴先生续卡</span>
|
||||
<span class="text-xs text-gray-5 ml-2">放弃于 2月3日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-gray-100 text-gray-5 rounded">客户拒绝</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-gray-50 rounded-lg border border-gray-200 opacity-60">
|
||||
<span class="text-xs">⚪</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-7 line-through">郑女士团建推荐</span>
|
||||
<span class="text-xs text-gray-5 ml-2">放弃于 1月28日</span>
|
||||
</div>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-gray-100 text-gray-5 rounded">超时未响应</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 已完成简报 -->
|
||||
<p class="text-xs font-semibold text-success mb-2 flex items-center gap-1">✅ 已完成 <span class="text-primary font-bold">38</span> 个</p>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-3 p-2.5 bg-gray-50 rounded-lg border border-gray-100">
|
||||
<span class="text-xs">✅</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-13">回访王先生</span>
|
||||
<span class="text-xs text-gray-6 ml-2">2月7日</span>
|
||||
</div>
|
||||
<span class="text-xs text-success font-medium">已完成</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2.5 bg-gray-50 rounded-lg border border-gray-100">
|
||||
<span class="text-xs">✅</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm text-gray-13">充值跟进李女士</span>
|
||||
<span class="text-xs text-gray-6 ml-2">2月6日</span>
|
||||
</div>
|
||||
<span class="text-xs text-success font-medium">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-center">
|
||||
<button class="text-sm text-primary font-medium">查看全部任务 →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 客户关系 TOP5 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="st pink text-base font-semibold text-gray-13 mb-4">客户关系 TOP5</h2>
|
||||
<div class="space-y-2.5">
|
||||
<!-- 客户1 -->
|
||||
<div class="flex items-center gap-3 p-3 bg-gradient-to-r from-pink-50/80 to-rose-50/40 rounded-xl border border-pink-100/40">
|
||||
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center text-white text-xs font-medium flex-shrink-0">王</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-sm font-medium text-gray-13">王先生</span>
|
||||
<span class="text-xs">❤️</span>
|
||||
<span class="text-[10px] text-success font-medium pv">0.95</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-[10px] text-gray-6">
|
||||
<span>服务 25次</span>
|
||||
<span>储值 ¥8,600</span>
|
||||
<span>消费 ¥12,800</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<!-- 客户2 -->
|
||||
<div class="flex items-center gap-3 p-3 bg-gradient-to-r from-amber-50/80 to-yellow-50/40 rounded-xl border border-amber-100/40">
|
||||
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-white text-xs font-medium flex-shrink-0">李</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-sm font-medium text-gray-13">李女士</span>
|
||||
<span class="text-xs">❤️</span>
|
||||
<span class="text-[10px] text-success font-medium pv">0.92</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-[10px] text-gray-6">
|
||||
<span>服务 22次</span>
|
||||
<span>储值 ¥6,200</span>
|
||||
<span>消费 ¥9,500</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<!-- 客户3 -->
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center text-white text-xs font-medium flex-shrink-0">陈</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-sm font-medium text-gray-13">陈女士</span>
|
||||
<span class="text-xs">❤️</span>
|
||||
<span class="text-[10px] text-warning font-medium pv">0.85</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-[10px] text-gray-6">
|
||||
<span>服务 18次</span>
|
||||
<span>储值 ¥5,000</span>
|
||||
<span>消费 ¥7,200</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<!-- 客户4 -->
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-white text-xs font-medium flex-shrink-0">张</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-sm font-medium text-gray-13">张先生</span>
|
||||
<span class="text-xs">💛</span>
|
||||
<span class="text-[10px] text-warning font-medium pv">0.78</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-[10px] text-gray-6">
|
||||
<span>服务 12次</span>
|
||||
<span>储值 ¥3,800</span>
|
||||
<span>消费 ¥5,600</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<!-- 客户5 -->
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center text-white text-xs font-medium flex-shrink-0">赵</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-sm font-medium text-gray-13">赵先生</span>
|
||||
<span class="text-xs">💛</span>
|
||||
<span class="text-[10px] text-gray-7 font-medium pv">0.68</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-[10px] text-gray-6">
|
||||
<span>服务 8次</span>
|
||||
<span>储值 ¥2,000</span>
|
||||
<span>消费 ¥3,200</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 近期服务明细 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="st purple text-base font-semibold text-gray-13 mb-4">近期服务明细</h2>
|
||||
<div class="space-y-3">
|
||||
<!-- 服务记录1 -->
|
||||
<div class="p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium text-gray-13">王先生</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-[10px] rounded">基础课</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-6">2026-02-07 21:30</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="flex items-center gap-3 text-gray-6">
|
||||
<span>2.5h</span>
|
||||
<span>中🎱</span>
|
||||
</div>
|
||||
<span class="font-bold text-gray-13 pv">¥200</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 服务记录2 -->
|
||||
<div class="p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium text-gray-13">李女士</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-[10px] rounded">激励课</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-6">2026-02-07 19:00</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="flex items-center gap-3 text-gray-6">
|
||||
<span>1.5h</span>
|
||||
<span class="text-orange-500">定档绩效：2h</span>
|
||||
<span>斯诺克</span>
|
||||
</div>
|
||||
<span class="font-bold text-gray-13 pv">¥150</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 服务记录3 -->
|
||||
<div class="p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium text-gray-13">陈女士</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-[10px] rounded">基础课</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-6">2026-02-06 20:00</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="flex items-center gap-3 text-gray-6">
|
||||
<span>2h</span>
|
||||
<span>中🎱</span>
|
||||
</div>
|
||||
<span class="font-bold text-gray-13 pv">¥160</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 服务记录4 -->
|
||||
<div class="p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium text-gray-13">张先生</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-[10px] rounded">激励课</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-6">2026-02-05 14:00</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="flex items-center gap-3 text-gray-6">
|
||||
<span>1h</span>
|
||||
<span>中🎱</span>
|
||||
</div>
|
||||
<span class="font-bold text-gray-13 pv">¥80</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 查看更多 -->
|
||||
<div class="mt-3 text-center">
|
||||
<button class="text-xs text-primary font-medium">查看更多服务记录 →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 更多信息 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="st teal text-base font-semibold text-gray-13 mb-4">更多信息</h2>
|
||||
<div class="flex items-center justify-between py-2 border-b border-gray-100 mb-4">
|
||||
<span class="text-base text-gray-7">入职日期</span>
|
||||
<span class="text-base text-gray-13">2023-03-15</span>
|
||||
</div>
|
||||
<!-- 月度数据表格 -->
|
||||
<div class="overflow-x-auto -mx-1">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-200">
|
||||
<th class="text-left py-2 px-2 text-gray-7 font-medium text-xs">月份</th>
|
||||
<th class="text-right py-2 px-2 text-gray-7 font-medium text-xs">服务客户</th>
|
||||
<th class="text-right py-2 px-2 text-gray-7 font-medium text-xs">业绩时长</th>
|
||||
<th class="text-right py-2 px-2 text-gray-7 font-medium text-xs">工资</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-50 bg-blue-50/30">
|
||||
<td class="py-2.5 px-2 text-gray-13 font-medium">本月<span class="text-[10px] text-warning ml-1">预估</span></td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv font-medium">22人</td>
|
||||
<td class="py-2.5 px-2 text-right text-primary pv font-bold">87.5h</td>
|
||||
<td class="py-2.5 px-2 text-right text-success pv font-bold">¥6,950</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-50">
|
||||
<td class="py-2.5 px-2 text-gray-13">上月</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">25人</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">92.0h</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">¥7,200</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-50">
|
||||
<td class="py-2.5 px-2 text-gray-13">4月</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">20人</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">85.0h</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">¥6,600</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-50">
|
||||
<td class="py-2.5 px-2 text-gray-13">3月</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">18人</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">78.5h</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">¥6,100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2.5 px-2 text-gray-13">2月</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">15人</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">65.0h</td>
|
||||
<td class="py-2.5 px-2 text-right text-gray-13 pv">¥5,200</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user