generated from root/feiqiu-ETL
186 lines
8.9 KiB
HTML
186 lines
8.9 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">
|
||
<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;
|
||
}
|
||
.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>
|
||
|