generated from root/feiqiu-ETL
206 lines
10 KiB
HTML
206 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>任务详情 - 关系构建</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link href="../css/banner.css" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#0052d9',
|
|
'primary-light': '#ecf2fe',
|
|
success: '#00a870',
|
|
warning: '#ed7b2f',
|
|
error: '#e34d59',
|
|
'gray-1': '#f3f3f3',
|
|
'gray-2': '#eeeeee',
|
|
'gray-3': '#e7e7e7',
|
|
'gray-4': '#dcdcdc',
|
|
'gray-5': '#c5c5c5',
|
|
'gray-6': '#a6a6a6',
|
|
'gray-7': '#8b8b8b',
|
|
'gray-8': '#777777',
|
|
'gray-9': '#5e5e5e',
|
|
'gray-10': '#4b4b4b',
|
|
'gray-11': '#393939',
|
|
'gray-12': '#2c2c2c',
|
|
'gray-13': '#242424',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Noto Sans SC', 'sans-serif'],
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
padding-bottom: 80px;
|
|
}
|
|
.section-title {
|
|
position: relative;
|
|
padding-left: 12px;
|
|
}
|
|
.section-title::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 4px;
|
|
height: 16px;
|
|
border-radius: 2px;
|
|
}
|
|
.section-title.blue::before { background: linear-gradient(180deg, #0052d9, #5b9cf8); }
|
|
.section-title.green::before { background: linear-gradient(180deg, #00a870, #4cd964); }
|
|
.section-title.pink::before { background: linear-gradient(180deg, #e91e63, #f48fb1); }
|
|
</style>
|
|
</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>
|
|
<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">
|
|
<h2 class="section-title green text-sm font-semibold text-gray-13 mb-4">消费习惯</h2>
|
|
<div class="flex flex-wrap gap-2 mb-3">
|
|
<span class="px-3 py-1.5 bg-gradient-to-r from-amber-50 to-yellow-50 text-amber-600 text-xs rounded-full border border-amber-100">☀️ 偏好下午</span>
|
|
<span class="px-3 py-1.5 bg-gradient-to-r from-green-50 to-emerald-50 text-success text-xs rounded-full border border-green-100">🎱 初学者</span>
|
|
<span class="px-3 py-1.5 bg-gradient-to-r from-pink-50 to-rose-50 text-pink-600 text-xs rounded-full border border-pink-100">💎 消费潜力大</span>
|
|
</div>
|
|
<p class="text-sm text-gray-7 leading-relaxed">
|
|
新客户，入会 2 个月。偏好下午 14:00-18:00 时段，对台球感兴趣但技术一般。消费能力较强，单次消费 180 元，有提升空间。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 与我的关系 -->
|
|
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
|
<h2 class="section-title blue text-sm font-semibold text-gray-13 mb-4">与我的关系</h2>
|
|
<div class="flex 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>
|
|
|
|
<!-- 任务建议 -->
|
|
<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">
|
|
💝 关系构建重点
|
|
</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">
|
|
<p class="text-sm text-gray-9 leading-relaxed">
|
|
<span class="font-medium text-gray-13">💬 话术参考：</span><br/>
|
|
"陈哥您好，上次看您打球进步很快呀！我们这周有个初学者交流会，可以认识一些同水平的球友一起练习，您有兴趣参加吗？"
|
|
</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">
|
|
<span class="text-base font-semibold text-gray-13">添加备注</span>
|
|
<button onclick="hideNoteModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
|
|
<svg class="w-4 h-4 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"/>
|
|
<line x1="6" y1="6" x2="18" y2="18"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<textarea class="w-full h-32 p-4 bg-gray-50 rounded-xl resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-pink-500/20 border border-gray-100" placeholder="请输入备注内容..."></textarea>
|
|
<button 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>
|
|
|
|
<script>
|
|
function showNoteModal() {
|
|
document.getElementById('noteModal').classList.remove('hidden');
|
|
document.getElementById('noteModal').classList.add('flex');
|
|
}
|
|
|
|
function hideNoteModal() {
|
|
document.getElementById('noteModal').classList.add('hidden');
|
|
document.getElementById('noteModal').classList.remove('flex');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|