微信小程序页面迁移校验之前 P5任务处理之前
This commit is contained in:
80
docs/h5_ui/rendered/ai-icon-demo.html
Normal file
80
docs/h5_ui/rendered/ai-icon-demo.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI 标识配色演示</title>
|
||||
<link href="../css/ai-icons.css" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: 'Noto Sans SC', -apple-system, sans-serif; background: #f5f5f5; padding: 20px; }
|
||||
h1 { font-size: 18px; color: #242424; margin-bottom: 20px; text-align: center; }
|
||||
h2 { font-size: 15px; color: #5e5e5e; margin: 24px 0 12px; padding-left: 8px; border-left: 3px solid #667eea; }
|
||||
.demo-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: #fff; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
|
||||
.demo-row .label { font-size: 13px; color: #8b8b8b; min-width: 36px; }
|
||||
.demo-row .sample-text { font-size: 14px; color: #5e5e5e; display: flex; align-items: center; }
|
||||
.note { font-size: 12px; color: #a6a6a6; text-align: center; margin-top: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>AI 标识配色方案演示</h1>
|
||||
|
||||
<!-- ===== 嵌入 Icon ===== -->
|
||||
<h2>嵌入 Icon（行首小图标 · 机器人）</h2>
|
||||
|
||||
<div class="demo-row">
|
||||
<span class="label">红</span>
|
||||
<span class="sample-text"><span class="ai-inline-icon ai-color-red"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">橙</span>
|
||||
<span class="sample-text"><span class="ai-inline-icon ai-color-orange"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">黄</span>
|
||||
<span class="sample-text"><span class="ai-inline-icon ai-color-yellow"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">蓝</span>
|
||||
<span class="sample-text"><span class="ai-inline-icon ai-color-blue"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">靛</span>
|
||||
<span class="sample-text"><span class="ai-inline-icon ai-color-indigo"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">紫</span>
|
||||
<span class="sample-text"><span class="ai-inline-icon ai-color-purple"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
|
||||
</div>
|
||||
<p class="note">每个页面所有嵌入 Icon 统一使用一种配色，刷新后随机分配</p>
|
||||
|
||||
<!-- ===== Title AI 标识 ===== -->
|
||||
<h2>Title AI 标识（标题行右侧 · 机器人 · 浅色背景+边框）</h2>
|
||||
|
||||
<div class="demo-row">
|
||||
<span class="label">红</span>
|
||||
<span class="ai-title-badge ai-color-red"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">橙</span>
|
||||
<span class="ai-title-badge ai-color-orange"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">黄</span>
|
||||
<span class="ai-title-badge ai-color-yellow"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">蓝</span>
|
||||
<span class="ai-title-badge ai-color-blue"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">靛</span>
|
||||
<span class="ai-title-badge ai-color-indigo"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">紫</span>
|
||||
<span class="ai-title-badge ai-color-purple"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<p class="note">每个页面所有 Title AI 标识统一使用一种配色，刷新后随机分配</p>
|
||||
</body>
|
||||
</html>
|
||||
124
docs/h5_ui/rendered/apply.html
Normal file
124
docs/h5_ui/rendered/apply.html
Normal file
@@ -0,0 +1,124 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>账号申请 - 球房运营助手</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
.bg-gradient-main {
|
||||
background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #ecfeff 100%);
|
||||
}
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top, 44px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gradient-main min-h-screen flex flex-col">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="safe-area-top bg-white/80 backdrop-blur-lg sticky top-0 z-10">
|
||||
<div class="h-11 flex items-center justify-center relative border-b border-gray-200/50">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-gray-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<h1 class="text-base font-medium text-gray-13">申请访问权限</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="flex-1 p-4">
|
||||
<!-- 欢迎卡片 -->
|
||||
<div class="bg-gradient-to-br from-primary to-blue-400 rounded-2xl p-5 mb-4 text-white shadow-lg shadow-primary/20">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold mb-1">欢迎加入球房运营助手</h2>
|
||||
<p class="text-white/80 text-sm">请填写申请信息，等待管理员审核</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 说明文字 -->
|
||||
<div class="bg-primary/5 border border-primary/10 rounded-xl p-4 mb-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p class="text-sm text-primary font-medium mb-1">申请说明</p>
|
||||
<p class="text-xs text-gray-7 leading-relaxed">
|
||||
请填写您的真实信息，包括姓名、岗位和所属门店等，以便管理员快速审核您的申请。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50">
|
||||
<div class="mb-3 flex items-center gap-1">
|
||||
<span class="text-error text-sm">*</span>
|
||||
<span class="text-sm font-medium text-gray-13">申请说明</span>
|
||||
</div>
|
||||
<textarea
|
||||
id="applyReason"
|
||||
class="w-full h-36 p-4 bg-gray-50 rounded-xl border border-gray-100 resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all"
|
||||
placeholder="点击填写申请信息： 1. 您的姓名 2. 您的岗位（如：助教、店长等） 3. 所属门店 4. 其他说明（可选）"
|
||||
></textarea>
|
||||
<p id="errorTip" class="text-error text-xs mt-2 hidden">申请说明不能为空</p>
|
||||
<div class="flex items-center justify-between mt-3">
|
||||
<span class="text-xs text-gray-5">请认真填写，信息不完整可能导致审核不通过</span>
|
||||
<span class="text-xs text-gray-6"><span id="charCount">0</span>/200</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 审核流程说明 -->
|
||||
<div class="mt-4 bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50">
|
||||
<h3 class="text-sm font-medium text-gray-13 mb-4">审核流程</h3>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white text-xs font-medium mb-2">1</div>
|
||||
<span class="text-xs text-gray-7">提交申请</span>
|
||||
</div>
|
||||
<div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">2</div>
|
||||
<span class="text-xs text-gray-6">等待审核</span>
|
||||
</div>
|
||||
<div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">3</div>
|
||||
<span class="text-xs text-gray-6">审核通过</span>
|
||||
</div>
|
||||
<div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">4</div>
|
||||
<span class="text-xs text-gray-6">开始使用</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="p-4 pb-8 bg-white/80 backdrop-blur-lg border-t border-gray-100">
|
||||
<button id="submitBtn" class="w-full py-4 bg-gradient-to-r from-primary to-blue-500 rounded-xl text-white font-medium text-base shadow-lg shadow-primary/30 active:scale-[0.98] transition-transform">
|
||||
提交申请
|
||||
</button>
|
||||
<p class="text-xs text-gray-5 text-center mt-3">
|
||||
审核通常需要 1-3 个工作日
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
812
docs/h5_ui/rendered/board-coach.html
Normal file
812
docs/h5_ui/rendered/board-coach.html
Normal file
@@ -0,0 +1,812 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>看板-助教 - 球房运营助手</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top, 44px);
|
||||
}
|
||||
.tab-active {
|
||||
color: #0052d9;
|
||||
position: relative;
|
||||
}
|
||||
.tab-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #0052d9, #5b9cf8);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.filter-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
}
|
||||
.filter-overlay.show {
|
||||
display: block;
|
||||
}
|
||||
.filter-dropdown {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-radius: 0 0 16px 16px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||||
z-index: 1001;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.filter-dropdown.show {
|
||||
display: block;
|
||||
}
|
||||
/* 二级筛选栏层级与动效 */
|
||||
#filterBar {
|
||||
overflow: hidden;
|
||||
max-height: 120px;
|
||||
transition: transform 220ms ease, opacity 220ms ease, max-height 220ms ease;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
/* 仅用于「首次进入页面」的下滑出现（用 transition 触发一次） */
|
||||
#filterBar.filter-bar-enter {
|
||||
transform: translateY(-16px);
|
||||
opacity: 0;
|
||||
}
|
||||
#filterBar.filter-bar-hidden {
|
||||
opacity: 0;
|
||||
transform: translateY(-110%);
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes filterBarDrop {
|
||||
from { transform: translateY(-16px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#filterBar { animation: none; transition: none; }
|
||||
}
|
||||
.coach-card {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.dim-container { display: none; }
|
||||
.dim-container.active { display: block; }
|
||||
.coach-card:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="safe-area-top bg-white sticky top-0 z-20 shadow-sm">
|
||||
<!-- 一级 Tab -->
|
||||
<div class="flex border-b border-gray-2">
|
||||
<a href="board-finance.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">财务</a>
|
||||
<a href="board-customer.html" class="flex-1 py-3 text-center text-sm font-medium text-gray-7">客户</a>
|
||||
<a href="board-coach.html" class="flex-1 py-3 text-center text-sm font-medium tab-active">助教</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选区域（二级）— 高度与财务客户看板一致，文字放大 -->
|
||||
<div id="filterBar" class="bg-gray-1 sticky top-[44px] z-10 px-4 py-2 border-b border-gray-2">
|
||||
<div class="bg-white rounded-lg p-1.5 flex gap-2 shadow-sm border border-gray-2">
|
||||
<button onclick="toggleFilter('sort')" class="flex-[2] px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100 whitespace-nowrap">
|
||||
<span id="sortLabel" class="truncate font-medium">定档业绩最高</span>
|
||||
<svg class="w-4 h-4 text-gray-5 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button onclick="toggleFilter('skill')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100 whitespace-nowrap">
|
||||
<span id="skillLabel" class="truncate">不限</span>
|
||||
<svg class="w-4 h-4 text-gray-5 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button onclick="toggleFilter('time')" class="flex-1 px-3 py-2 bg-gray-50 rounded-lg text-sm text-gray-10 flex items-center justify-center gap-1 border border-gray-100 whitespace-nowrap">
|
||||
<span id="timeLabel" class="truncate">本月</span>
|
||||
<svg class="w-4 h-4 text-gray-5 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 遮罩层 -->
|
||||
<div id="filterOverlay" class="filter-overlay" onclick="closeAllFilters()"></div>
|
||||
|
||||
<!-- 排序筛选弹窗 -->
|
||||
<div id="sortDropdown" class="filter-dropdown">
|
||||
<div class="p-4 space-y-2">
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('定档业绩最高')">定档业绩最高</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('定档业绩最低')">定档业绩最低</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('工资最高')">工资最高</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('工资最低')">工资最低</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('客源储值最高')">客源储值最高</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSort('任务完成最多')">任务完成最多</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 擅长项目筛选弹窗 -->
|
||||
<div id="skillDropdown" class="filter-dropdown">
|
||||
<div class="p-4 space-y-2">
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('不限')">不限</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('🎱')">🎱</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('斯')">斯</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('🀄')">🀄</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectSkill('🎤')">🎤</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时间筛选弹窗 -->
|
||||
<div id="timeDropdown" class="filter-dropdown">
|
||||
<div class="p-4 space-y-2">
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('本月')">本月</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('本季度')">本季度</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('上月')">上月</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('前3个月')">前3个月（不含本月）</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('上季度')">上季度</div>
|
||||
<div class="px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer" onclick="selectTime('最近6个月')">最近6个月（不含本月，不支持客源储值最高）</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====== 定档业绩最高/最低 ====== -->
|
||||
<div id="dim-perf" class="dim-container active p-4 space-y-3">
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">小</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">小燕</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">🎱</span>
|
||||
<span class="ml-auto flex items-center gap-2 text-xs flex-shrink-0">
|
||||
<span>定档 <b class="text-primary text-sm">86.2h</b></span>
|
||||
<span class="text-gray-5">折前 <span class="text-gray-7">92.0h</span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 王先生</span><span>💖 李女士</span><span>💛 赵总</span>
|
||||
</div>
|
||||
<span class="text-warning font-medium flex-shrink-0">距升档 13.8h</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">泡</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">泡芙</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-purple-400 to-violet-400 text-white text-xs rounded flex-shrink-0">高级</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯</span>
|
||||
<span class="ml-auto flex items-center gap-2 text-xs flex-shrink-0">
|
||||
<span>定档 <b class="text-primary text-sm">72.5h</b></span>
|
||||
<span class="text-gray-5">折前 <span class="text-gray-7">78.0h</span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 陈先生</span><span>💛 刘女士</span><span>💛 黄总</span>
|
||||
</div>
|
||||
<span class="text-warning font-medium flex-shrink-0">距升档 7.5h</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">A</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">Amy</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">🎱</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯</span>
|
||||
<span class="ml-auto flex items-center gap-2 text-xs flex-shrink-0">
|
||||
<span>定档 <b class="text-primary text-sm">68.0h</b></span>
|
||||
<span class="text-gray-5">折前 <span class="text-gray-7">72.5h</span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 张先生</span><span>💛 周女士</span><span>💛 吴总</span>
|
||||
</div>
|
||||
<span class="text-warning font-medium flex-shrink-0">距升档 32.0h</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">M</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">Mia</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded flex-shrink-0">🀄</span>
|
||||
<span class="ml-auto flex items-center gap-2 text-xs flex-shrink-0">
|
||||
<span>定档 <b class="text-primary text-sm">55.0h</b></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 赵先生</span><span>💛 吴女士</span><span>💛 孙总</span>
|
||||
</div>
|
||||
<span class="text-warning font-medium flex-shrink-0">距升档 5.0h</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">糖</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">糖糖</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-gray-400 to-gray-500 text-white text-xs rounded flex-shrink-0">初级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">🎱</span>
|
||||
<span class="ml-auto flex items-center gap-2 text-xs flex-shrink-0">
|
||||
<span>定档 <b class="text-primary text-sm">42.0h</b></span>
|
||||
<span class="text-gray-5">折前 <span class="text-gray-7">45.0h</span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 钱先生</span><span>💛 孙女士</span><span>💛 周总</span>
|
||||
</div>
|
||||
<span class="text-success font-medium flex-shrink-0">✅ 已达标</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">露</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">露露</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded flex-shrink-0">🎤</span>
|
||||
<span class="ml-auto flex items-center gap-2 text-xs flex-shrink-0">
|
||||
<span>定档 <b class="text-primary text-sm">38.0h</b></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 郑先生</span><span>💛 冯女士</span><span>💛 陈总</span>
|
||||
</div>
|
||||
<span class="text-warning font-medium flex-shrink-0">距升档 22.0h</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- ====== 工资最高/最低 ====== -->
|
||||
<div id="dim-salary" class="dim-container p-4 space-y-3">
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">小</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">小燕</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">🎱</span>
|
||||
<span class="ml-auto flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded">预估</span>
|
||||
<span class="text-lg font-bold text-gray-13">¥12,680</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 王先生</span><span>💖 李女士</span><span>💛 赵总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-gray-10 font-semibold">定档 <b>86.2h</b></span>
|
||||
<span class="text-gray-5">折前 <span class="text-gray-7">92.0h</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">泡</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">泡芙</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-purple-400 to-violet-400 text-white text-xs rounded flex-shrink-0">高级</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯</span>
|
||||
<span class="ml-auto flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded">预估</span>
|
||||
<span class="text-lg font-bold text-gray-13">¥10,200</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 陈先生</span><span>💛 刘女士</span><span>💛 黄总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-gray-10 font-semibold">定档 <b>72.5h</b></span>
|
||||
<span class="text-gray-5">折前 <span class="text-gray-7">78.0h</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">A</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">Amy</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">🎱</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯</span>
|
||||
<span class="ml-auto flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded">预估</span>
|
||||
<span class="text-lg font-bold text-gray-13">¥9,800</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 张先生</span><span>💛 周女士</span><span>💛 吴总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-gray-10 font-semibold">定档 <b>68.0h</b></span>
|
||||
<span class="text-gray-5">折前 <span class="text-gray-7">72.5h</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">M</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">Mia</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded flex-shrink-0">🀄</span>
|
||||
<span class="ml-auto flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded">预估</span>
|
||||
<span class="text-lg font-bold text-gray-13">¥7,500</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 赵先生</span><span>💛 吴女士</span><span>💛 孙总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-gray-10 font-semibold">定档 <b>55.0h</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">糖</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">糖糖</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-gray-400 to-gray-500 text-white text-xs rounded flex-shrink-0">初级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">🎱</span>
|
||||
<span class="ml-auto flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded">预估</span>
|
||||
<span class="text-lg font-bold text-gray-13">¥6,200</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 钱先生</span><span>💛 孙女士</span><span>💛 周总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-gray-10 font-semibold">定档 <b>42.0h</b></span>
|
||||
<span class="text-gray-5">折前 <span class="text-gray-7">45.0h</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">露</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">露露</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded flex-shrink-0">🎤</span>
|
||||
<span class="ml-auto flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded">预估</span>
|
||||
<span class="text-lg font-bold text-gray-13">¥5,100</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 郑先生</span><span>💛 冯女士</span><span>💛 陈总</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-gray-10 font-semibold">定档 <b>38.0h</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- ====== 客源储值最高 ====== -->
|
||||
<div id="dim-sv" class="dim-container p-4 space-y-3">
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">小</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">小燕</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">🎱</span>
|
||||
<span class="ml-auto flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-xs text-gray-6">储值</span>
|
||||
<span class="text-lg font-bold text-gray-13">¥45,200</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 王先生</span><span>💖 李女士</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-gray-7">客户 <b class="text-gray-10">18</b>人</span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span class="text-gray-7">消耗 <b class="text-gray-10">¥8,600</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">泡</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">泡芙</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-purple-400 to-violet-400 text-white text-xs rounded flex-shrink-0">高级</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯</span>
|
||||
<span class="ml-auto flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-xs text-gray-6">储值</span>
|
||||
<span class="text-lg font-bold text-gray-13">¥38,600</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 陈先生</span><span>💛 刘女士</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-gray-7">客户 <b class="text-gray-10">15</b>人</span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span class="text-gray-7">消耗 <b class="text-gray-10">¥6,200</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">A</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">Amy</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">🎱</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯</span>
|
||||
<span class="ml-auto flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-xs text-gray-6">储值</span>
|
||||
<span class="text-lg font-bold text-gray-13">¥32,100</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 张先生</span><span>💛 周女士</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-gray-7">客户 <b class="text-gray-10">14</b>人</span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span class="text-gray-7">消耗 <b class="text-gray-10">¥5,800</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">M</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">Mia</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded flex-shrink-0">🀄</span>
|
||||
<span class="ml-auto flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-xs text-gray-6">储值</span>
|
||||
<span class="text-lg font-bold text-gray-13">¥28,500</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 赵先生</span><span>💛 吴女士</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-gray-7">客户 <b class="text-gray-10">12</b>人</span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span class="text-gray-7">消耗 <b class="text-gray-10">¥4,100</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">糖</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">糖糖</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-gray-400 to-gray-500 text-white text-xs rounded flex-shrink-0">初级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">🎱</span>
|
||||
<span class="ml-auto flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-xs text-gray-6">储值</span>
|
||||
<span class="text-lg font-bold text-gray-13">¥22,000</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 钱先生</span><span>💛 孙女士</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-gray-7">客户 <b class="text-gray-10">10</b>人</span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span class="text-gray-7">消耗 <b class="text-gray-10">¥3,500</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">露</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">露露</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded flex-shrink-0">🎤</span>
|
||||
<span class="ml-auto flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-xs text-gray-6">储值</span>
|
||||
<span class="text-lg font-bold text-gray-13">¥18,300</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 郑先生</span><span>💛 冯女士</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="text-gray-7">客户 <b class="text-gray-10">9</b>人</span>
|
||||
<span class="text-gray-5">|</span>
|
||||
<span class="text-gray-7">消耗 <b class="text-gray-10">¥2,800</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- ====== 任务完成最多 ====== -->
|
||||
<div id="dim-task" class="dim-container p-4 space-y-3">
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">小</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">小燕</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">🎱</span>
|
||||
<span class="ml-auto text-sm text-gray-7 flex-shrink-0">召回 <b class="text-primary text-base">18</b></span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 王先生</span><span>💖 李女士</span><span>💛 赵总</span>
|
||||
</div>
|
||||
<span class="flex-shrink-0 text-gray-7">回访 <b class="text-gray-10">14</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">泡</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">泡芙</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-purple-400 to-violet-400 text-white text-xs rounded flex-shrink-0">高级</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯</span>
|
||||
<span class="ml-auto text-sm text-gray-7 flex-shrink-0">召回 <b class="text-primary text-base">15</b></span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 陈先生</span><span>💛 刘女士</span><span>💛 黄总</span>
|
||||
</div>
|
||||
<span class="flex-shrink-0 text-gray-7">回访 <b class="text-gray-10">13</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">A</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">Amy</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">🎱</span>
|
||||
<span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯</span>
|
||||
<span class="ml-auto text-sm text-gray-7 flex-shrink-0">召回 <b class="text-primary text-base">12</b></span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💖 张先生</span><span>💛 周女士</span><span>💛 吴总</span>
|
||||
</div>
|
||||
<span class="flex-shrink-0 text-gray-7">回访 <b class="text-gray-10">13</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">M</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">Mia</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded flex-shrink-0">🀄</span>
|
||||
<span class="ml-auto text-sm text-gray-7 flex-shrink-0">召回 <b class="text-primary text-base">10</b></span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 赵先生</span><span>💛 吴女士</span><span>💛 孙总</span>
|
||||
</div>
|
||||
<span class="flex-shrink-0 text-gray-7">回访 <b class="text-gray-10">10</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">糖</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">糖糖</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-gray-400 to-gray-500 text-white text-xs rounded flex-shrink-0">初级</span>
|
||||
<span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">🎱</span>
|
||||
<span class="ml-auto text-sm text-gray-7 flex-shrink-0">召回 <b class="text-primary text-base">8</b></span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 钱先生</span><span>💛 孙女士</span><span>💛 周总</span>
|
||||
</div>
|
||||
<span class="flex-shrink-0 text-gray-7">回访 <b class="text-gray-10">10</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white font-semibold text-base">露</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="text-base font-semibold text-gray-13">露露</span>
|
||||
<span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
|
||||
<span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded flex-shrink-0">🎤</span>
|
||||
<span class="ml-auto text-sm text-gray-7 flex-shrink-0">召回 <b class="text-primary text-base">6</b></span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1.5 text-xs">
|
||||
<div class="flex items-center gap-2 text-gray-6 truncate">
|
||||
<span>💛 郑先生</span><span>💛 冯女士</span><span>💛 陈总</span>
|
||||
</div>
|
||||
<span class="flex-shrink-0 text-gray-7">回访 <b class="text-gray-10">9</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮助手按钮 -->
|
||||
|
||||
|
||||
<!-- 通用底部导航 -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1014
docs/h5_ui/rendered/board-customer.html
Normal file
1014
docs/h5_ui/rendered/board-customer.html
Normal file
File diff suppressed because it is too large
Load Diff
1791
docs/h5_ui/rendered/board-finance.html
Normal file
1791
docs/h5_ui/rendered/board-finance.html
Normal file
File diff suppressed because it is too large
Load Diff
167
docs/h5_ui/rendered/chat-history.html
Normal file
167
docs/h5_ui/rendered/chat-history.html
Normal file
@@ -0,0 +1,167 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>助手对话记录 - 球房运营助手</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top, 44px);
|
||||
}
|
||||
.chat-item {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.chat-item:active {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="safe-area-top bg-white sticky top-0 z-10">
|
||||
<div class="h-11 flex items-center relative border-b border-gray-2 px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-gray-10" 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 text-gray-13">助手对话记录</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 对话列表 -->
|
||||
<div class="divide-y divide-gray-100">
|
||||
<!-- 对话记录 1 -->
|
||||
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-11 h-11 bg-gradient-to-br from-primary to-blue-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<h3 class="text-sm font-medium text-gray-13 truncate">如何提升王先生的到店频率？</h3>
|
||||
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">10分钟前</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">共 8 条消息</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 对话记录 2 -->
|
||||
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-11 h-11 bg-gradient-to-br from-success to-green-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<h3 class="text-sm font-medium text-gray-13 truncate">帮我分析本月财务数据</h3>
|
||||
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">2小时前</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">共 15 条消息</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 对话记录 3 -->
|
||||
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-11 h-11 bg-gradient-to-br from-warning to-orange-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<h3 class="text-sm font-medium text-gray-13 truncate">李女士的消费习惯分析</h3>
|
||||
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">昨天</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">共 12 条消息</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 对话记录 4 -->
|
||||
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-11 h-11 bg-gradient-to-br from-primary to-blue-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<h3 class="text-sm font-medium text-gray-13 truncate">如何提高客户满意度？</h3>
|
||||
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">昨天</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">共 20 条消息</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 对话记录 5 -->
|
||||
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-11 h-11 bg-gradient-to-br from-error to-red-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<h3 class="text-sm font-medium text-gray-13 truncate">小燕本月业绩如何？</h3>
|
||||
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">2天前</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">共 6 条消息</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 对话记录 6 -->
|
||||
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-11 h-11 bg-gradient-to-br from-success to-green-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<h3 class="text-sm font-medium text-gray-13 truncate">推荐一些促销活动方案</h3>
|
||||
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">3天前</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">共 25 条消息</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 对话记录 7 -->
|
||||
<a href="chat.html" class="block bg-white px-4 py-4 chat-item">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-11 h-11 bg-gradient-to-br from-warning to-orange-400 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<h3 class="text-sm font-medium text-gray-13 truncate">分析高流失客户群体</h3>
|
||||
<span class="text-xs text-gray-6 flex-shrink-0 ml-2">1周前</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-6">共 18 条消息</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
155
docs/h5_ui/rendered/chat.html
Normal file
155
docs/h5_ui/rendered/chat.html
Normal file
@@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>助手对话 - 球房运营助手</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top, 44px);
|
||||
}
|
||||
.chat-container {
|
||||
height: calc(100vh - 44px - 70px - env(safe-area-inset-top, 44px));
|
||||
overflow-y: auto;
|
||||
}
|
||||
.message-bubble {
|
||||
max-width: 80%;
|
||||
}
|
||||
.voice-btn:active {
|
||||
background: #0052d9;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen flex flex-col">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="safe-area-top bg-white sticky top-0 z-10">
|
||||
<div class="h-11 flex items-center relative border-b border-gray-2 px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-gray-10" 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 text-gray-13">智能助手</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 对话内容区域 -->
|
||||
<div class="chat-container flex-1 p-4 space-y-4">
|
||||
<!-- 引用内容卡片 -->
|
||||
<div class="bg-gray-2 rounded-lg p-3 text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-7 mb-1">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
||||
</svg>
|
||||
<span>来源：任务 - 高优先召回</span>
|
||||
</div>
|
||||
<p class="text-gray-9">王先生 · 最近到店15天前 · VIP客户</p>
|
||||
</div>
|
||||
|
||||
<!-- 用户消息 -->
|
||||
<div class="flex justify-end">
|
||||
<div class="message-bubble bg-primary text-white rounded-2xl rounded-tr-sm px-4 py-3">
|
||||
<p class="text-sm">如何提升这位客户的到店频率？</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 助手消息 -->
|
||||
<div class="flex justify-start gap-2">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-primary to-blue-400 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="message-bubble bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed">
|
||||
根据王先生的消费数据分析，我有以下建议：
|
||||
</p>
|
||||
<ol class="text-sm text-gray-13 leading-relaxed mt-2 list-decimal list-inside space-y-2">
|
||||
<li><strong>个性化邀约</strong>：王先生偏好晚间21:00后到店，建议在这个时间段前发送邀约消息。</li>
|
||||
<li><strong>活动推荐</strong>：他对斯诺克感兴趣，可以推荐即将举办的斯诺克比赛活动。</li>
|
||||
<li><strong>储值提醒</strong>：他的储值余额还有8600元，可以提醒他来消费，避免余额长期闲置。</li>
|
||||
<li><strong>专属服务</strong>：安排他熟悉的助教张三接待，提升服务体验。</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户消息 -->
|
||||
<div class="flex justify-end">
|
||||
<div class="message-bubble bg-primary text-white rounded-2xl rounded-tr-sm px-4 py-3">
|
||||
<p class="text-sm">能帮我生成一条邀约话术吗？</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 助手消息 -->
|
||||
<div class="flex justify-start gap-2">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-primary to-blue-400 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="message-bubble bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed">
|
||||
好的，根据王先生的特点，为您生成以下邀约话术：
|
||||
</p>
|
||||
<div class="mt-3 p-3 bg-primary-light rounded-lg">
|
||||
<p class="text-sm text-primary leading-relaxed">
|
||||
"王哥您好！好久不见了，最近工作顺利吧？😊 我们店里最近新到了几张英国进口的斯诺克球桌，球感特别好，知道您是斯诺克爱好者，第一时间想到邀请您来体验一下。这周末晚上有空吗？我提前给您预留好包厢～"
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2">💡 提示：建议在晚间8点左右发送，这是王先生活跃的时间段。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户消息 -->
|
||||
<div class="flex justify-end">
|
||||
<div class="message-bubble bg-primary text-white rounded-2xl rounded-tr-sm px-4 py-3">
|
||||
<p class="text-sm">太棒了，谢谢！</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 助手消息 -->
|
||||
<div class="flex justify-start gap-2">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-primary to-blue-400 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="message-bubble bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed">
|
||||
不客气！祝您沟通顺利！如果需要更多帮助，随时问我。😊
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区域 -->
|
||||
<div class="bg-white border-t border-gray-2 p-3 pb-6">
|
||||
<div class="flex items-end gap-2">
|
||||
<div class="flex-1 bg-gray-1 rounded-2xl px-4 py-2.5 flex items-center">
|
||||
<input type="text" placeholder="输入消息..." class="flex-1 bg-transparent text-sm text-gray-13 placeholder-gray-6 outline-none">
|
||||
</div>
|
||||
<button class="voice-btn w-10 h-10 bg-gray-1 rounded-full flex items-center justify-center text-gray-7 transition-colors">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/>
|
||||
<path d="M19 10v2a7 7 0 01-14 0v-2"/>
|
||||
<line x1="12" y1="19" x2="12" y2="23"/>
|
||||
<line x1="8" y1="23" x2="16" y2="23"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center text-white">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
487
docs/h5_ui/rendered/coach-detail.html
Normal file
487
docs/h5_ui/rendered/coach-detail.html
Normal file
@@ -0,0 +1,487 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>助教详情 - 球房运营助手</title>
|
||||
|
||||
<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">
|
||||
<link href="../css/coach-detail.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 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>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center text-base font-medium">助教详情</h1>
|
||||
</div>
|
||||
<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 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-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 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>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="p-4 space-y-4">
|
||||
|
||||
<!-- 绩效概览 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<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-xs 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-xs text-gray-5 mt-0.5">折算前 89.0h</p>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-3 border border-green-100/50">
|
||||
<p class="text-xs text-gray-6 mb-1">本月工资（预估）</p>
|
||||
<p class="text-2xl font-bold text-success pv">¥6,950</p>
|
||||
<p class="text-xs text-warning mt-0.5">含预估部分</p>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-orange-50 to-amber-50 rounded-xl p-3 border border-orange-100/50">
|
||||
<p class="text-xs text-gray-6 mb-1">客源储值余额</p>
|
||||
<p class="text-2xl font-bold text-warning pv">¥86,200</p>
|
||||
<p class="text-xs text-gray-5 mt-0.5">68位客户合计</p>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-purple-50 to-violet-50 rounded-xl p-3 border border-purple-100/50">
|
||||
<p class="text-xs 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-xs 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">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="st green text-base font-semibold text-gray-13">收入明细</h2>
|
||||
<div class="flex items-center gap-1">
|
||||
<span id="incomeTab_this" class="income-tab active" onclick="switchIncomeTab('this')">本月<span class="text-[10px] text-warning ml-0.5">预估</span></span>
|
||||
<span id="incomeTab_last" class="income-tab" onclick="switchIncomeTab('last')">上月</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 本月 -->
|
||||
<div id="incomeThisMonth" class="space-y-3">
|
||||
<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-base font-bold text-gray-13 pv">¥3,500</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-success"></span><span class="text-base text-gray-9">激励课时费</span></div>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥1,800</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-warning"></span><span class="text-base text-gray-9">充值提成</span></div>
|
||||
<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 id="incomeLastMonth" class="space-y-3 hidden">
|
||||
<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-base font-bold text-gray-13 pv">¥3,800</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-success"></span><span class="text-base text-gray-9">激励课时费</span></div>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥1,900</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-warning"></span><span class="text-base text-gray-9">充值提成</span></div>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥1,100</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">¥400</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">¥7,200</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 任务执行 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="st orange text-base font-semibold text-gray-13">任务执行</h2>
|
||||
<div class="flex items-center gap-3 text-sm text-gray-7">
|
||||
<span class="font-bold text-gray-10">完成</span>
|
||||
<span class="text-primary font-bold">召回<span class="text-base">24</span>个</span>
|
||||
<span class="text-success font-bold">回访<span class="text-base">14</span>个</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 前6项任务 -->
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-red-50/60 rounded-lg border border-red-100/60">
|
||||
<span class="task-tag-text high-priority flex-shrink-0">高优先召回</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">王先生</span>
|
||||
<button onclick="showNotesPopup('王先生', [{pinned:true,text:'重点客户，每周必须联系',date:'2026-02-06'},{text:'上次来说最近出差多',date:'2026-02-01'}])" class="flex items-center gap-0.5 text-gray-8 flex-shrink-0"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg><span class="text-xs font-medium">2</span></button>
|
||||
<span class="text-sm flex-shrink-0">📌</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-red-50/60 rounded-lg border border-red-100/60">
|
||||
<span class="task-tag-text high-priority flex-shrink-0">高优先召回</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">李女士</span>
|
||||
<span class="text-sm flex-shrink-0">📌</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-red-50/60 rounded-lg border border-red-100/60">
|
||||
<span class="task-tag-text high-priority flex-shrink-0">高优先召回</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">陈女士</span>
|
||||
<button onclick="showNotesPopup('陈女士', [{text:'喜欢斯诺克，周末常来',date:'2026-01-28'}])" class="flex items-center gap-0.5 text-gray-8 flex-shrink-0"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg><span class="text-xs font-medium">1</span></button>
|
||||
<span class="text-sm flex-shrink-0">📌</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-orange-50/40 rounded-lg border border-orange-100/40">
|
||||
<span class="task-tag-text priority flex-shrink-0">优先召回</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">张先生</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-pink-50/40 rounded-lg border border-pink-100/40">
|
||||
<span class="task-tag-text relationship flex-shrink-0">关系构建</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">赵总</span>
|
||||
<button onclick="showNotesPopup('赵总', [{pinned:true,text:'大客户，注意维护关系',date:'2026-02-03'},{text:'上次带了3个朋友来',date:'2026-01-25'},{text:'喜欢VIP包厢',date:'2026-01-15'}])" class="flex items-center gap-0.5 text-gray-8 flex-shrink-0"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg><span class="text-xs font-medium">3</span></button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-teal-50/40 rounded-lg border border-teal-100/40">
|
||||
<span class="task-tag-text callback flex-shrink-0">客户回访</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">周女士</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 隐藏的更多任务 -->
|
||||
<div id="hiddenTasks" class="space-y-2 mt-2 hidden">
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-orange-50/40 rounded-lg border border-orange-100/40">
|
||||
<span class="task-tag-text priority flex-shrink-0">优先召回</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">刘先生</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-teal-50/40 rounded-lg border border-teal-100/40">
|
||||
<span class="task-tag-text callback flex-shrink-0">客户回访</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">孙先生</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-pink-50/40 rounded-lg border border-pink-100/40">
|
||||
<span class="task-tag-text relationship flex-shrink-0">关系构建</span>
|
||||
<span class="text-sm text-gray-13 flex-1 min-w-0 truncate">吴女士</span>
|
||||
</div>
|
||||
<!-- 已放弃 -->
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-gray-50 rounded-lg border border-gray-200 opacity-55">
|
||||
<span class="text-sm text-gray-5 line-through flex-1 min-w-0 truncate">吴先生</span>
|
||||
<span class="text-[10px] text-gray-5">客户拒绝</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5 p-2.5 bg-gray-50 rounded-lg border border-gray-200 opacity-55">
|
||||
<span class="text-sm text-gray-5 line-through flex-1 min-w-0 truncate">郑女士</span>
|
||||
<span class="text-[10px] text-gray-5">超时未响应</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-center">
|
||||
<button id="toggleTasksBtn" onclick="toggleAllTasks()" class="text-sm text-primary font-medium">展开全部 ↓</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 客户关系 TOP5 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="st pink text-base font-semibold text-gray-13">客户关系 TOP5</h2>
|
||||
<span class="text-xs text-gray-6">近60天</span>
|
||||
</div>
|
||||
<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-semibold text-gray-13">王先生</span>
|
||||
<span class="text-xs">❤️</span>
|
||||
<span class="text-sm text-success font-bold pv">9.5</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mt-1 text-xs">
|
||||
<div class="text-gray-6">服务 <span class="text-gray-11 font-semibold">25</span>次</div>
|
||||
<div class="text-gray-6">储值 <span class="text-gray-11 font-semibold">¥8,600</span></div>
|
||||
<div class="text-gray-6">消费 <span class="text-gray-11 font-semibold">¥12,800</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</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-semibold text-gray-13">李女士</span>
|
||||
<span class="text-xs">❤️</span>
|
||||
<span class="text-sm text-success font-bold pv">9.2</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mt-1 text-xs">
|
||||
<div class="text-gray-6">服务 <span class="text-gray-11 font-semibold">22</span>次</div>
|
||||
<div class="text-gray-6">储值 <span class="text-gray-11 font-semibold">¥6,200</span></div>
|
||||
<div class="text-gray-6">消费 <span class="text-gray-11 font-semibold">¥9,500</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</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-semibold text-gray-13">陈女士</span>
|
||||
<span class="text-xs">❤️</span>
|
||||
<span class="text-sm text-warning font-bold pv">8.5</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mt-1 text-xs">
|
||||
<div class="text-gray-6">服务 <span class="text-gray-11 font-semibold">18</span>次</div>
|
||||
<div class="text-gray-6">储值 <span class="text-gray-11 font-semibold">¥5,000</span></div>
|
||||
<div class="text-gray-6">消费 <span class="text-gray-11 font-semibold">¥7,200</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</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-semibold text-gray-13">张先生</span>
|
||||
<span class="text-xs">💛</span>
|
||||
<span class="text-sm text-warning font-bold pv">7.8</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mt-1 text-xs">
|
||||
<div class="text-gray-6">服务 <span class="text-gray-11 font-semibold">12</span>次</div>
|
||||
<div class="text-gray-6">储值 <span class="text-gray-11 font-semibold">¥3,800</span></div>
|
||||
<div class="text-gray-6">消费 <span class="text-gray-11 font-semibold">¥5,600</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</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-semibold text-gray-13">赵先生</span>
|
||||
<span class="text-xs">💛</span>
|
||||
<span class="text-sm text-gray-7 font-bold pv">6.8</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mt-1 text-xs">
|
||||
<div class="text-gray-6">服务 <span class="text-gray-11 font-semibold">8</span>次</div>
|
||||
<div class="text-gray-6">储值 <span class="text-gray-11 font-semibold">¥2,000</span></div>
|
||||
<div class="text-gray-6">消费 <span class="text-gray-11 font-semibold">¥3,200</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</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="service-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm 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">
|
||||
<div class="flex items-center gap-3 text-xs text-gray-7">
|
||||
<span class="px-2 py-0.5 bg-blue-50 text-primary rounded font-medium">A12号台</span>
|
||||
<span>2.5h</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-gray-13 pv">¥200</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 服务记录2 -->
|
||||
<div class="service-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm 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">
|
||||
<div class="flex items-center gap-3 text-xs text-gray-7">
|
||||
<span class="px-2 py-0.5 bg-blue-50 text-primary rounded font-medium">VIP1号房</span>
|
||||
<span>1.5h</span>
|
||||
<span class="text-orange-500">定档绩效：2h</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-gray-13 pv">¥150</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 服务记录3 -->
|
||||
<div class="service-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm 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">
|
||||
<div class="flex items-center gap-3 text-xs text-gray-7">
|
||||
<span class="px-2 py-0.5 bg-blue-50 text-primary rounded font-medium">2号台</span>
|
||||
<span>2h</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-gray-13 pv">¥160</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 服务记录4 -->
|
||||
<div class="service-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm 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">
|
||||
<div class="flex items-center gap-3 text-xs text-gray-7">
|
||||
<span class="px-2 py-0.5 bg-blue-50 text-primary rounded font-medium">5号台</span>
|
||||
<span>1h</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-gray-13 pv">¥80</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-center">
|
||||
<button onclick="window.location.href='performance-records.html'" 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>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center gap-3 px-4 z-10">
|
||||
<button onclick="window.location.href='chat.html'" class="flex-1 h-11 bg-gradient-to-r from-primary to-blue-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-primary/30">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>
|
||||
问问助手
|
||||
</button>
|
||||
<button onclick="showNoteModal()" class="flex-1 h-11 bg-gray-100 text-gray-13 font-medium rounded-xl flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
||||
备注
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 备注弹窗 -->
|
||||
<div id="noteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-end">
|
||||
<div class="w-full bg-white rounded-t-3xl p-5 pb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||
<button onclick="hideNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<textarea id="noteText" class="w-full h-32 p-4 bg-gray-50 rounded-xl resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||
<button onclick="saveNote()" class="w-full h-12 bg-gradient-to-r from-primary to-blue-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-primary/30">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast -->
|
||||
<div id="toast" class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-13/80 text-white text-sm px-6 py-3 rounded-xl z-[100] hidden backdrop-blur-sm"></div>
|
||||
|
||||
<!-- 备注列表弹窗 -->
|
||||
<div id="notesPopup" class="fixed inset-0 bg-black/50 z-50 hidden items-end" onclick="if(event.target===this)hideNotesPopup()">
|
||||
<div class="w-full bg-white rounded-t-3xl p-5 pb-8 max-h-[70vh] overflow-y-auto">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span id="notesPopupTitle" class="text-base font-semibold text-gray-13">备注列表</span>
|
||||
<button onclick="hideNotesPopup()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="notesPopupList" class="space-y-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
430
docs/h5_ui/rendered/customer-detail.html
Normal file
430
docs/h5_ui/rendered/customer-detail.html
Normal file
@@ -0,0 +1,430 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>客户详情 - 球房运营助手</title>
|
||||
|
||||
<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">
|
||||
<link href="../css/ai-icons.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; padding-bottom: 80px; }
|
||||
.st { position: relative; padding-left: 12px; }
|
||||
.st::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; border-radius: 2px; }
|
||||
.st.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
||||
.st.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
||||
.st.orange::before { background: linear-gradient(180deg, #ed7b2f, #ffc107); }
|
||||
.st.pink::before { background: linear-gradient(180deg, #e851a4, #f5a0c0); }
|
||||
.pv { font-variant-numeric: tabular-nums; }
|
||||
.orig-price { text-decoration: line-through; color: #a6a6a6; font-size: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- Banner -->
|
||||
<div class="banner-bg theme-dark-gold texture-aurora relative text-white">
|
||||
<div class="h-11 flex items-center relative px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</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">
|
||||
<span class="text-2xl font-bold text-white">王</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl font-semibold">王先生</span>
|
||||
<span class="px-2 py-0.5 bg-gradient-to-r from-amber-500 to-yellow-400 text-black font-medium rounded-full text-xs">VIP</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||
<span>138****5678</span>
|
||||
<span>VIP20231215</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white/10 rounded-xl backdrop-blur-sm">
|
||||
<div class="grid grid-cols-4">
|
||||
<div class="text-center py-3 border-r border-white/10">
|
||||
<p class="font-medium text-emerald-300 text-sm">¥8,600</p>
|
||||
<p class="text-white/60 text-xs mt-1">储值余额</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-white/10">
|
||||
<p class="font-medium text-sm">¥2,800</p>
|
||||
<p class="text-white/60 text-xs mt-1">60天消费</p>
|
||||
</div>
|
||||
<div class="text-center py-3 border-r border-white/10">
|
||||
<p class="font-medium text-sm">7天</p>
|
||||
<p class="text-white/60 text-xs mt-1">理想间隔</p>
|
||||
</div>
|
||||
<div class="text-center py-3">
|
||||
<p class="font-medium text-amber-300 text-sm">12天</p>
|
||||
<p class="text-white/60 text-xs mt-1">距今到店</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- AI 智能洞察（客户全貌总结） -->
|
||||
<div class="rounded-2xl overflow-hidden shadow-sm">
|
||||
<div class="bg-gradient-to-br from-[#667eea] to-[#764ba2] p-5 text-white">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="w-6 h-6 bg-white/20 rounded-lg flex items-center justify-center">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-white/90">AI 智能洞察</span>
|
||||
</div>
|
||||
<!-- 客户画像总结 -->
|
||||
<p class="text-sm text-white/90 leading-relaxed mb-3">高价值 VIP 客户，月均到店 4-5 次，偏好夜场中式台球，近期对斯诺克产生兴趣。社交属性强，常带固定球搭子，有拉新能力。储值余额充足，对促销活动响应积极。</p>
|
||||
<!-- 营销策略建议 -->
|
||||
<div class="bg-white/10 rounded-xl p-3 backdrop-blur-sm">
|
||||
<p class="text-xs text-white/60 mb-2">📋 当前推荐策略</p>
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="shrink-0 w-1.5 h-1.5 bg-emerald-300 rounded-full mt-1.5"></span>
|
||||
<p class="text-xs text-white/85 leading-relaxed">最后到店距今 12 天，超出理想间隔 7 天，建议尽快安排助教小燕主动联系召回</p>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="shrink-0 w-1.5 h-1.5 bg-amber-300 rounded-full mt-1.5"></span>
|
||||
<p class="text-xs text-white/85 leading-relaxed">客户提到想练斯诺克走位，可推荐斯诺克专项课程包，结合储值优惠提升客单价</p>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="shrink-0 w-1.5 h-1.5 bg-pink-300 rounded-full mt-1.5"></span>
|
||||
<p class="text-xs text-white/85 leading-relaxed">社交属性强，可邀请参加门店球友赛事活动，带动球搭子到店消费</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 维客线索 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="st green text-sm font-semibold text-gray-13">维客线索</h2>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<!-- 线索列表 -->
|
||||
<div class="space-y-2.5">
|
||||
<!-- 客户基础 -->
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-primary/10 text-primary text-[11px] font-medium rounded-sm leading-normal tracking-wide">客户<br>基础</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🎂 生日 3月15日 · VIP会员 · 注册2年</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 消费习惯 -->
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-success/10 text-success text-[11px] font-medium rounded-sm leading-normal tracking-wide">消费<br>习惯</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🌙 常来夜场 · 月均4-5次</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-success/10 text-success text-[11px] font-medium rounded-sm leading-normal tracking-wide">消费<br>习惯</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">💰 高客单价</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">近60天场均消费 ¥420，高于门店均值 ¥180；偏好夜场时段，酒水附加消费占比 35%</p>
|
||||
</div>
|
||||
<!-- 玩法偏好 -->
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-purple-500/10 text-purple-600 text-[11px] font-medium rounded-sm leading-normal tracking-wide">玩法<br>偏好</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🎱 偏爱中式 · 斯诺克进阶中</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 促销接受 -->
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-warning/10 text-warning text-[11px] font-medium rounded-sm leading-normal tracking-wide">促销<br>接受</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🍷 爱点酒水套餐 · 对储值活动敏感</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">最近3次到店均点了酒水套餐；上次 ¥5000 储值活动当天即充值，对满赠类活动响应率高</p>
|
||||
</div>
|
||||
<!-- 社交关系 -->
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-pink-500/10 text-pink-600 text-[11px] font-medium rounded-sm leading-normal tracking-wide">社交<br>关系</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">👥 常带朋友 · 固定球搭子2人</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">近60天 80% 的到店为多人局，常与「李哥」「阿杰」同行；曾介绍2位新客办卡</p>
|
||||
</div>
|
||||
<!-- 重要反馈 -->
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-error/10 text-error text-[11px] font-medium rounded-sm leading-normal tracking-wide">重要<br>反馈</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">⚠️ 上次提到想练斯诺克走位，对球桌维护质量比较在意，建议优先安排VIP房</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:小燕</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 助教任务 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="st blue text-sm font-semibold text-gray-13">助教任务</h2>
|
||||
<span class="text-xs text-gray-6">当前进行中</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<!-- 小燕 - 高优先召回 -->
|
||||
<div class="p-3 bg-gradient-to-br from-red-50/80 to-rose-50/60 rounded-xl border border-red-100/60">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-semibold text-gray-13">小燕</span>
|
||||
<span class="px-2 py-0.5 bg-pink-100 text-pink-700 text-xs rounded-full font-medium">高级助教</span>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 bg-red-100 text-red-700 text-xs rounded-full font-medium">高优先召回</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs text-gray-7 mb-2">
|
||||
<span>上次服务：02-20 21:30 · 2.5h</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<div class="bg-white/80 rounded-lg py-1.5 text-center"><p class="text-[10px] text-gray-6 mb-0.5">近60天次数</p><p class="text-sm font-bold text-primary">18次</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-1.5 text-center"><p class="text-[10px] text-gray-6 mb-0.5">总时长</p><p class="text-sm font-bold text-gray-13">17h</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-1.5 text-center"><p class="text-[10px] text-gray-6 mb-0.5">次均时长</p><p class="text-sm font-bold text-warning">0.9h</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 泡芙 - 关系构建 -->
|
||||
<div class="p-3 bg-gradient-to-br from-pink-50/80 to-fuchsia-50/60 rounded-xl border border-pink-100/60">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-semibold text-gray-13">泡芙</span>
|
||||
<span class="px-2 py-0.5 bg-purple-100 text-purple-700 text-xs rounded-full font-medium">中级助教</span>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 bg-pink-100 text-pink-700 text-xs rounded-full font-medium">关系构建</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs text-gray-7 mb-2">
|
||||
<span>上次服务：02-15 14:00 · 1.5h</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<div class="bg-white/80 rounded-lg py-1.5 text-center"><p class="text-[10px] text-gray-6 mb-0.5">近60天次数</p><p class="text-sm font-bold text-primary">12次</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-1.5 text-center"><p class="text-[10px] text-gray-6 mb-0.5">总时长</p><p class="text-sm font-bold text-gray-13">11h</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-1.5 text-center"><p class="text-[10px] text-gray-6 mb-0.5">次均时长</p><p class="text-sm font-bold text-warning">0.9h</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最喜欢的助教 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="st pink text-sm font-semibold text-gray-13">最喜欢的助教</h2>
|
||||
<span class="text-xs text-gray-6">近60天</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="p-4 bg-gradient-to-br from-pink-50/80 to-rose-50/60 rounded-xl border border-pink-100/60">
|
||||
<div class="flex items-center justify-between mb-2.5">
|
||||
<div class="flex items-center gap-2.5"><span class="text-lg">❤️</span><span class="text-sm font-semibold text-gray-13">小燕</span></div>
|
||||
<div class="flex items-center gap-1.5"><span class="text-xs text-gray-7">关系指数</span><span class="text-lg font-bold text-success">0.92</span></div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mb-1.5 pl-0.5">近60天</p>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-xs text-gray-7 mb-0.5">基础</p><p class="text-base font-bold text-primary">12h</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-xs text-gray-7 mb-0.5">激励</p><p class="text-base font-bold text-warning">5h</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-xs text-gray-7 mb-0.5">上课</p><p class="text-base font-bold text-gray-13">18次</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-xs text-gray-7 mb-0.5">充值</p><p class="text-base font-bold text-success">¥5,000</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bg-gradient-to-br from-amber-50/80 to-yellow-50/60 rounded-xl border border-amber-100/60">
|
||||
<div class="flex items-center justify-between mb-2.5">
|
||||
<div class="flex items-center gap-2.5"><span class="text-lg">💛</span><span class="text-sm font-semibold text-gray-13">泡芙</span></div>
|
||||
<div class="flex items-center gap-1.5"><span class="text-xs text-gray-7">关系指数</span><span class="text-lg font-bold text-warning">0.78</span></div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mb-1.5 pl-0.5">近60天</p>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-xs text-gray-7 mb-0.5">基础</p><p class="text-base font-bold text-primary">8h</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-xs text-gray-7 mb-0.5">激励</p><p class="text-base font-bold text-warning">3h</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-xs text-gray-7 mb-0.5">上课</p><p class="text-base font-bold text-gray-13">12次</p></div>
|
||||
<div class="bg-white/80 rounded-lg py-2 text-center"><p class="text-xs text-gray-7 mb-0.5">充值</p><p class="text-base font-bold text-success">¥3,000</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消费记录（放在最下方） -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="st orange text-sm font-semibold text-gray-13 mb-4">消费记录</h2>
|
||||
<div class="space-y-4">
|
||||
|
||||
<!-- 台桌详情 Record 1：有团购折扣，2位助教，有食品酒水 -->
|
||||
<div class="rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2 flex items-center justify-between border-b border-blue-100/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 bg-primary rounded-full"></span>
|
||||
<span class="text-sm font-semibold text-primary">A12号台</span>
|
||||
</div>
|
||||
<span class="text-sm text-gray-8">2026-02-05</span>
|
||||
</div>
|
||||
<!-- 时间信息：紧凑一行 -->
|
||||
<div class="px-4 py-2.5 border-b border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 text-base">
|
||||
<span class="text-gray-13 font-medium pv">21:30</span>
|
||||
<span class="text-gray-7">→</span>
|
||||
<span class="text-gray-13 font-medium pv">00:50</span>
|
||||
<span class="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded-full font-medium">3h20min</span>
|
||||
</div>
|
||||
<!-- 台费（有团购折扣） -->
|
||||
<div class="text-right flex-shrink-0">
|
||||
<span class="text-base font-bold text-gray-13 pv">¥180</span>
|
||||
<span class="orig-price ml-1">¥240</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 助教列表：一行2个卡片 -->
|
||||
<div class="px-4 py-3">
|
||||
<div class="grid grid-cols-2 gap-2 mb-3">
|
||||
<!-- 助教卡片1：小燕 -->
|
||||
<div class="bg-gray-50 rounded-lg p-2.5">
|
||||
<div class="flex items-center gap-1 mb-0.5">
|
||||
<span class="text-sm font-medium text-gray-13">小燕</span>
|
||||
<span class="px-1 py-px bg-pink-50 text-pink-600 text-[10px] rounded">高级</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-8">基础课 · 2.5h</div>
|
||||
<div class="text-right mt-0.5">
|
||||
<span class="text-sm font-bold text-gray-13 pv">¥200</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 助教卡片2：Amy -->
|
||||
<div class="bg-gray-50 rounded-lg p-2.5">
|
||||
<div class="flex items-center gap-1 mb-0.5">
|
||||
<span class="text-sm font-medium text-gray-13">Amy</span>
|
||||
<span class="px-1 py-px bg-green-50 text-green-600 text-[10px] rounded">初级</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-8">激励课 · 0.5h</div>
|
||||
<div class="flex items-center justify-between mt-0.5">
|
||||
<span class="text-xs text-orange-500">定档绩效：1h</span>
|
||||
<span class="text-sm font-bold text-gray-13 pv">¥50</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 食品酒水 -->
|
||||
<div class="flex items-center justify-between py-2 border-t border-gray-100">
|
||||
<span class="text-sm text-gray-8">🍷 食品酒水</span>
|
||||
<div class="text-right">
|
||||
<span class="text-base font-medium text-warning pv">¥210</span>
|
||||
<span class="orig-price ml-1">¥260</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 总金额 -->
|
||||
<div class="flex items-center justify-between pt-2 border-t border-gray-200">
|
||||
<span class="text-sm font-semibold text-gray-9">总金额</span>
|
||||
<div class="text-right">
|
||||
<span class="text-lg font-bold text-error pv">¥640</span>
|
||||
<span class="orig-price ml-1">¥750</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 台桌详情 Record 2：无食品酒水，有定档绩效，无折扣 -->
|
||||
<div class="rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2 flex items-center justify-between border-b border-blue-100/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 bg-primary rounded-full"></span>
|
||||
<span class="text-sm font-semibold text-primary">888号台</span>
|
||||
</div>
|
||||
<span class="text-sm text-gray-8">2026-02-01</span>
|
||||
</div>
|
||||
<div class="px-4 py-2.5 border-b border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 text-base">
|
||||
<span class="text-gray-13 font-medium pv">14:00</span>
|
||||
<span class="text-gray-7">→</span>
|
||||
<span class="text-gray-13 font-medium pv">16:00</span>
|
||||
<span class="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded-full font-medium">2h00min</span>
|
||||
</div>
|
||||
<span class="text-base font-bold text-gray-13 pv">¥120</span>
|
||||
</div>
|
||||
<div class="px-4 py-3">
|
||||
<div class="grid grid-cols-2 gap-2 mb-3">
|
||||
<div class="bg-gray-50 rounded-lg p-2.5">
|
||||
<div class="flex items-center gap-1 mb-0.5">
|
||||
<span class="text-sm font-medium text-gray-13">泡芙</span>
|
||||
<span class="px-1 py-px bg-purple-50 text-purple-600 text-[10px] rounded">中级</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-8">激励课 · 1.5h</div>
|
||||
<div class="flex items-center justify-between mt-0.5">
|
||||
<span class="text-xs text-orange-500">定档绩效：2h</span>
|
||||
<span class="text-sm font-bold text-gray-13 pv">¥100</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 总金额（无食品酒水，不展示该行） -->
|
||||
<div class="flex items-center justify-between pt-2 border-t border-gray-200">
|
||||
<span class="text-sm font-semibold text-gray-9">总金额</span>
|
||||
<span class="text-lg font-bold text-error pv">¥220</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商城订单 Record 3：有食品酒水 -->
|
||||
<div class="rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-emerald-50 to-green-50 px-4 py-2 flex items-center justify-between border-b border-green-100/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 bg-success rounded-full"></span>
|
||||
<span class="text-sm font-semibold text-success">商城订单</span>
|
||||
</div>
|
||||
<span class="text-sm text-gray-8">2026-01-28</span>
|
||||
</div>
|
||||
<div class="px-4 py-3 space-y-2.5">
|
||||
<!-- 助教卡片列表：同台桌详情风格 -->
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="bg-gray-50 rounded-lg p-2.5">
|
||||
<div class="flex items-center gap-1 mb-0.5">
|
||||
<span class="text-sm font-medium text-gray-13">小燕</span>
|
||||
<span class="px-1 py-px bg-pink-50 text-pink-600 text-[10px] rounded">高级</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-8">基础课 · 1h</div>
|
||||
<div class="text-right mt-0.5">
|
||||
<span class="text-sm font-bold text-gray-13 pv">¥100</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 食品酒水 -->
|
||||
<div class="flex items-center justify-between pt-2 border-t border-gray-100">
|
||||
<span class="text-sm text-gray-8">🍷 食品酒水</span>
|
||||
<span class="text-base font-medium text-warning pv">¥180</span>
|
||||
</div>
|
||||
<!-- 总金额 -->
|
||||
<div class="flex items-center justify-between pt-2 border-t border-gray-200">
|
||||
<span class="text-sm font-semibold text-gray-9">总金额</span>
|
||||
<span class="text-lg font-bold text-error pv">¥280</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center gap-3 px-4">
|
||||
<button onclick="window.location.href='chat.html'" class="flex-1 h-11 bg-gradient-to-r from-primary to-blue-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-primary/30">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>
|
||||
问问助手
|
||||
</button>
|
||||
<button class="flex-1 h-11 bg-gray-100 text-gray-13 font-medium rounded-xl flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
||||
备注
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
186
docs/h5_ui/rendered/customer-service-records.html
Normal file
186
docs/h5_ui/rendered/customer-service-records.html
Normal file
@@ -0,0 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>服务记录 - 球房运营助手</title>
|
||||
|
||||
<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">
|
||||
<link href="../css/customer-service-records.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen pb-8">
|
||||
<!-- 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>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center text-base font-medium">服务记录</h1>
|
||||
</div>
|
||||
<div class="px-5 pt-1 pb-5">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center text-white text-lg font-semibold shadow-lg flex-shrink-0">王</div>
|
||||
<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="text-xs text-white/50">139****5678</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-white/70 text-xs">
|
||||
<span>累计服务 <span class="text-white font-bold text-sm">28</span> 次</span>
|
||||
<span>关系指数 <span class="text-white font-bold text-sm">0.85</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 月份切换 -->
|
||||
<div class="bg-white px-4 py-3 border-b border-gray-2 flex items-center justify-center gap-6">
|
||||
<button id="prevMonthBtn" onclick="switchMonth('prev')" class="p-1.5 rounded-full hover:bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<span id="monthLabel" class="text-sm font-semibold text-gray-13">2026年2月</span>
|
||||
<button id="nextMonthBtn" onclick="switchMonth('next')" class="p-1.5 rounded-full hover:bg-gray-100 opacity-30" disabled>
|
||||
<svg class="w-4 h-4 text-gray-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 6 15 12 9 18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 月度统计概览 -->
|
||||
<div class="px-4 py-3 bg-white border-b border-gray-2">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="text-center flex-1">
|
||||
<p class="text-[10px] text-gray-6 mb-0.5">本月服务</p>
|
||||
<p class="text-lg font-bold text-gray-13 tabnum" id="monthCount">6次</p>
|
||||
</div>
|
||||
<div class="w-px h-10 bg-gray-2 mt-0.5"></div>
|
||||
<div class="text-center flex-1">
|
||||
<p class="text-[10px] text-gray-6 mb-0.5">服务时长</p>
|
||||
<p class="text-lg font-bold text-primary tabnum" id="monthHours">11.5h</p>
|
||||
</div>
|
||||
<div class="w-px h-10 bg-gray-2 mt-0.5"></div>
|
||||
<div class="text-center flex-1">
|
||||
<p class="text-[10px] text-gray-6 mb-0.5">关系指数</p>
|
||||
<p class="text-lg font-bold text-warning tabnum" id="monthDrinks">0.85</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 记录列表 -->
|
||||
<div class="p-4">
|
||||
<div id="recordsList" class="space-y-3">
|
||||
<!-- 2月7日 -->
|
||||
<div class="record-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="record-date">2月7日</span>
|
||||
<span class="record-time">20:00 - 22:30</span>
|
||||
</div>
|
||||
<span class="record-duration">2.5h</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="record-table">A12号台</span>
|
||||
<span class="record-type type-basic">基础课</span>
|
||||
<span class="record-income">¥200</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2月5日 -->
|
||||
<div class="record-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="record-date">2月5日</span>
|
||||
<span class="record-time">15:00 - 17:00</span>
|
||||
</div>
|
||||
<span class="record-duration">2.0h</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="record-table">3号台</span>
|
||||
<span class="record-type type-basic">基础课</span>
|
||||
<span class="record-income">¥160</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2月3日 -->
|
||||
<div class="record-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="record-date">2月3日</span>
|
||||
<span class="record-time">19:30 - 21:30</span>
|
||||
</div>
|
||||
<span class="record-duration">2.0h</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="record-table">VIP1号房</span>
|
||||
<span class="record-type type-vip">包厢课</span>
|
||||
<span class="record-income">¥190</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2月1日 -->
|
||||
<div class="record-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="record-date">2月1日</span>
|
||||
<span class="record-time">20:30 - 22:30</span>
|
||||
</div>
|
||||
<span class="record-duration">2.0h</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="record-table">5号台</span>
|
||||
<span class="record-type type-basic">基础课</span>
|
||||
<span class="record-income">¥160</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 1月28日 -->
|
||||
<div class="record-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="record-date">1月28日</span>
|
||||
<span class="record-time">19:00 - 21:00</span>
|
||||
</div>
|
||||
<span class="record-duration">2.0h</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="record-table">VIP2号房</span>
|
||||
<span class="record-type type-vip">包厢课</span>
|
||||
<span class="record-income">¥190</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 1月22日 -->
|
||||
<div class="record-card">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="record-date">1月22日</span>
|
||||
<span class="record-time">14:00 - 15:00</span>
|
||||
</div>
|
||||
<span class="record-duration">1.0h</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="record-table">8号台</span>
|
||||
<span class="record-type type-tip">打赏课</span>
|
||||
<span class="record-income">¥80</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center py-3">
|
||||
<p class="text-[10px] text-gray-5">— 已加载全部记录 —</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮助手按钮 -->
|
||||
|
||||
|
||||
<!-- 月份切换交互 -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
104
docs/h5_ui/rendered/home-settings.html
Normal file
104
docs/h5_ui/rendered/home-settings.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>首页设置 - 球房运营助手</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top, 44px);
|
||||
}
|
||||
.radio-checked {
|
||||
border-color: #0052d9;
|
||||
background: #0052d9;
|
||||
}
|
||||
.radio-checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.option-card {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.option-card.selected {
|
||||
border-color: #0052d9;
|
||||
background: linear-gradient(135deg, #ecf2fe 0%, #f8faff 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="safe-area-top bg-white sticky top-0 z-10">
|
||||
<div class="h-11 flex items-center relative border-b border-gray-2 px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-gray-10" 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 text-gray-13">首页设置</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 说明文字 -->
|
||||
<div class="px-4 py-4">
|
||||
<p class="text-sm text-gray-7">选择登录后默认显示的首页</p>
|
||||
</div>
|
||||
|
||||
<!-- 选项列表 -->
|
||||
<div class="px-4 space-y-3">
|
||||
<div id="option-task" class="option-card bg-white rounded-2xl p-4 border-2 border-transparent cursor-pointer selected" onclick="selectHome('task')">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-primary to-blue-400 rounded-xl flex items-center justify-center shadow-sm">
|
||||
<svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-base font-medium text-gray-13 mb-1">任务</p>
|
||||
<p class="text-xs text-gray-6">查看待办任务和业绩概览</p>
|
||||
</div>
|
||||
<div id="radio-task" class="w-5 h-5 border-2 border-gray-4 rounded-full relative radio-checked"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="option-board" class="option-card bg-white rounded-2xl p-4 border-2 border-transparent cursor-pointer" onclick="selectHome('board')">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-success to-green-400 rounded-xl flex items-center justify-center shadow-sm">
|
||||
<svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-base font-medium text-gray-13 mb-1">看板</p>
|
||||
<p class="text-xs text-gray-6">查看财务、客户、助教数据</p>
|
||||
</div>
|
||||
<div id="radio-board" class="w-5 h-5 border-2 border-gray-4 rounded-full relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<div class="px-4 py-6">
|
||||
<div class="flex items-start gap-3 p-4 bg-primary/5 rounded-xl">
|
||||
<svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
|
||||
</svg>
|
||||
<p class="text-xs text-gray-7 leading-relaxed">设置会自动保存，切换选项后即刻生效。退出登录后重新登录仍会保持您的设置。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
145
docs/h5_ui/rendered/login.html
Normal file
145
docs/h5_ui/rendered/login.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>登录 - 球房运营助手</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
.bg-gradient-main {
|
||||
background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #ecfeff 100%);
|
||||
}
|
||||
.checkbox-custom {
|
||||
position: relative;
|
||||
}
|
||||
.checkbox-custom:checked {
|
||||
background-color: #0052d9;
|
||||
border-color: #0052d9;
|
||||
}
|
||||
.checkbox-custom:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 1px;
|
||||
width: 5px;
|
||||
height: 9px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.btn-disabled {
|
||||
background-color: #dcdcdc !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
.float-animation {
|
||||
animation: float 4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse-soft {
|
||||
0%, 100% { opacity: 0.4; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
.pulse-soft {
|
||||
animation: pulse-soft 3s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gradient-main min-h-screen flex flex-col">
|
||||
<!-- 装饰元素 -->
|
||||
<div class="absolute top-20 left-8 w-16 h-16 bg-primary/10 rounded-full blur-xl pulse-soft"></div>
|
||||
<div class="absolute top-40 right-6 w-20 h-20 bg-cyan-400/10 rounded-full blur-xl pulse-soft" style="animation-delay: 1s;"></div>
|
||||
<div class="absolute bottom-40 left-12 w-12 h-12 bg-blue-400/10 rounded-full blur-xl pulse-soft" style="animation-delay: 0.5s;"></div>
|
||||
|
||||
<!-- 顶部区域 - Logo 和名称 -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center px-8 relative z-10">
|
||||
<!-- Logo -->
|
||||
<div class="relative mb-6 float-animation">
|
||||
<div class="w-24 h-24 bg-gradient-to-br from-primary to-blue-400 rounded-3xl flex items-center justify-center shadow-xl shadow-primary/30">
|
||||
<svg class="w-14 h-14 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="12" cy="12" r="6" fill="currentColor"/>
|
||||
<circle cx="12" cy="12" r="2" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- 装饰点 -->
|
||||
<div class="absolute -top-1 -right-1 w-4 h-4 bg-cyan-400 rounded-full shadow-lg"></div>
|
||||
<div class="absolute -bottom-2 -left-2 w-3 h-3 bg-blue-300 rounded-full shadow-lg"></div>
|
||||
</div>
|
||||
|
||||
<!-- 应用名称 -->
|
||||
<h1 class="text-2xl font-bold text-gray-13 mb-2">球房运营助手</h1>
|
||||
|
||||
<!-- 产品描述 -->
|
||||
<p class="text-gray-7 text-sm text-center leading-relaxed mb-8">
|
||||
为台球厅提升运营效率的内部管理工具
|
||||
</p>
|
||||
|
||||
<!-- 功能亮点 -->
|
||||
<div class="w-full max-w-sm bg-white/60 backdrop-blur-sm rounded-2xl p-5 mb-6">
|
||||
<div class="grid grid-cols-3 gap-4 text-center">
|
||||
<div>
|
||||
<div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-primary" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-xs text-gray-9 font-medium">任务管理</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="w-10 h-10 bg-success/10 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-success" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-xs text-gray-9 font-medium">数据看板</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="w-10 h-10 bg-warning/10 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-warning" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-xs text-gray-9 font-medium">智能助手</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部区域 - 登录按钮和协议 -->
|
||||
<div class="px-8 pb-10 relative z-10">
|
||||
<!-- 微信登录按钮 -->
|
||||
<button id="loginBtn" class="btn-disabled w-full py-4 rounded-xl text-white font-medium text-base flex items-center justify-center gap-2 transition-all duration-200 shadow-lg">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.32.32 0 0 0 .165-.054l1.9-1.106a.96.96 0 0 1 .465-.116.94.94 0 0 1 .272.04 10.6 10.6 0 0 0 2.822.384c.136 0 .271-.002.405-.009a6.9 6.9 0 0 1-.315-2.053c0-3.694 3.614-6.69 8.076-6.69.233 0 .463.01.691.027C16.964 4.837 13.132 2.188 8.691 2.188zm-2.97 5.28a1.03 1.03 0 1 1 0-2.06 1.03 1.03 0 0 1 0 2.06zm5.96 0a1.03 1.03 0 1 1 0-2.06 1.03 1.03 0 0 1 0 2.06zM24 14.2c0-3.355-3.4-6.08-7.59-6.08s-7.59 2.725-7.59 6.08c0 3.356 3.4 6.08 7.59 6.08.772 0 1.515-.094 2.215-.268a.77.77 0 0 1 .224-.033.79.79 0 0 1 .382.095l1.565.912a.26.26 0 0 0 .135.044c.13 0 .238-.108.238-.242 0-.06-.024-.117-.04-.175l-.32-1.218a.48.48 0 0 1 .175-.547C22.95 17.89 24 16.165 24 14.2zm-10.14-.426a.85.85 0 1 1 0-1.7.85.85 0 0 1 0 1.7zm5.1 0a.85.85 0 1 1 0-1.7.85.85 0 0 1 0 1.7z"/>
|
||||
</svg>
|
||||
使用微信登录
|
||||
</button>
|
||||
|
||||
<!-- 协议勾选 -->
|
||||
<div class="flex items-start gap-3 mt-5">
|
||||
<input type="checkbox" id="agreeCheckbox" class="checkbox-custom w-4 h-4 mt-0.5 border-2 border-gray-4 rounded appearance-none cursor-pointer transition-all duration-200 flex-shrink-0">
|
||||
<label for="agreeCheckbox" class="text-xs text-gray-7 leading-relaxed cursor-pointer">
|
||||
我已阅读并同意
|
||||
<a href="#" class="text-primary font-medium">《用户协议》</a>
|
||||
和
|
||||
<a href="#" class="text-primary font-medium">《隐私政策》</a>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- 底部说明 -->
|
||||
<p class="text-xs text-gray-5 text-center mt-6">
|
||||
仅限球房内部员工使用
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
113
docs/h5_ui/rendered/my-profile.html
Normal file
113
docs/h5_ui/rendered/my-profile.html
Normal file
@@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>我的 - 球房运营助手</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top, 44px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="safe-area-top bg-white">
|
||||
<div class="h-11 flex items-center justify-center relative border-b border-gray-2">
|
||||
<h1 class="text-base font-medium text-gray-13">我的</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户信息区域 -->
|
||||
<div class="bg-white p-6 flex items-center gap-4">
|
||||
<div class="w-16 h-16 rounded-full overflow-hidden shadow-lg">
|
||||
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-lg font-semibold text-gray-13">小燕</span>
|
||||
<span class="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded">助教</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7">广州朗朗桌球</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 菜单列表 -->
|
||||
<div class="mt-4">
|
||||
<a href="notes.html" class="flex items-center justify-between bg-white px-4 py-4 border-b border-gray-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm text-gray-13">备注记录</span>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="chat-history.html" class="flex items-center justify-between bg-white px-4 py-4 border-b border-gray-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-success/10 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-success" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm text-gray-13">助手对话记录</span>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<button onclick="showLogoutModal()" class="w-full flex items-center justify-between bg-white px-4 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-error/10 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
|
||||
<polyline points="16 17 21 12 16 7"/>
|
||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm text-gray-13">退出账号</span>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 退出确认弹窗 -->
|
||||
<div id="logoutModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
|
||||
<div class="bg-white rounded-2xl w-72 overflow-hidden">
|
||||
<div class="p-6 text-center">
|
||||
<h3 class="text-base font-medium text-gray-13 mb-2">确认退出</h3>
|
||||
<p class="text-sm text-gray-7">确认退出当前账号吗？</p>
|
||||
</div>
|
||||
<div class="flex border-t border-gray-2">
|
||||
<button onclick="hideLogoutModal()" class="flex-1 py-3 text-sm text-gray-7 border-r border-gray-2">取消</button>
|
||||
<button onclick="logout()" class="flex-1 py-3 text-sm text-error font-medium">退出</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮助手按钮 -->
|
||||
|
||||
|
||||
<!-- 通用底部导航 -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
109
docs/h5_ui/rendered/no-permission.html
Normal file
109
docs/h5_ui/rendered/no-permission.html
Normal file
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>无权限 - 球房运营助手</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
.bg-pattern {
|
||||
background-color: #f8fafc;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e34d59' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
25% { transform: rotate(-5deg); }
|
||||
75% { transform: rotate(5deg); }
|
||||
}
|
||||
.shake-animation {
|
||||
animation: shake 0.5s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-pattern min-h-screen flex flex-col">
|
||||
<!-- 顶部装饰 -->
|
||||
<div class="absolute top-0 left-0 right-0 h-64 bg-gradient-to-b from-error/10 to-transparent"></div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center px-8 relative z-10">
|
||||
<!-- 图标区域 -->
|
||||
<div class="relative mb-8">
|
||||
<!-- 背景光晕 -->
|
||||
<div class="absolute inset-0 w-32 h-32 bg-error/20 rounded-full blur-xl"></div>
|
||||
|
||||
<!-- 主图标 -->
|
||||
<div class="relative w-28 h-28 bg-gradient-to-br from-rose-400 to-red-500 rounded-3xl flex items-center justify-center shadow-xl shadow-error/30">
|
||||
<svg class="w-14 h-14 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 装饰点 -->
|
||||
<div class="absolute -top-2 -right-2 w-4 h-4 bg-error rounded-full opacity-60"></div>
|
||||
<div class="absolute -bottom-1 -left-3 w-3 h-3 bg-rose-300 rounded-full opacity-60"></div>
|
||||
</div>
|
||||
|
||||
<!-- 文字区域 -->
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-2xl font-bold text-gray-10 mb-3">无访问权限</h1>
|
||||
<p class="text-sm text-gray-7 leading-relaxed max-w-xs mx-auto">
|
||||
很抱歉，您的访问申请未通过审核，或当前账号无访问权限
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 原因说明卡片 -->
|
||||
<div class="w-full max-w-sm bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50 mb-6">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="w-10 h-10 bg-error/10 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-error" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-13 mb-1">可能的原因</p>
|
||||
<ul class="text-xs text-gray-6 space-y-1">
|
||||
<li>• 申请信息不完整或不符合要求</li>
|
||||
<li>• 非本店授权员工账号</li>
|
||||
<li>• 账号权限已被管理员收回</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-4 border-t border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-6">请联系管理员</span>
|
||||
<span class="text-sm text-gray-13 font-medium">厉超</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 帮助提示 -->
|
||||
<div class="flex items-center gap-2 text-gray-6 mb-8">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>
|
||||
</svg>
|
||||
<span class="text-xs">如有疑问，请联系管理员重新申请</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="px-8 pb-12">
|
||||
<button onclick="switchAccount()" class="w-full py-3.5 bg-white border border-gray-200 rounded-xl text-gray-9 font-medium text-sm flex items-center justify-center gap-2 shadow-sm">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
|
||||
<polyline points="16 17 21 12 16 7"/>
|
||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||
</svg>
|
||||
更换登录账号
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
139
docs/h5_ui/rendered/notes.html
Normal file
139
docs/h5_ui/rendered/notes.html
Normal file
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>备注 - 球房运营助手</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="../css/notes.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="safe-area-top bg-white sticky top-0 z-10">
|
||||
<div class="h-11 flex items-center relative border-b border-gray-2 px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-gray-10" 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 text-gray-13">备注</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备注列表（按时间由近及远） -->
|
||||
<div class="p-4 space-y-3">
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
小燕本月表现优秀，课时完成率达到120%，客户评价全部5星。建议下月提升课时费标准，同时安排更多VIP客户给她。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="note-tag tag-coach">助教：小燕</span>
|
||||
<span class="text-xs text-gray-6">2024-11-27 16:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
客户今天表示下周有朋友生日聚会，想预约包厢。已告知包厢需要提前3天预约，客户说会尽快确定时间再联系。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="note-tag tag-customer">客户：王先生</span>
|
||||
<span class="text-xs text-gray-6">2024-11-27 15:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
完成高优先召回任务。客户反馈最近工作太忙，这周末会来店里。已提醒客户储值卡还有2000元余额，下月到期需要续费。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="note-tag tag-customer">客户：王先生</span>
|
||||
<span class="text-xs text-gray-6">2024-11-26 18:45</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
Amy最近工作状态很好，主动承担了培训新员工的任务。但需要注意她最近加班较多，避免过度疲劳。建议适当调整排班。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="note-tag tag-coach">助教：Amy</span>
|
||||
<span class="text-xs text-gray-6">2024-11-26 11:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
泡芙本月表现优秀，课时完成率达到120%，客户评价全部5星。建议下月提升课时费标准。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="note-tag tag-customer">客户：陈女士</span>
|
||||
<span class="text-xs text-gray-6">2024-11-25 10:20</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
泡芙的斯诺克教学水平有明显提升，最近几位客户反馈都很好。可以考虑让她带更多斯诺克方向的课程。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="note-tag tag-coach">助教：泡芙</span>
|
||||
<span class="text-xs text-gray-6">2024-11-25 14:20</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
客户对今天的服务非常满意，特别提到小燕的教学很专业。客户表示会推荐朋友来店里体验。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="note-tag tag-customer">客户：李女士</span>
|
||||
<span class="text-xs text-gray-6">2024-11-24 21:15</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
小燕反馈近期有几位客户希望增加晚间时段的课程，建议协调排班，增加21:00-23:00时段的助教配置。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="note-tag tag-coach">助教：小燕</span>
|
||||
<span class="text-xs text-gray-6">2024-11-24 09:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
关系构建任务完成。与客户进行了30分钟的深入交流，了解到客户是企业高管，经常需要商务宴请场地。已记录客户需求，后续可以推荐团建套餐。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="note-tag tag-customer">客户：张先生</span>
|
||||
<span class="text-xs text-gray-6">2024-11-23 19:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
客户今天充值了5000元，选择的是尊享套餐。客户提到喜欢安静的环境，以后尽量安排包厢。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="note-tag tag-customer">客户：张先生</span>
|
||||
<span class="text-xs text-gray-6">2024-11-22 14:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
Amy本周请假2天处理家事，已安排泡芙和小燕分担她的客户。回来后需要跟进客户交接情况。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="note-tag tag-coach">助教：Amy</span>
|
||||
<span class="text-xs text-gray-6">2024-11-22 10:15</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed mb-3">
|
||||
Amy最近工作状态很好，主动承担了培训新员工的任务。但需要注意她最近加班较多，避免过度疲劳。
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="note-tag tag-customer">客户：李女士</span>
|
||||
<span class="text-xs text-gray-6">2024-11-21 09:45</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
789
docs/h5_ui/rendered/performance-records.html
Normal file
789
docs/h5_ui/rendered/performance-records.html
Normal file
@@ -0,0 +1,789 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>业绩明细 - 球房运营助手</title>
|
||||
|
||||
<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">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
.record-item {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.record-item:active {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.perf-value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.date-divider {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 16px 4px;
|
||||
}
|
||||
.date-divider .dd-line {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: #dcdcdc;
|
||||
}
|
||||
.date-divider .dd-date {
|
||||
font-size: 11px;
|
||||
color: #8b8b8b;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.date-divider .dd-stats {
|
||||
font-size: 11px;
|
||||
color: #a6a6a6;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen pb-8">
|
||||
<!-- 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-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>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center text-base font-medium">业绩明细</h1>
|
||||
</div>
|
||||
<div class="px-5 pt-1 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 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-xs">
|
||||
<span>球会名称店</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 月份切换 -->
|
||||
<div class="bg-white px-4 py-3 border-b border-gray-2 flex items-center justify-center gap-6">
|
||||
<button id="prevMonthBtn" onclick="switchMonth('prev')" class="p-1.5 rounded-full hover:bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<span id="monthLabel" class="text-sm font-semibold text-gray-13">2026年2月</span>
|
||||
<button id="nextMonthBtn" onclick="switchMonth('next')" class="p-1.5 rounded-full hover:bg-gray-100 opacity-30" disabled>
|
||||
<svg class="w-4 h-4 text-gray-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 6 15 12 9 18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 统计概览 -->
|
||||
<div class="px-4 py-3 bg-white border-b border-gray-2">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="text-center flex-1">
|
||||
<p class="text-[10px] text-gray-6 mb-0.5">总记录</p>
|
||||
<p class="text-lg font-bold text-gray-13 perf-value" id="totalCount">32笔</p>
|
||||
</div>
|
||||
<div class="w-px h-10 bg-gray-2 mt-0.5"></div>
|
||||
<div class="text-center flex-1">
|
||||
<p class="text-[10px] text-gray-6 mb-0.5">总业绩时长</p>
|
||||
<p class="text-lg font-bold text-primary perf-value" id="totalMinutes">59.0h</p>
|
||||
<p class="text-[10px] text-gray-5">折算前 60.5h</p>
|
||||
<p class="text-[10px] text-warning">预估</p>
|
||||
</div>
|
||||
<div class="w-px h-10 bg-gray-2 mt-0.5"></div>
|
||||
<div class="text-center flex-1">
|
||||
<p class="text-[10px] text-gray-6 mb-0.5">收入</p>
|
||||
<p class="text-lg font-bold text-success perf-value" id="totalIncome">¥4,720</p>
|
||||
<p class="text-[10px] text-warning">预估</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 记录列表 -->
|
||||
<div class="p-4">
|
||||
<div id="recordsList" class="bg-white rounded-2xl shadow-sm overflow-hidden">
|
||||
<!-- 2月7日 -->
|
||||
<div class="date-divider"><span class="dd-date">2月7日</span><div class="dd-line"></div><span class="dd-stats">时长 6.0h · 预估收入 ¥510</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">王</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<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 px-4 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="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-teal-400 to-emerald-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">陈</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<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">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>
|
||||
<!-- 2月6日 -->
|
||||
<div class="date-divider"><span class="dd-date">2月6日</span><div class="dd-line"></div><span class="dd-stats">时长 3.5h · 预估收入 ¥280</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-green-400 to-teal-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">张</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<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 class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-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>
|
||||
<!-- 2月5日 -->
|
||||
<div class="date-divider"><span class="dd-date">2月5日</span><div class="dd-line"></div><span class="dd-stats">时长 4.0h · 预估收入 ¥320</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-teal-400 to-emerald-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">陈</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<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 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">赵</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<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">(折0.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-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>
|
||||
<!-- 2月4日 -->
|
||||
<div class="date-divider"><span class="dd-date">2月4日</span><div class="dd-line"></div><span class="dd-stats">时长 4.0h · 预估收入 ¥350</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-violet-400 to-purple-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">孙</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<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 px-4 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>
|
||||
<!-- 2月3日 -->
|
||||
<div class="date-divider"><span class="dd-date">2月3日</span><div class="dd-line"></div><span class="dd-stats">时长 3.5h · 预估收入 ¥280</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-amber-400 to-yellow-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">郑</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<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 px-4 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>
|
||||
<!-- 2月2日 -->
|
||||
<div class="date-divider"><span class="dd-date">2月2日</span><div class="dd-line"></div><span class="dd-stats">时长 4.0h · 预估收入 ¥350</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-fuchsia-400 to-pink-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">林</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<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 px-4 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>
|
||||
<!-- 2月1日 -->
|
||||
<div class="date-divider"><span class="dd-date">2月1日</span><div class="dd-line"></div><span class="dd-stats">时长 6.0h · 预估收入 ¥510</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">王</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<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 px-4 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 px-4 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">(折0.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-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 px-4 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 px-4 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 px-4 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>
|
||||
<!-- 1月31日 -->
|
||||
<div class="date-divider"><span class="dd-date">1月31日</span><div class="dd-line"></div><span class="dd-stats">时长 5.5h · 收入 ¥470</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-cyan-400 to-sky-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">韩</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<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 px-4 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">(折0.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-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 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-yellow-400 to-orange-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>
|
||||
</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>
|
||||
<!-- 1月30日 -->
|
||||
<div class="date-divider"><span class="dd-date">1月30日</span><div class="dd-line"></div><span class="dd-stats">时长 3.5h · 收入 ¥280</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-green-400 to-teal-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">张</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<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 class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-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>
|
||||
<!-- 1月29日 -->
|
||||
<div class="date-divider"><span class="dd-date">1月29日</span><div class="dd-line"></div><span class="dd-stats">时长 4.0h · 收入 ¥320</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-teal-400 to-emerald-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">陈</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<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 px-4 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">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">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>
|
||||
<!-- 1月28日 -->
|
||||
<div class="date-divider"><span class="dd-date">1月28日</span><div class="dd-line"></div><span class="dd-stats">时长 4.0h · 收入 ¥350</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">赵</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<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">(折0.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-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="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-blue-300 to-purple-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">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>
|
||||
<!-- 1月27日 -->
|
||||
<div class="date-divider"><span class="dd-date">1月27日</span><div class="dd-line"></div><span class="dd-stats">时长 4.0h · 收入 ¥350</span></div>
|
||||
<div class="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-violet-400 to-purple-500 flex items-center justify-center text-white text-sm font-medium shadow-sm flex-shrink-0">孙</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<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="record-item flex items-center gap-3 px-4 py-2.5">
|
||||
<div class="w-[38px] h-[38px] rounded-lg bg-gradient-to-br from-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: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="px-4 py-4 text-center"><p class="text-[10px] text-gray-5">— 已加载全部记录 —</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮助手按钮 -->
|
||||
|
||||
|
||||
<!-- 月份切换交互 -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1932
docs/h5_ui/rendered/performance.html
Normal file
1932
docs/h5_ui/rendered/performance.html
Normal file
File diff suppressed because it is too large
Load Diff
129
docs/h5_ui/rendered/reviewing.html
Normal file
129
docs/h5_ui/rendered/reviewing.html
Normal file
@@ -0,0 +1,129 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>审核中 - 球房运营助手</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
.bg-pattern {
|
||||
background-color: #f8fafc;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230052d9' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
.float-animation {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse-soft {
|
||||
0%, 100% { opacity: 0.6; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
.pulse-soft {
|
||||
animation: pulse-soft 2s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-pattern min-h-screen flex flex-col">
|
||||
<!-- 顶部装饰 -->
|
||||
<div class="absolute top-0 left-0 right-0 h-64 bg-gradient-to-b from-warning/10 to-transparent"></div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center px-8 relative z-10">
|
||||
<!-- 图标区域 -->
|
||||
<div class="relative mb-8 float-animation">
|
||||
<!-- 背景光晕 -->
|
||||
<div class="absolute inset-0 w-32 h-32 bg-warning/20 rounded-full blur-xl"></div>
|
||||
|
||||
<!-- 主图标 -->
|
||||
<div class="relative w-28 h-28 bg-gradient-to-br from-amber-400 to-orange-500 rounded-3xl flex items-center justify-center shadow-xl shadow-warning/30">
|
||||
<svg class="w-14 h-14 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="12 6 12 12 16 14"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 装饰点 -->
|
||||
<div class="absolute -top-2 -right-2 w-4 h-4 bg-warning rounded-full pulse-soft"></div>
|
||||
<div class="absolute -bottom-1 -left-3 w-3 h-3 bg-amber-300 rounded-full pulse-soft" style="animation-delay: 0.5s;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 文字区域 -->
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-2xl font-bold text-gray-10 mb-3">申请审核中</h1>
|
||||
<p class="text-sm text-gray-7 leading-relaxed max-w-xs mx-auto">
|
||||
您的访问申请已提交成功，正在等待管理员审核，请耐心等待
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 进度提示卡片 -->
|
||||
<div class="w-full max-w-sm bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50 mb-6">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-10 h-10 bg-warning/10 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-warning" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-13">审核进度</p>
|
||||
<p class="text-xs text-gray-6">通常需要 1-3 个工作日</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 bg-success rounded-full flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-xs text-gray-9">已提交</span>
|
||||
</div>
|
||||
<div class="flex-1 h-0.5 bg-gray-200">
|
||||
<div class="h-full w-1/2 bg-warning rounded-full"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 bg-warning/20 rounded-full flex items-center justify-center">
|
||||
<div class="w-2 h-2 bg-warning rounded-full pulse-soft"></div>
|
||||
</div>
|
||||
<span class="text-xs text-gray-6">审核中</span>
|
||||
</div>
|
||||
<div class="flex-1 h-0.5 bg-gray-200"></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 bg-gray-100 rounded-full"></div>
|
||||
<span class="text-xs text-gray-5">通过</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 联系提示 -->
|
||||
<div class="flex items-center gap-2 text-gray-6 mb-8">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
<span class="text-xs">如有疑问，请联系管理员</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="px-8 pb-12">
|
||||
<button onclick="switchAccount()" class="w-full py-3.5 bg-white border border-gray-200 rounded-xl text-gray-9 font-medium text-sm flex items-center justify-center gap-2 shadow-sm">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
|
||||
<polyline points="16 17 21 12 16 7"/>
|
||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||
</svg>
|
||||
更换登录账号
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
356
docs/h5_ui/rendered/task-detail-callback.html
Normal file
356
docs/h5_ui/rendered/task-detail-callback.html
Normal file
@@ -0,0 +1,356 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>任务详情 - 客户回访</title>
|
||||
|
||||
<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">
|
||||
<link href="../css/task-detail.css" rel="stylesheet">
|
||||
<link href="../css/ai-icons.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 通栏 Banner - 客户信息 -->
|
||||
<div class="banner-bg theme-teal 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-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg">
|
||||
<span class="text-2xl font-bold text-white">赵</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl font-semibold">赵女士</span>
|
||||
<span class="px-2 py-0.5 bg-white/25 backdrop-blur-sm text-white rounded-full text-xs font-medium">客户回访</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||
<span>135****6677</span>
|
||||
<button onclick="this.previousElementSibling.textContent='13566776677';this.style.display='none'" class="px-2 py-0.5 bg-white/20 rounded text-white/90 text-xs">查看</button>
|
||||
<span>💰 储值 <span style="background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600;">非常多</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- 维客线索 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title green text-sm font-semibold text-gray-13">维客线索</h2>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="space-y-2.5">
|
||||
<!-- 客户基础 -->
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-primary/10 text-primary text-[11px] font-medium rounded-sm leading-normal tracking-wide">客户<br>基础</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">👩 女性 · VIP会员 · 入会1年半 · 忠实老客户</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 消费习惯 -->
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-success/10 text-success text-[11px] font-medium rounded-sm leading-normal tracking-wide">消费<br>习惯</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">☀️ 偏好周末下午 · 月均6-8次</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-success/10 text-success text-[11px] font-medium rounded-sm leading-normal tracking-wide">消费<br>习惯</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">💰 高客单价 · 爱点酒水</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">场均消费 ¥420，高于门店均值 ¥180；酒水小食附加消费占比 40%，偏好VIP包厢</p>
|
||||
</div>
|
||||
<!-- 玩法偏好 -->
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-purple-500/10 text-purple-600 text-[11px] font-medium rounded-sm leading-normal tracking-wide">玩法<br>偏好</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🎱 斯诺克爱好者 · 技术中上 · 喜欢研究杆法</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">斯诺克占比 85%，偶尔玩中式八球；对高级杆法有浓厚兴趣，正在学习走位技巧</p>
|
||||
</div>
|
||||
<!-- 重要反馈 -->
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-error/10 text-error text-[11px] font-medium rounded-sm leading-normal tracking-wide">重要<br>反馈</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">⭐ 上次服务好评，新球杆手感满意</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:小燕</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">2月4日到店时表示新球杆手感很好，希望下次能提前预留VIP包厢；满意度持续保持高位</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 与我的关系 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13">与我的关系</h2>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<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-pink-500 to-rose-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-pink-400 to-rose-500 rounded-full" style="width: 88%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-lg font-bold text-pink-500">0.88</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed mb-4">
|
||||
长期合作关系良好，共有 45 次服务记录。客户多次指定您服务，评价均为 5 星。是您的核心客户之一，需要持续维护。
|
||||
</p>
|
||||
<!-- 近期服务记录 -->
|
||||
<div class="svc-section-bg">
|
||||
<p class="text-sm font-semibold text-gray-13 mb-3">📋 近期服务记录</p>
|
||||
<div>
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">VIP2号房</span>
|
||||
<span class="svc-type basic">基础课</span>
|
||||
<span class="svc-duration">2.0h</span>
|
||||
</div>
|
||||
<span class="svc-income">¥190</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 红牛x2 花生米x1</span>
|
||||
<span class="svc-date">2026-02-04 15:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">8号台</span>
|
||||
<span class="svc-type incentive">激励课</span>
|
||||
<span class="svc-duration">1.5h</span>
|
||||
</div>
|
||||
<span class="svc-income">¥120</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 可乐x2</span>
|
||||
<span class="svc-date">2026-01-30 16:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">VIP2号房</span>
|
||||
<span class="svc-type basic">基础课</span>
|
||||
<span class="svc-duration">2.5h</span>
|
||||
</div>
|
||||
<span class="svc-income">¥200</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 百威x3 薯条x1</span>
|
||||
<span class="svc-date">2026-01-25 14:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-center">
|
||||
<button onclick="window.location.href='customer-service-records.html'" class="text-xs text-primary font-medium">查看全部服务记录 →</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 任务建议 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title purple text-sm font-semibold text-gray-13 mb-4">任务建议</h2>
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-100">
|
||||
<p class="text-sm text-primary leading-relaxed font-medium mb-3">
|
||||
<span class="flex items-center justify-between">
|
||||
<span>📞 常规回访要点</span>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed mb-2">
|
||||
该客户上次到店是 3 天前，关系良好，进行常规关怀回访：
|
||||
</p>
|
||||
<ul class="text-sm text-gray-9 space-y-1.5 list-disc list-inside">
|
||||
<li>询问上次体验是否满意，是否有改进建议</li>
|
||||
<li>告知近期新到的斯诺克相关设备或活动</li>
|
||||
<li>提前预约下次到店时间，提供专属服务</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-4 p-4 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-medium text-gray-13 text-sm">💬 话术参考</span>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"赵姐您好！上次打球感觉怎么样？新到的球杆手感还习惯吗？这周末您有空的话，可以提前帮您预留老位置~"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"赵姐，最近店里新进了一批斯诺克专用巧克粉，手感特别好，下次来的时候可以试试~"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"赵姐好呀，上次您说想学几个高级杆法，我最近整理了一些教学视频，要不要发给您先看看？"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"赵姐，这周六下午VIP包厢有空位，要不要帮您提前预留？可以叫上朋友一起来打球~"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"赵姐您好，我们下个月有个会员积分兑换活动，您的积分可以换不少好东西，到时候提醒您哦~"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我给TA的备注 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13">我给TA的备注</h2>
|
||||
<span class="text-xs text-gray-6">2 条备注</span>
|
||||
</div>
|
||||
<div id="noteList" class="space-y-3">
|
||||
<div class="note-card-wrap flex items-start gap-3 p-3.5 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-xs text-gray-6 mb-1.5">2026-02-07</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed">赵姐反馈上次体验很满意，新球杆手感不错，希望下次能预留VIP包厢。</p>
|
||||
</div>
|
||||
<div class="star-rating" data-score="9"><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:50%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span></div>
|
||||
<button onclick="confirmDeleteNote()" class="shrink-0 w-7 h-7 flex items-center justify-center rounded-lg bg-white border border-gray-200 text-gray-5">
|
||||
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="note-card-wrap flex items-start gap-3 p-3.5 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-xs text-gray-6 mb-1.5">2026-01-25</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed">已预约本周六下午到店，需要提前安排靠窗位置。</p>
|
||||
</div>
|
||||
<div class="star-rating" data-score="9"><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:50%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span></div>
|
||||
<button onclick="confirmDeleteNote()" class="shrink-0 w-7 h-7 flex items-center justify-center rounded-lg bg-white border border-gray-200 text-gray-5">
|
||||
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="noteEmpty" class="text-center py-6 hidden">
|
||||
<svg class="w-10 h-10 text-gray-4 mx-auto mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
<p class="text-sm text-gray-5">暂无备注</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center gap-3 px-4">
|
||||
<button onclick="window.location.href='chat.html'" class="flex-1 h-11 bg-gradient-to-r from-teal-500 to-cyan-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-teal-500/30">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
问问助手
|
||||
</button>
|
||||
<button onclick="showNoteModal()" class="flex-1 h-11 bg-gray-100 text-gray-13 font-medium rounded-xl flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
备注
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 备注弹窗 -->
|
||||
<div id="noteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-end">
|
||||
<div class="w-full bg-white rounded-t-3xl p-5 pb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||
<button id="noteExpandBtn" onclick="expandNoteRating()" class="note-expand-btn">展开评价 ▾</button>
|
||||
</div>
|
||||
<button onclick="hideNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="noteRatingSection" class="hidden">
|
||||
<!-- 星星打分：再次服务意愿 -->
|
||||
<div class="note-rating-group">
|
||||
<span class="note-rating-label">再次服务此客户</span>
|
||||
<div class="note-rating-right">
|
||||
<div class="note-rating-row" data-score="0">
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
</div>
|
||||
<div class="note-rating-hints"><span>不想</span><span></span><span>一般</span><span></span><span>非常想</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 星星打分：再来店可能性 -->
|
||||
<div class="note-rating-group">
|
||||
<span class="note-rating-label">再来店可能性</span>
|
||||
<div class="note-rating-right">
|
||||
<div class="note-rating-row" data-score="0">
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
</div>
|
||||
<div class="note-rating-hints"><span>不可能</span><span></span><span>不好说</span><span></span><span>肯定能</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<textarea id="noteText" class="w-full h-32 p-4 bg-gray-50 rounded-xl resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||
<button onclick="saveNote()" class="w-full h-12 bg-gradient-to-r from-teal-500 to-cyan-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-teal-500/30">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 删除备注确认弹窗 -->
|
||||
<div id="deleteNoteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center px-6">
|
||||
<div class="w-full max-w-sm bg-white rounded-2xl p-5 shadow-xl">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-base font-semibold text-gray-13">删除备注</span>
|
||||
<button onclick="hideDeleteNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 mb-5">确定要删除这条备注吗？删除后无法恢复。</p>
|
||||
<button onclick="deleteNote()" class="w-full h-12 bg-gradient-to-r from-error to-red-400 text-white font-medium rounded-xl shadow-lg shadow-error/30 text-sm">确认删除</button>
|
||||
<button onclick="hideDeleteNoteModal()" class="w-full text-center text-sm text-gray-6 py-2 mt-2 bg-transparent border-0 cursor-pointer">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast 提示 -->
|
||||
<div id="toast" class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-13/80 text-white text-sm px-6 py-3 rounded-xl z-[100] hidden backdrop-blur-sm"></div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
356
docs/h5_ui/rendered/task-detail-priority.html
Normal file
356
docs/h5_ui/rendered/task-detail-priority.html
Normal file
@@ -0,0 +1,356 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>任务详情 - 优先召回</title>
|
||||
|
||||
<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">
|
||||
<link href="../css/task-detail.css" rel="stylesheet">
|
||||
<link href="../css/ai-icons.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 通栏 Banner - 客户信息 -->
|
||||
<div class="banner-bg theme-orange 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-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg">
|
||||
<span class="text-2xl font-bold text-white">张</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl font-semibold">张先生</span>
|
||||
<span class="px-2 py-0.5 bg-white/25 backdrop-blur-sm text-white rounded-full text-xs font-medium">优先召回</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||
<span>139****1234</span>
|
||||
<button onclick="this.previousElementSibling.textContent='13912341234';this.style.display='none'" class="px-2 py-0.5 bg-white/20 rounded text-white/90 text-xs">查看</button>
|
||||
<span>💰 储值 <span style="background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600;">多</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- 维客线索 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title green text-sm font-semibold text-gray-13">维客线索</h2>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="space-y-2.5">
|
||||
<!-- 客户基础 -->
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-primary/10 text-primary text-[11px] font-medium rounded-sm leading-normal tracking-wide">客户<br>基础</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">👤 普通会员 · 注册10个月 · 近期活跃度下降</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 消费习惯 -->
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-success/10 text-success text-[11px] font-medium rounded-sm leading-normal tracking-wide">消费<br>习惯</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🌙 偏好夜场 20:00-23:00 · 之前月均3-4次</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-success/10 text-success text-[11px] font-medium rounded-sm leading-normal tracking-wide">消费<br>习惯</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">📉 频率下降 · 爱组局</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">场均消费 ¥220，近月到店仅 1 次（之前月均 3-4 次）；喜欢和朋友组局，酒水消费占比 25%</p>
|
||||
</div>
|
||||
<!-- 玩法偏好 -->
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-purple-500/10 text-purple-600 text-[11px] font-medium rounded-sm leading-normal tracking-wide">玩法<br>偏好</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🎱 中式八球为主 · 喜欢组局对战 · 想练组合球</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">中式八球占比 90%，技术水平中等；喜欢 3-4 人组局对战，社交属性强</p>
|
||||
</div>
|
||||
<!-- 重要反馈 -->
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-error/10 text-error text-[11px] font-medium rounded-sm leading-normal tracking-wide">重要<br>反馈</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">⚠️ 换了工作，下班时间不固定</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:小燕</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">2月3日沟通时提到最近换了工作，下班时间不固定，周末可能更方便；建议调整联系时段为周末</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 与我的关系 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13">与我的关系</h2>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<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-amber-400 to-yellow-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-amber-300 to-yellow-500 rounded-full" style="width: 55%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-lg font-bold text-amber-500">0.55</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
最近 2 个月互动较少，仅有 3 次服务记录。客户对您的印象中等，有提升空间。建议增加互动频次，建立更好的服务关系。
|
||||
</p>
|
||||
<!-- 最近服务记录 -->
|
||||
<div class="svc-section-bg">
|
||||
<p class="text-sm font-semibold text-gray-13 mb-3">📋 近期服务记录</p>
|
||||
<div>
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">5号台</span>
|
||||
<span class="svc-type basic">基础课</span>
|
||||
<span class="svc-duration">2.0h</span>
|
||||
</div>
|
||||
<span class="svc-income">¥160</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 雪花x2 矿泉水x1</span>
|
||||
<span class="svc-date">2026-02-06 19:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">A08号台</span>
|
||||
<span class="svc-type incentive">激励课</span>
|
||||
<span class="svc-duration">1.5h</span>
|
||||
</div>
|
||||
<span class="svc-income">¥150</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 百威x1</span>
|
||||
<span class="svc-date">2026-01-20 20:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">3号台</span>
|
||||
<span class="svc-type basic">基础课</span>
|
||||
<span class="svc-duration">2.0h</span>
|
||||
</div>
|
||||
<span class="svc-income">¥160</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 可乐x2 红牛x1</span>
|
||||
<span class="svc-date">2026-01-05 21:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-center">
|
||||
<button onclick="window.location.href='customer-service-records.html'" class="text-xs text-primary font-medium">查看全部服务记录 →</button>
|
||||
</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="bg-gradient-to-br from-orange-50 to-amber-50 rounded-xl p-4 border border-orange-100">
|
||||
<p class="text-sm text-warning leading-relaxed font-medium mb-3">
|
||||
<span class="flex items-center justify-between">
|
||||
<span>💡 建议执行</span>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed mb-2">
|
||||
该客户消费频率从月均 4 次下降到近月仅 1 次，需要关注原因：
|
||||
</p>
|
||||
<ul class="text-sm text-gray-9 space-y-1.5 list-disc list-inside">
|
||||
<li>了解是否工作变动或搬家导致不便</li>
|
||||
<li>询问对门店服务是否有改进建议</li>
|
||||
<li>推荐近期的会员优惠活动</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-4 p-4 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-medium text-gray-13 text-sm">💬 话术参考</span>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"张哥，好久没见您来打球了，最近忙吗？店里这周六有个球友聚会活动，想邀请您来玩，顺便认识一些新球友~"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"张哥好呀，最近工作还顺利吧？周末有空的话过来放松一下，我帮您约几个水平差不多的球友一起切磋~"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"张哥，店里最近新上了几款精酿啤酒，打完球来一杯特别爽，周末要不要来试试？"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"张哥，上次您说想练练组合球，我最近研究了几个不错的训练方法，下次来的时候教您~"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"张哥您好，这个月会员充值有额外赠送活动，力度挺大的，要不要了解一下？"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我给TA的备注 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13">我给TA的备注</h2>
|
||||
<span class="text-xs text-gray-6">2 条备注</span>
|
||||
</div>
|
||||
<div id="noteList" class="space-y-3">
|
||||
<div class="note-card-wrap flex items-start gap-3 p-3.5 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-xs text-gray-6 mb-1.5">2026-02-03</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed">张先生说最近换了工作，下班时间不固定，周末可能更方便。</p>
|
||||
</div>
|
||||
<div class="star-rating" data-score="5"><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:50%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:0%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:0%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span></div>
|
||||
<button onclick="confirmDeleteNote()" class="shrink-0 w-7 h-7 flex items-center justify-center rounded-lg bg-white border border-gray-200 text-gray-5">
|
||||
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="note-card-wrap flex items-start gap-3 p-3.5 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-xs text-gray-6 mb-1.5">2026-01-15</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed">推荐了周末球友聚会活动，客户表示有兴趣但还没确认。</p>
|
||||
</div>
|
||||
<div class="star-rating" data-score="5"><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:50%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:0%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:0%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span></div>
|
||||
<button onclick="confirmDeleteNote()" class="shrink-0 w-7 h-7 flex items-center justify-center rounded-lg bg-white border border-gray-200 text-gray-5">
|
||||
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="noteEmpty" class="text-center py-6 hidden">
|
||||
<svg class="w-10 h-10 text-gray-4 mx-auto mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
<p class="text-sm text-gray-5">暂无备注</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center gap-3 px-4">
|
||||
<button onclick="window.location.href='chat.html'" class="flex-1 h-11 bg-gradient-to-r from-orange-500 to-amber-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-orange-500/30">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
问问助手
|
||||
</button>
|
||||
<button onclick="showNoteModal()" class="flex-1 h-11 bg-gray-100 text-gray-13 font-medium rounded-xl flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
备注
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 备注弹窗 -->
|
||||
<div id="noteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-end">
|
||||
<div class="w-full bg-white rounded-t-3xl p-5 pb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||
<button id="noteExpandBtn" onclick="expandNoteRating()" class="note-expand-btn">展开评价 ▾</button>
|
||||
</div>
|
||||
<button onclick="hideNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="noteRatingSection" class="hidden">
|
||||
<!-- 星星打分：再次服务意愿 -->
|
||||
<div class="note-rating-group">
|
||||
<span class="note-rating-label">再次服务此客户</span>
|
||||
<div class="note-rating-right">
|
||||
<div class="note-rating-row" data-score="0">
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
</div>
|
||||
<div class="note-rating-hints"><span>不想</span><span></span><span>一般</span><span></span><span>非常想</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 星星打分：再来店可能性 -->
|
||||
<div class="note-rating-group">
|
||||
<span class="note-rating-label">再来店可能性</span>
|
||||
<div class="note-rating-right">
|
||||
<div class="note-rating-row" data-score="0">
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
</div>
|
||||
<div class="note-rating-hints"><span>不可能</span><span></span><span>不好说</span><span></span><span>肯定能</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<textarea id="noteText" class="w-full h-32 p-4 bg-gray-50 rounded-xl resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-orange-500/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||
<button onclick="saveNote()" class="w-full h-12 bg-gradient-to-r from-orange-500 to-amber-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-orange-500/30">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 删除备注确认弹窗 -->
|
||||
<div id="deleteNoteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center px-6">
|
||||
<div class="w-full max-w-sm bg-white rounded-2xl p-5 shadow-xl">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-base font-semibold text-gray-13">删除备注</span>
|
||||
<button onclick="hideDeleteNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 mb-5">确定要删除这条备注吗？删除后无法恢复。</p>
|
||||
<button onclick="deleteNote()" class="w-full h-12 bg-gradient-to-r from-error to-red-400 text-white font-medium rounded-xl shadow-lg shadow-error/30 text-sm">确认删除</button>
|
||||
<button onclick="hideDeleteNoteModal()" class="w-full text-center text-sm text-gray-6 py-2 mt-2 bg-transparent border-0 cursor-pointer">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast 提示 -->
|
||||
<div id="toast" class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-13/80 text-white text-sm px-6 py-3 rounded-xl z-[100] hidden backdrop-blur-sm"></div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
335
docs/h5_ui/rendered/task-detail-relationship.html
Normal file
335
docs/h5_ui/rendered/task-detail-relationship.html
Normal file
@@ -0,0 +1,335 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>任务详情 - 关系构建</title>
|
||||
|
||||
<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">
|
||||
<link href="../css/task-detail.css" rel="stylesheet">
|
||||
<link href="../css/ai-icons.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 通栏 Banner - 客户信息 -->
|
||||
<div class="banner-bg theme-pink 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-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg">
|
||||
<span class="text-2xl font-bold text-white">陈</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl font-semibold">陈先生</span>
|
||||
<span class="px-2 py-0.5 bg-white/25 backdrop-blur-sm text-white rounded-full text-xs font-medium">关系构建</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||
<span>137****8899</span>
|
||||
<button onclick="this.previousElementSibling.textContent='13788998899';this.style.display='none'" class="px-2 py-0.5 bg-white/20 rounded text-white/90 text-xs">查看</button>
|
||||
<span>💰 储值 <span style="background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600;">一般</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- 维客线索 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title green text-sm font-semibold text-gray-13">维客线索</h2>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="space-y-2.5">
|
||||
<!-- 客户基础 -->
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-primary/10 text-primary text-[11px] font-medium rounded-sm leading-normal tracking-wide">客户<br>基础</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🆕 新客户 · 入会2个月 · 消费潜力大</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 消费习惯 -->
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-success/10 text-success text-[11px] font-medium rounded-sm leading-normal tracking-wide">消费<br>习惯</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">☀️ 偏好下午 14:00-18:00 · 到店2次</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-success/10 text-success text-[11px] font-medium rounded-sm leading-normal tracking-wide">消费<br>习惯</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">💎 消费潜力大</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">单次消费 ¥180，高于新客均值 ¥120；消费能力较强，有提升空间，适合推荐课程套餐</p>
|
||||
</div>
|
||||
<!-- 玩法偏好 -->
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-purple-500/10 text-purple-600 text-[11px] font-medium rounded-sm leading-normal tracking-wide">玩法<br>偏好</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🎱 初学者 · 对台球感兴趣 · 技术待提升</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">尚未形成明确偏好，对各类玩法都有兴趣；技术水平初级，适合推荐入门课程和基础训练</p>
|
||||
</div>
|
||||
<!-- 重要反馈 -->
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-error/10 text-error text-[11px] font-medium rounded-sm leading-normal tracking-wide">重要<br>反馈</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">💬 上次课后反馈良好，想继续学习</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:小燕</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">2月5日基础课后表示很有收获，希望能有更多练习机会；建议安排球友交流活动帮助融入</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 与我的关系 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13">与我的关系</h2>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<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-blue-500 to-cyan-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-blue-400 to-cyan-500 rounded-full" style="width: 45%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-lg font-bold text-blue-500">0.45</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
接触次数较少，仅有 2 次服务记录。客户对您还不太熟悉，但反馈良好。建议通过专业服务和关心，逐步建立信任关系。
|
||||
</p>
|
||||
<!-- 最近服务记录 -->
|
||||
<div class="svc-section-bg">
|
||||
<p class="text-sm font-semibold text-gray-13 mb-3">📋 近期服务记录</p>
|
||||
<div>
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">2号台</span>
|
||||
<span class="svc-type basic">基础课</span>
|
||||
<span class="svc-duration">1.5h</span>
|
||||
</div>
|
||||
<span class="svc-income">¥120</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 矿泉水x2</span>
|
||||
<span class="svc-date">2026-02-05 15:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">A03号台</span>
|
||||
<span class="svc-type basic">基础课</span>
|
||||
<span class="svc-duration">2.0h</span>
|
||||
</div>
|
||||
<span class="svc-income">¥160</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 可乐x1 雪碧x1</span>
|
||||
<span class="svc-date">2026-01-22 16:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">6号台</span>
|
||||
<span class="svc-type incentive">激励课</span>
|
||||
<span class="svc-duration">1.0h</span>
|
||||
</div>
|
||||
<span class="svc-income">¥100</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 红牛x1</span>
|
||||
<span class="svc-date">2026-01-10 14:30</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-center">
|
||||
<button onclick="window.location.href='customer-service-records.html'" class="text-xs text-primary font-medium">查看全部服务记录 →</button>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<div class="bg-gradient-to-br from-pink-50 to-rose-50 rounded-xl p-4 border border-pink-100">
|
||||
<p class="text-sm text-pink-600 leading-relaxed font-medium mb-3">
|
||||
<span class="flex items-center justify-between">
|
||||
<span>💝 关系构建重点</span>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed mb-2">
|
||||
该客户消费潜力大但关系指数较低，建议重点培养：
|
||||
</p>
|
||||
<ul class="text-sm text-gray-9 space-y-1.5 list-disc list-inside">
|
||||
<li>主动关心学习进度，提供技术指导</li>
|
||||
<li>了解其兴趣爱好，建立共同话题</li>
|
||||
<li>适时推荐适合初学者的课程套餐</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-4 p-4 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-medium text-gray-13 text-sm">💬 话术参考</span>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"陈哥您好，上次看您打球进步很快呀！我们这周有个初学者交流会，可以认识一些同水平的球友一起练习，您有兴趣参加吗？"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"陈哥好呀，上次教您的那个发力技巧练得怎么样了？下次来的时候我再帮您看看，争取早日突破~"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"陈哥，我们店里新推出了一个入门课程套餐，专门针对想快速提升的球友，性价比很高，要不要了解一下？"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"陈哥您好，这周六下午有几位球友约了练习赛，水平都差不多，要不要一起来切磋切磋？"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"陈哥，最近天气不错，下午来打打球放松一下吧，我帮您留个好位置~"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我给TA的备注 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13">我给TA的备注</h2>
|
||||
<span class="text-xs text-gray-6">暂无备注</span>
|
||||
</div>
|
||||
<div id="noteList" class="space-y-3 hidden"></div>
|
||||
<div id="noteEmpty" class="text-center py-6">
|
||||
<svg class="w-10 h-10 text-gray-4 mx-auto mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
<p class="text-sm text-gray-5">快点击下方备注按钮，添加客人备注！</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center gap-3 px-4">
|
||||
<button onclick="window.location.href='chat.html'" class="flex-1 h-11 bg-gradient-to-r from-pink-500 to-rose-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-pink-500/30">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
问问助手
|
||||
</button>
|
||||
<button onclick="showNoteModal()" class="flex-1 h-11 bg-gray-100 text-gray-13 font-medium rounded-xl flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
备注
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 备注弹窗 -->
|
||||
<div id="noteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-end">
|
||||
<div class="w-full bg-white rounded-t-3xl p-5 pb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||
<button id="noteExpandBtn" onclick="expandNoteRating()" class="note-expand-btn">展开评价 ▾</button>
|
||||
</div>
|
||||
<button onclick="hideNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="noteRatingSection" class="hidden">
|
||||
<!-- 星星打分：再次服务意愿 -->
|
||||
<div class="note-rating-group">
|
||||
<span class="note-rating-label">再次服务此客户</span>
|
||||
<div class="note-rating-right">
|
||||
<div class="note-rating-row" data-score="0">
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
</div>
|
||||
<div class="note-rating-hints"><span>不想</span><span></span><span>一般</span><span></span><span>非常想</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 星星打分：再来店可能性 -->
|
||||
<div class="note-rating-group">
|
||||
<span class="note-rating-label">再来店可能性</span>
|
||||
<div class="note-rating-right">
|
||||
<div class="note-rating-row" data-score="0">
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
</div>
|
||||
<div class="note-rating-hints"><span>不可能</span><span></span><span>不好说</span><span></span><span>肯定能</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<textarea id="noteText" class="w-full h-32 p-4 bg-gray-50 rounded-xl resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-pink-500/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||
<button onclick="saveNote()" class="w-full h-12 bg-gradient-to-r from-pink-500 to-rose-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-pink-500/30">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 删除备注确认弹窗 -->
|
||||
<div id="deleteNoteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center px-6">
|
||||
<div class="w-full max-w-sm bg-white rounded-2xl p-5 shadow-xl">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-base font-semibold text-gray-13">删除备注</span>
|
||||
<button onclick="hideDeleteNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 mb-5">确定要删除这条备注吗？删除后无法恢复。</p>
|
||||
<button onclick="deleteNote()" class="w-full h-12 bg-gradient-to-r from-error to-red-400 text-white font-medium rounded-xl shadow-lg shadow-error/30 text-sm">确认删除</button>
|
||||
<button onclick="hideDeleteNoteModal()" class="w-full text-center text-sm text-gray-6 py-2 mt-2 bg-transparent border-0 cursor-pointer">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast 提示 -->
|
||||
<div id="toast" class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-13/80 text-white text-sm px-6 py-3 rounded-xl z-[100] hidden backdrop-blur-sm"></div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
445
docs/h5_ui/rendered/task-detail.html
Normal file
445
docs/h5_ui/rendered/task-detail.html
Normal file
@@ -0,0 +1,445 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>任务详情 - 球房运营助手</title>
|
||||
|
||||
<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">
|
||||
<link href="../css/task-detail.css" rel="stylesheet">
|
||||
<link href="../css/ai-icons.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
/* 话术气泡 */
|
||||
.speech-bubble {
|
||||
position: relative;
|
||||
background: #f0f4ff;
|
||||
border: 1px solid #c5c5c5;
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: #5e5e5e;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
/* 尖角：旋转正方形，右下角伸出 */
|
||||
.speech-bubble::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
right: 24px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #f0f4ff;
|
||||
border-right: 1px solid #c5c5c5;
|
||||
border-bottom: 1px solid #c5c5c5;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
/* 复制按钮 */
|
||||
.copy-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 0;
|
||||
font-size: 12px;
|
||||
color: #a6a6a6;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.copy-btn:active { color: #0052d9; }
|
||||
.copy-btn svg { width: 14px; height: 14px; }
|
||||
.copy-btn.copied { color: #00a870; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 通栏 Banner - 客户信息 -->
|
||||
<div class="banner-bg theme-red 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>
|
||||
<button onclick="showAbandonModal()" class="absolute right-4 text-white/50 text-sm">放弃</button>
|
||||
</div>
|
||||
|
||||
<!-- 客户信息 -->
|
||||
<div class="px-5 pt-2 pb-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg">
|
||||
<span class="text-2xl font-bold text-white">王</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl font-semibold">王先生</span>
|
||||
<span class="px-2 py-0.5 bg-white/25 backdrop-blur-sm text-white rounded-full text-xs font-medium">高优先召回</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||
<span>138****5678</span>
|
||||
<button onclick="this.previousElementSibling.textContent='13812345678';this.style.display='none'" class="px-2 py-0.5 bg-white/20 rounded text-white/90 text-xs">查看</button>
|
||||
<span>💰 储值 <span style="background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600;">非常多</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- 与我的关系（置顶） -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title pink text-sm font-semibold text-gray-13">与我的关系</h2>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<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-pink-500 to-rose-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-pink-400 to-rose-500 rounded-full" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-lg font-bold text-pink-500">0.85</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed">
|
||||
最近 3 个月每周均有 1-2 次课程互动，客户反馈良好。上次服务评价 5 星，多次指定您为服务助教。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 任务建议 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title orange text-sm font-semibold text-gray-13 mb-4">任务建议</h2>
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-100">
|
||||
<p class="text-sm text-primary leading-relaxed font-medium mb-3">
|
||||
<span class="flex items-center justify-between">
|
||||
<span>💡 建议执行</span>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed mb-2">
|
||||
该客户已有 15 天未到店，存在流失风险。建议通过微信联系：
|
||||
</p>
|
||||
<ul class="text-sm text-gray-9 space-y-1.5 list-disc list-inside">
|
||||
<li>询问近期是否有空，邀请体验新到的器材</li>
|
||||
<li>告知本周末有会员专属活动</li>
|
||||
<li>根据其偏好时段（晚间）推荐合适的时间</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="font-medium text-gray-13 text-sm">💬 话术参考</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-5">
|
||||
<div class="speech-bubble"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>王哥您好，好久不见！最近店里新到了几张国际标准的斯诺克球桌，知道您是斯诺克爱好者，想邀请您有空来体验一下~<div class="flex justify-end mt-0"><button class="copy-btn" onclick="copySpeech(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg><span>复制</span></button></div></div>
|
||||
<div class="speech-bubble"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>王哥，最近忙吗？这周末我们有个老客户专属的球友交流赛，奖品还挺丰富的，您要不要来参加？<div class="flex justify-end mt-0"><button class="copy-btn" onclick="copySpeech(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg><span>复制</span></button></div></div>
|
||||
<div class="speech-bubble"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>王哥好呀，上次您提到想练练斯诺克的走位，我最近研究了一些新的训练方法，下次来的时候可以一起试试~<div class="flex justify-end mt-0"><button class="copy-btn" onclick="copySpeech(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg><span>复制</span></button></div></div>
|
||||
<div class="speech-bubble"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>王哥，好久没见您了，您的老位置 A12 号台一直给您留着呢！最近晚上人不多，环境特别好，随时欢迎您来~<div class="flex justify-end mt-0"><button class="copy-btn" onclick="copySpeech(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg><span>复制</span></button></div></div>
|
||||
<div class="speech-bubble"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>王哥您好，我们这个月推出了储值会员专属的夜场优惠套餐，包含球台+酒水，性价比很高，给您留意着呢~<div class="flex justify-end mt-0"><button class="copy-btn" onclick="copySpeech(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg><span>复制</span></button></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 维客线索 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title green text-sm font-semibold text-gray-13">维客线索</h2>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="space-y-2.5">
|
||||
<!-- 客户基础 -->
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-primary/10 text-primary text-[11px] font-medium rounded-sm leading-normal tracking-wide">客户<br>基础</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🎂 生日 3月15日 · VIP会员 · 注册2年</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 消费习惯 -->
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-success/10 text-success text-[11px] font-medium rounded-sm leading-normal tracking-wide">消费<br>习惯</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🌙 常来夜场 · 月均4-5次</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-success/10 text-success text-[11px] font-medium rounded-sm leading-normal tracking-wide">消费<br>习惯</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">💰 高客单价</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">近60天场均消费 ¥420，高于门店均值 ¥180；偏好夜场时段，酒水附加消费占比 35%</p>
|
||||
</div>
|
||||
<!-- 玩法偏好 -->
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-purple-500/10 text-purple-600 text-[11px] font-medium rounded-sm leading-normal tracking-wide">玩法<br>偏好</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🎱 偏爱中式八球 · 斯诺克进阶中 · 最近对花式九球也有兴趣</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">中式八球占比 60%，斯诺克 30%；近2周开始尝试花式九球，技术水平中等偏上</p>
|
||||
</div>
|
||||
<!-- 重要反馈 -->
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-error/10 text-error text-[11px] font-medium rounded-sm leading-normal tracking-wide">重要<br>反馈</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">⚠️ 上次提到想练斯诺克走位</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:小燕</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">2月7日到店时主动提及，希望有针对性的走位训练；建议下次安排斯诺克专项课程</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我给TA的备注 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13">我给TA的备注</h2>
|
||||
<span class="text-xs text-gray-6">3 条备注</span>
|
||||
</div>
|
||||
<div id="noteList" class="space-y-3">
|
||||
<div class="note-card-wrap p-3.5 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<p class="text-xs text-gray-6">2026-02-05</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="star-rating" data-score="7"><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:50%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:0%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span></div>
|
||||
<button onclick="confirmDeleteNote()" class="shrink-0 w-7 h-7 flex items-center justify-center rounded-lg bg-white border border-gray-200 text-gray-5">
|
||||
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-9 leading-relaxed">已通过微信联系王先生，表示对新到的斯诺克球桌感兴趣，周末可能来体验。</p>
|
||||
</div>
|
||||
<div class="note-card-wrap p-3.5 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<p class="text-xs text-gray-6">2026-01-20</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="star-rating" data-score="7"><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:50%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:0%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span></div>
|
||||
<button onclick="confirmDeleteNote()" class="shrink-0 w-7 h-7 flex items-center justify-center rounded-lg bg-white border border-gray-200 text-gray-5">
|
||||
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-9 leading-relaxed">王先生最近出差较多，到店频率降低。建议等他回来后再约。</p>
|
||||
</div>
|
||||
<div class="note-card-wrap p-3.5 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<p class="text-xs text-gray-6">2026-01-08</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="star-rating" data-score="7"><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:50%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:0%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span></div>
|
||||
<button onclick="confirmDeleteNote()" class="shrink-0 w-7 h-7 flex items-center justify-center rounded-lg bg-white border border-gray-200 text-gray-5">
|
||||
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-9 leading-relaxed">上次到店时推荐了会员续费活动，客户说考虑一下。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="noteEmpty" class="text-center py-6 hidden">
|
||||
<svg class="w-10 h-10 text-gray-4 mx-auto mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
<p class="text-sm text-gray-5">暂无备注</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 近期服务记录（置底） -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13">近期服务记录</h2>
|
||||
<span class="text-xs text-gray-6">共 3 次</span>
|
||||
</div>
|
||||
<!-- 汇总统计 -->
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="flex-1 text-center py-2.5 bg-primary/5 rounded-xl">
|
||||
<p class="text-lg font-bold text-primary">6.0<span class="text-xs font-normal text-gray-6 ml-0.5">h</span></p>
|
||||
<p class="text-[11px] text-gray-6 mt-0.5">总时长</p>
|
||||
</div>
|
||||
<div class="flex-1 text-center py-2.5 bg-success/5 rounded-xl">
|
||||
<p class="text-lg font-bold text-success">¥510</p>
|
||||
<p class="text-[11px] text-gray-6 mt-0.5">总收入</p>
|
||||
</div>
|
||||
<div class="flex-1 text-center py-2.5 bg-warning/5 rounded-xl">
|
||||
<p class="text-lg font-bold text-warning">¥170</p>
|
||||
<p class="text-[11px] text-gray-6 mt-0.5">场均</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 记录列表 -->
|
||||
<div class="space-y-2.5">
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">A12号台</span>
|
||||
<span class="svc-type basic">基础课</span>
|
||||
<span class="svc-duration text-base">2.5h</span>
|
||||
</div>
|
||||
<span class="svc-income text-base">¥200</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 百威x2 红牛x1</span>
|
||||
<span class="svc-date text-xs">2026-02-07 21:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">3号台</span>
|
||||
<span class="svc-type basic">基础课</span>
|
||||
<span class="svc-duration text-base">2.0h</span>
|
||||
</div>
|
||||
<span class="svc-income text-base">¥160</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 可乐x1</span>
|
||||
<span class="svc-date text-xs">2026-02-01 20:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">VIP1号房</span>
|
||||
<span class="svc-type incentive">激励课</span>
|
||||
<span class="svc-duration text-base">1.5h</span>
|
||||
</div>
|
||||
<span class="svc-income text-base">¥150</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 芝华士x1 矿泉水x2</span>
|
||||
<span class="svc-date text-xs">2026-01-28 19:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<button onclick="window.location.href='customer-service-records.html'" class="text-xs text-primary font-medium">查看全部服务记录 →</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center gap-3 px-4">
|
||||
<button onclick="window.location.href='chat.html'" class="flex-1 h-11 bg-gradient-to-r from-primary to-blue-500 text-white font-medium rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-primary/30">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
问问助手
|
||||
</button>
|
||||
<button onclick="showNoteModal()" class="flex-1 h-11 bg-gray-100 text-gray-13 font-medium rounded-xl flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
备注
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 备注弹窗 -->
|
||||
<div id="noteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-end">
|
||||
<div class="w-full bg-white rounded-t-3xl p-5 pb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
||||
<button id="noteExpandBtn" onclick="expandNoteRating()" class="note-expand-btn">展开评价 ▾</button>
|
||||
</div>
|
||||
<button onclick="hideNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="noteRatingSection" class="hidden">
|
||||
<!-- 星星打分：再次服务意愿 -->
|
||||
<div class="note-rating-group">
|
||||
<span class="note-rating-label">再次服务此客户</span>
|
||||
<div class="note-rating-right">
|
||||
<div class="note-rating-row" data-score="0">
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
</div>
|
||||
<div class="note-rating-hints"><span>不想</span><span></span><span>一般</span><span></span><span>非常想</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 星星打分：再来店可能性 -->
|
||||
<div class="note-rating-group">
|
||||
<span class="note-rating-label">再来店可能性</span>
|
||||
<div class="note-rating-right">
|
||||
<div class="note-rating-row" data-score="0">
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
<span class="nr-star"><svg class="nr-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg class="nr-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
|
||||
</div>
|
||||
<div class="note-rating-hints"><span>不可能</span><span></span><span>不好说</span><span></span><span>肯定能</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<textarea id="noteText" class="w-full h-32 p-4 bg-gray-50 rounded-xl resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
||||
<button onclick="saveNote()" class="w-full h-12 bg-gradient-to-r from-primary to-blue-500 text-white font-medium rounded-xl mt-4 shadow-lg shadow-primary/30">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 删除备注确认弹窗 -->
|
||||
<div id="deleteNoteModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center px-6">
|
||||
<div class="w-full max-w-sm bg-white rounded-2xl p-5 shadow-xl">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-base font-semibold text-gray-13">删除备注</span>
|
||||
<button onclick="hideDeleteNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 mb-5">确定要删除这条备注吗？删除后无法恢复。</p>
|
||||
<button onclick="deleteNote()" class="w-full h-12 bg-gradient-to-r from-error to-red-400 text-white font-medium rounded-xl shadow-lg shadow-error/30 text-sm">确认删除</button>
|
||||
<button onclick="hideDeleteNoteModal()" class="w-full text-center text-sm text-gray-6 py-2 mt-2 bg-transparent border-0 cursor-pointer">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 放弃弹窗 -->
|
||||
<div id="abandonModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center px-6">
|
||||
<div class="w-full max-w-sm bg-white rounded-2xl p-5 shadow-xl">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span class="text-base font-semibold text-gray-13">放弃维护</span>
|
||||
<button onclick="hideAbandonModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
||||
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 mb-3">请填写放弃原因（必填）：</p>
|
||||
<textarea id="abandonReason" class="w-full h-28 p-4 bg-gray-50 rounded-xl resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 border border-gray-100" placeholder="请输入放弃维护该客户的原因..."></textarea>
|
||||
<p id="abandonError" class="text-xs text-error mt-1.5 hidden">请输入放弃原因后再提交</p>
|
||||
<button onclick="submitAbandon()" class="w-full h-12 bg-gradient-to-r from-error to-red-400 text-white font-medium rounded-xl mt-4 shadow-lg shadow-error/30 text-sm">确认原因 放弃该客户的维护</button>
|
||||
<button onclick="hideAbandonModal()" class="w-full text-center text-sm text-gray-6 py-2 mt-2 bg-transparent border-0 cursor-pointer">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast 提示 -->
|
||||
<div id="toast" class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-13/80 text-white text-sm px-6 py-3 rounded-xl z-[100] hidden backdrop-blur-sm"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
665
docs/h5_ui/rendered/task-list.html
Normal file
665
docs/h5_ui/rendered/task-list.html
Normal file
@@ -0,0 +1,665 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>任务列表 - 球房运营助手</title>
|
||||
|
||||
<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">
|
||||
<link href="../css/ai-icons.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
/* 任务卡片边框颜色 */
|
||||
.task-card {
|
||||
position: relative;
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
.task-card.high-priority {
|
||||
border-left-color: #f43f5e;
|
||||
}
|
||||
.task-card.priority {
|
||||
border-left-color: #f97316;
|
||||
}
|
||||
.task-card.relationship {
|
||||
border-left-color: #ec4899;
|
||||
}
|
||||
.task-card.callback {
|
||||
border-left-color: #14b8a6;
|
||||
}
|
||||
/* 标签颜色 - 圆角矩形 */
|
||||
.tag-high-priority {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tag-priority {
|
||||
background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tag-relationship {
|
||||
background: linear-gradient(135deg, #db2777 0%, #ec4899 100%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tag-callback {
|
||||
background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
/* 进度条动画 */
|
||||
.progress-bar {
|
||||
background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 50%, #fcd34d 100%);
|
||||
transition: width 0.6s ease-out;
|
||||
}
|
||||
/* 6段档位进度条 */
|
||||
.tier-progress {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
height: 8px;
|
||||
}
|
||||
.tier-segment {
|
||||
border-radius: 2px;
|
||||
background: rgba(255,255,255,0.25);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tier-segment.completed {
|
||||
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
|
||||
}
|
||||
.tier-segment.current {
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.25) 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
.tier-segment.current .tier-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
/* 红戳样式 - 透明印章风格 */
|
||||
.red-stamp {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.stamp-badge {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -28px;
|
||||
transform: rotate(-12deg) scale(0);
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border: 3px solid rgb(239, 68, 68);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
box-shadow:
|
||||
inset 0 0 0 2px rgba(255, 255, 255, 0.95),
|
||||
inset 0 0 10px 2px rgba(255, 255, 255, 0.7),
|
||||
inset 0 0 20px 4px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
/* 盖戳动画 */
|
||||
@keyframes stampDown {
|
||||
0% {
|
||||
transform: rotate(-12deg) scale(3);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-12deg) scale(0.9);
|
||||
opacity: 0.9;
|
||||
}
|
||||
70% {
|
||||
transform: rotate(-12deg) scale(1.05);
|
||||
opacity: 0.85;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-12deg) scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.stamp-badge.stamp-animate {
|
||||
animation: stampDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
.stamp-badge .thumb {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
.stamp-badge .stamp-text {
|
||||
font-size: 11px;
|
||||
color: rgb(220, 38, 38);
|
||||
font-weight: bold;
|
||||
margin-top: 1px;
|
||||
text-shadow:
|
||||
0 0 2px rgba(255,255,255,1),
|
||||
0 0 4px rgba(255,255,255,0.9),
|
||||
1px 1px 0 rgba(255,255,255,0.9),
|
||||
-1px -1px 0 rgba(255,255,255,0.9),
|
||||
1px -1px 0 rgba(255,255,255,0.9),
|
||||
-1px 1px 0 rgba(255,255,255,0.9);
|
||||
}
|
||||
/* 进度条按比例宽度：0-100(45.45%), 100-130(13.64%), 130-160(13.64%), 160-190(13.64%), 190-220(13.64%) */
|
||||
.tier-segment-0 { flex: 100; }
|
||||
.tier-segment-1 { flex: 30; }
|
||||
.tier-segment-2 { flex: 30; }
|
||||
.tier-segment-3 { flex: 30; }
|
||||
.tier-segment-4 { flex: 30; }
|
||||
/* 下降趋势样式 */
|
||||
.trend-down {
|
||||
color: rgba(255,255,255,0.5);
|
||||
font-size: 12px;
|
||||
}
|
||||
/* 业绩卡片文字样式 */
|
||||
.stat-value {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.25);
|
||||
}
|
||||
.stat-highlight {
|
||||
color: #6ee7b7;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
}
|
||||
.stat-label {
|
||||
color: rgba(255,255,255,0.9);
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
|
||||
}
|
||||
.stat-secondary {
|
||||
color: rgba(255,255,255,0.7);
|
||||
}
|
||||
.stat-accent {
|
||||
color: #fcd34d;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
}
|
||||
/* 奖金金额突出样式 */
|
||||
.bonus-amount {
|
||||
text-shadow:
|
||||
0 2px 4px rgba(0, 0, 0, 0.35),
|
||||
0 0 12px rgba(251, 191, 36, 0.5);
|
||||
}
|
||||
/* === 任务分区 === */
|
||||
.section-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
/* 置顶卡片微亮边框 */
|
||||
.task-card.pinned {
|
||||
box-shadow: 0 1px 4px rgba(245, 158, 11, 0.12), 0 0 0 1px rgba(245, 158, 11, 0.08);
|
||||
}
|
||||
/* 放弃任务 */
|
||||
.task-card.abandoned {
|
||||
border-left-color: #d1d5db !important;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.task-card.abandoned .task-name {
|
||||
color: #9ca3af;
|
||||
}
|
||||
.task-card.abandoned .task-desc {
|
||||
color: #c5c5c5;
|
||||
}
|
||||
.task-card.abandoned .task-tag-wrap > span:first-child {
|
||||
background: #d1d5db !important;
|
||||
}
|
||||
/* 备注指示器 */
|
||||
.note-indicator {
|
||||
font-size: 12px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
/* === 长按上下文菜单 === */
|
||||
.context-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
z-index: 100;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.context-overlay.active {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
z-index: 101;
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
|
||||
min-width: 192px;
|
||||
padding: 6px 0;
|
||||
opacity: 0;
|
||||
transform: scale(0.88);
|
||||
pointer-events: none;
|
||||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||
transform-origin: top left;
|
||||
}
|
||||
.context-menu.active {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
pointer-events: all;
|
||||
}
|
||||
.ctx-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 13px 18px;
|
||||
font-size: 14px;
|
||||
color: #393939;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
user-select: none;
|
||||
}
|
||||
.ctx-item:active {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
.ctx-item + .ctx-item {
|
||||
border-top: 1px solid #f3f3f3;
|
||||
}
|
||||
/* === 备注 / 放弃弹窗 === */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-top: 18vh;
|
||||
padding-bottom: 40vh;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.modal-overlay.active {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
.modal-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
width: 88%;
|
||||
max-width: 360px;
|
||||
padding: 24px 20px 20px;
|
||||
transform: translateY(24px);
|
||||
transition: transform 0.25s ease;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.modal-overlay.active .modal-card {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.modal-card textarea {
|
||||
width: 100%;
|
||||
border: 1.5px solid #e7e7e7;
|
||||
border-radius: 10px;
|
||||
padding: 12px 14px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
resize: none;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
color: #2c2c2c;
|
||||
transition: border-color 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.modal-card textarea:focus {
|
||||
border-color: #0052d9;
|
||||
}
|
||||
.modal-card textarea.error-border {
|
||||
border-color: #e34d59;
|
||||
}
|
||||
.modal-error {
|
||||
color: #e34d59;
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
display: none;
|
||||
}
|
||||
.modal-error.show {
|
||||
display: block;
|
||||
}
|
||||
.modal-submit-btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
margin-top: 14px;
|
||||
transition: background 0.2s, opacity 0.2s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.modal-submit-btn.primary {
|
||||
background: #0052d9;
|
||||
color: #fff;
|
||||
}
|
||||
.modal-submit-btn.primary:active {
|
||||
background: #003eb3;
|
||||
}
|
||||
.modal-submit-btn.danger {
|
||||
background: #e34d59;
|
||||
color: #fff;
|
||||
}
|
||||
.modal-submit-btn.danger:active {
|
||||
background: #c9363f;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 顶部区域 - 用户信息和业绩卡片 -->
|
||||
<div class="banner-bg theme-blue texture-aurora text-white pb-4">
|
||||
<!-- 用户信息 -->
|
||||
<div class="px-5 pt-10 pb-3">
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<!-- 业绩进度卡片 -->
|
||||
<div class="mx-4">
|
||||
<div class="bg-white/15 backdrop-blur-md rounded-2xl px-4 py-3 border border-white/20">
|
||||
<!-- 第一层：标题行 -->
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="stat-label text-sm font-medium">距离100小时仅剩</span>
|
||||
<span class="stat-accent text-xl font-bold">12.5小时</span>
|
||||
</div>
|
||||
<a href="performance.html" class="stat-secondary text-xs flex items-center gap-1 hover:text-white transition-colors">
|
||||
查看详情
|
||||
<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>
|
||||
|
||||
<!-- 第二层：5段档位进度条 + 边界小时数（按比例宽度） -->
|
||||
<div class="relative mb-6">
|
||||
<div class="tier-progress">
|
||||
<div class="tier-segment tier-segment-0 completed" title="0档 <100h"></div>
|
||||
<div class="tier-segment tier-segment-1 current" title="1档 100-130h">
|
||||
<div class="tier-fill" style="width: 58%"></div>
|
||||
</div>
|
||||
<div class="tier-segment tier-segment-2" title="2档 130-160h"></div>
|
||||
<div class="tier-segment tier-segment-3" title="3档 160-190h"></div>
|
||||
<div class="tier-segment tier-segment-4" title="4档 190-220h"></div>
|
||||
</div>
|
||||
<!-- 档位边界小时数（按比例定位：0, 100/220≈45.45%, 130/220≈59.09%, 160/220≈72.73%, 190/220≈86.36%, 220/220=100%） -->
|
||||
<div class="absolute w-full top-full mt-1.5 flex text-[9px]" style="left: 0;">
|
||||
<span class="text-white/60" style="position:absolute; left:0; transform:translateX(0);">0</span>
|
||||
<span class="text-white/60" style="position:absolute; left:45.45%; transform:translateX(-50%);">100</span>
|
||||
<span class="text-white/80 font-medium" style="position:absolute; left:59.09%; transform:translateX(-50%);">130</span>
|
||||
<span class="text-white/60" style="position:absolute; left:72.73%; transform:translateX(-50%);">160</span>
|
||||
<span class="text-white/60" style="position:absolute; left:86.36%; transform:translateX(-50%);">190</span>
|
||||
<span class="text-white/60" style="position:absolute; right:0; transform:translateX(0);">220</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第三层：核心数据 - 两列布局（左宽右窄） -->
|
||||
<div class="flex items-stretch mb-2.5">
|
||||
<!-- 左侧：课时数据 + 红戳（占60%） -->
|
||||
<div class="pr-4 border-r border-white/25 flex justify-center items-center" style="flex: 3;">
|
||||
<!-- 自动宽度容器：包含课时数据和红戳，居中显示 -->
|
||||
<div class="red-stamp inline-block relative" style="padding-right: 35px;">
|
||||
<div class="text-center">
|
||||
<div class="flex items-baseline justify-center gap-1.5">
|
||||
<span class="stat-highlight text-xl font-bold">77.5</span>
|
||||
<span class="stat-secondary text-sm">|</span>
|
||||
<span class="stat-accent text-xl font-bold">12</span>
|
||||
<span class="stat-secondary text-sm">|</span>
|
||||
<span class="stat-value text-xl font-bold">87.5</span>
|
||||
</div>
|
||||
<p class="stat-label text-xs mt-1.5">基础课 | 激励课 | 全部</p>
|
||||
</div>
|
||||
<!-- 红戳徽章 -->
|
||||
<div class="stamp-badge" style="right: -5px; top: 5px;">
|
||||
<span class="thumb">👍</span>
|
||||
<span class="stamp-text">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧：奖金激励（占40%） -->
|
||||
<div class="pl-3 text-center flex flex-col justify-center" style="flex: 2;">
|
||||
<div class="bonus-amount">
|
||||
<span class="text-3xl font-bold text-amber-300">800</span>
|
||||
<span class="text-base text-amber-300/80">元</span>
|
||||
</div>
|
||||
<p class="stat-label text-xs mt-1.5">达100h即得</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第四层：预计收入 -->
|
||||
<div class="flex items-center justify-between pt-2 border-t border-white/25">
|
||||
<span class="stat-label text-xs">2月预计收入 | 比1月同期</span>
|
||||
<a href="performance.html" class="flex items-center gap-1.5 group">
|
||||
<span class="stat-value text-lg font-bold">¥6,206</span>
|
||||
<span class="trend-down">↓368</span>
|
||||
<svg class="w-3.5 h-3.5 stat-secondary group-hover:text-white transition-colors" 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>
|
||||
|
||||
<!-- 待办任务列表 -->
|
||||
<div class="px-4 py-5">
|
||||
<!-- 标题 -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-base font-semibold text-gray-13">今日 客户维护</h2>
|
||||
<span class="text-sm text-gray-6">共 7 项</span>
|
||||
</div>
|
||||
|
||||
<!-- 📌 置顶区域 -->
|
||||
<div class="mb-5">
|
||||
<div class="flex items-center gap-1.5 mb-2.5">
|
||||
<span class="section-label text-amber-700 bg-amber-50">📌 置顶</span>
|
||||
<span class="text-sm text-gray-6">2项</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<!-- 置顶: 王先生 -->
|
||||
<div class="task-card high-priority pinned block bg-white rounded-xl p-4 shadow-sm cursor-pointer" data-task-id="1" data-task-name="王先生" data-task-type="high-priority">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
|
||||
<span class="tag-high-priority px-2 py-0.5 text-white text-xs font-medium">高优先召回</span>
|
||||
<span class="text-base font-semibold text-gray-13 task-name">王先生</span>
|
||||
<span class="text-sm">💖</span>
|
||||
<span class="note-indicator" title="有备注">📝</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：15天前 · 余额：非常多</p>
|
||||
<p class="text-sm text-gray-6 leading-relaxed task-desc"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</p>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 置顶: 李女士 -->
|
||||
<div class="task-card high-priority pinned block bg-white rounded-xl p-4 shadow-sm cursor-pointer" data-task-id="2" data-task-name="李女士" data-task-type="high-priority">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
|
||||
<span class="tag-high-priority px-2 py-0.5 text-white text-xs font-medium">高优先召回</span>
|
||||
<span class="text-base font-semibold text-gray-13 task-name">李女士</span>
|
||||
<span class="text-sm">🧡</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：20天前 · 余额：非常多</p>
|
||||
<p class="text-sm text-gray-6 leading-relaxed task-desc"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>VIP客户，储值余额较多</p>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" 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>
|
||||
|
||||
<!-- 一般任务区域 -->
|
||||
<div class="mb-5">
|
||||
<div class="flex items-center gap-1.5 mb-2.5">
|
||||
<span class="section-label text-gray-9 bg-gray-2">一般任务</span>
|
||||
<span class="text-sm text-gray-6">3项</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<!-- 张先生 -->
|
||||
<div class="task-card priority block bg-white rounded-xl p-4 shadow-sm cursor-pointer" data-task-id="3" data-task-name="张先生" data-task-type="priority">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
|
||||
<span class="tag-priority px-2 py-0.5 text-white text-xs font-medium">优先召回</span>
|
||||
<span class="text-base font-semibold text-gray-13 task-name">张先生</span>
|
||||
<span class="text-sm">💛</span>
|
||||
<span class="note-indicator" title="有备注">📝</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：10天前 · 余额：一般</p>
|
||||
<p class="text-sm text-gray-6 leading-relaxed task-desc"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>消费频率下降，需关注</p>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 刘先生 -->
|
||||
<div class="task-card priority block bg-white rounded-xl p-4 shadow-sm cursor-pointer" data-task-id="4" data-task-name="刘先生" data-task-type="priority">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
|
||||
<span class="tag-priority px-2 py-0.5 text-white text-xs font-medium">优先召回</span>
|
||||
<span class="text-base font-semibold text-gray-13 task-name">刘先生</span>
|
||||
<span class="text-sm">💙</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：8天前 · 余额：一般</p>
|
||||
<p class="text-sm text-gray-6 leading-relaxed task-desc"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>偏好晚间时段，可推荐夜场套餐</p>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 陈先生 -->
|
||||
<div class="task-card relationship block bg-white rounded-xl p-4 shadow-sm cursor-pointer" data-task-id="5" data-task-name="陈先生" data-task-type="relationship">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
|
||||
<span class="tag-relationship px-2 py-0.5 text-white text-xs font-medium">关系构建</span>
|
||||
<span class="text-base font-semibold text-gray-13 task-name">陈先生</span>
|
||||
<span class="text-sm">💙</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：5天前 · 余额：无</p>
|
||||
<p class="text-sm text-gray-6 leading-relaxed task-desc"><span class="ai-inline-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>潜力客户，建议加强互动</p>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1" 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>
|
||||
|
||||
<!-- ❌ 放弃的任务区域 -->
|
||||
<div class="mb-2">
|
||||
<div class="flex items-center gap-1.5 mb-2.5">
|
||||
<span class="section-label text-gray-6 bg-gray-2">已放弃</span>
|
||||
<span class="text-sm text-gray-6">2项</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<!-- 放弃: 赵女士 -->
|
||||
<div class="task-card callback abandoned block bg-white rounded-xl p-4 shadow-sm" data-task-id="6" data-task-name="赵女士" data-task-type="callback">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
|
||||
<span class="tag-callback px-2 py-0.5 text-white text-xs font-medium">客户回访</span>
|
||||
<span class="text-base font-semibold text-gray-13 task-name">赵女士</span>
|
||||
<span class="text-sm">🧡</span>
|
||||
<span class="note-indicator" title="有备注">📝</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：3天前 · 余额：非常多</p>
|
||||
<p class="text-sm text-gray-6 leading-relaxed task-desc">放弃原因：客户已转会至其他球房</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 放弃: 周先生 -->
|
||||
<div class="task-card callback abandoned block bg-white rounded-xl p-4 shadow-sm" data-task-id="7" data-task-name="周先生" data-task-type="callback">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1.5 task-tag-wrap">
|
||||
<span class="tag-callback px-2 py-0.5 text-white text-xs font-medium">客户回访</span>
|
||||
<span class="text-base font-semibold text-gray-13 task-name">周先生</span>
|
||||
<span class="text-sm">💛</span>
|
||||
<span class="note-indicator" title="有备注">📝</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed task-desc">最近到店：5天前 · 余额：一般</p>
|
||||
<p class="text-sm text-gray-6 leading-relaxed task-desc">放弃原因：联系方式失效，无法触达</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 长按上下文菜单 -->
|
||||
<div class="context-overlay" id="contextOverlay"></div>
|
||||
<div class="context-menu" id="contextMenu">
|
||||
<div class="ctx-item" data-action="pin">
|
||||
<span>📌</span><span>置顶任务</span>
|
||||
</div>
|
||||
<div class="ctx-item" data-action="abandon">
|
||||
<span>❌</span><span>放弃任务</span>
|
||||
</div>
|
||||
<div class="ctx-item" data-action="ai">
|
||||
<span>🤖</span><span>问问AI助手</span>
|
||||
</div>
|
||||
<div class="ctx-item" data-action="remark">
|
||||
<span>📝</span><span>备注</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备注 / 放弃 弹窗（可复用组件） -->
|
||||
<div class="modal-overlay" id="remarkModal">
|
||||
<div class="modal-card">
|
||||
<h3 class="text-base font-semibold text-gray-13 mb-1" id="modalTitle">添加备注</h3>
|
||||
<p class="text-xs text-gray-6 mb-3" id="modalSubtitle">为该客户的维护任务添加备注</p>
|
||||
<textarea id="remarkInput" rows="4" placeholder="请输入备注内容..."></textarea>
|
||||
<div class="modal-error" id="remarkError">请填写放弃原因，不能为空</div>
|
||||
<button class="modal-submit-btn primary" id="modalSubmitBtn">保存备注</button>
|
||||
<button class="mt-2 w-full text-center text-sm text-gray-6 py-2 bg-transparent border-0 cursor-pointer" id="modalCancelBtn">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI 标识配色 -->
|
||||
|
||||
|
||||
<!-- 悬浮助手按钮 -->
|
||||
|
||||
|
||||
<!-- 通用底部导航 -->
|
||||
|
||||
|
||||
<!-- 盖戳动画 -->
|
||||
|
||||
|
||||
<!-- 长按菜单 + 备注弹窗 交互 -->
|
||||
|
||||
</body>
|
||||
Reference in New Issue
Block a user