185 lines
5.9 KiB
HTML
185 lines
5.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>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
||
color: #4e5969;
|
||
background-color: #f2f3f5;
|
||
margin: 0;
|
||
padding: 20px;
|
||
}
|
||
|
||
.conversations-container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.conversation-container {
|
||
background-color: white;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
border-radius: 12px;
|
||
margin-bottom: 20px;
|
||
padding: 16px;
|
||
}
|
||
|
||
.conversation-header {
|
||
color: #86909c;
|
||
border-bottom: 1px solid #e5e6eb;
|
||
margin-bottom: 12px;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.message-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.message-bubble {
|
||
max-width: 75%;
|
||
padding: 10px 14px;
|
||
border-radius: 18px;
|
||
line-height: 1.4;
|
||
position: relative;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
.customer-bubble {
|
||
align-self: flex-start;
|
||
background-color: white;
|
||
border: 1px solid #e5e6eb;
|
||
border-top-left-radius: 4px;
|
||
margin-right: 25%;
|
||
}
|
||
|
||
.staff-bubble {
|
||
align-self: flex-end;
|
||
background-color: #94BFFF;
|
||
border-top-right-radius: 4px;
|
||
margin-left: 25%;
|
||
}
|
||
|
||
.message-sender {
|
||
font-size: 12px;
|
||
color: #86909c;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.customer-bubble .message-sender {
|
||
text-align: left;
|
||
}
|
||
|
||
.staff-bubble .message-sender {
|
||
text-align: right;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="conversations-container">
|
||
|
||
<div class="conversation-container">
|
||
<div class="conversation-header">会话开始时间：2024-11-13 09:14:28</div>
|
||
<div class="message-container">
|
||
|
||
<div class="message-bubble customer-bubble">
|
||
<div class="message-sender">客户</div>
|
||
<div class="bubble-content">
|
||
订单取消
|
||
</div>
|
||
</div>
|
||
|
||
<div class="message-bubble staff-bubble">
|
||
<div class="message-sender">机器人(人保小暖)</div>
|
||
<div class="bubble-content">
|
||
非常抱歉呢，这个问题小暖还没有学过呢~您可以转人工咨询~
|
||
</div>
|
||
</div>
|
||
|
||
<div class="message-bubble customer-bubble">
|
||
<div class="message-sender">客户</div>
|
||
<div class="bubble-content">
|
||
转人工
|
||
</div>
|
||
</div>
|
||
|
||
<div class="message-bubble staff-bubble">
|
||
<div class="message-sender">机器人(人保小暖)</div>
|
||
<div class="bubble-content">
|
||
正在为您转接人工客服
|
||
</div>
|
||
</div>
|
||
|
||
<div class="message-bubble staff-bubble">
|
||
<div class="message-sender">机器人(人保小暖)</div>
|
||
<div class="bubble-content">
|
||
人工服务是一对多服务，回复可能稍慢，转接请稍等...!
|
||
</div>
|
||
</div>
|
||
|
||
<div class="message-bubble staff-bubble">
|
||
<div class="message-sender">kefu04(小暖暖)</div>
|
||
<div class="bubble-content">
|
||
您好
|
||
</div>
|
||
</div>
|
||
|
||
<div class="message-bubble customer-bubble">
|
||
<div class="message-sender">客户</div>
|
||
<div class="bubble-content">
|
||
您好，华怡药房有个订单要取消17314220802108
|
||
</div>
|
||
</div>
|
||
|
||
<div class="message-bubble customer-bubble">
|
||
<div class="message-sender">客户</div>
|
||
<div class="bubble-content">
|
||
商家的客服页面是空白，页面没有取消订单操作
|
||
</div>
|
||
</div>
|
||
|
||
<div class="message-bubble customer-bubble">
|
||
<div class="message-sender">客户</div>
|
||
<div class="bubble-content">
|
||
请后台联系取消订单，或者提供可以联系上店铺的客服电话
|
||
</div>
|
||
</div>
|
||
|
||
<div class="message-bubble staff-bubble">
|
||
<div class="message-sender">kefu04(小暖暖)</div>
|
||
<div class="bubble-content">
|
||
您截图
|
||
</div>
|
||
</div>
|
||
|
||
<div class="message-bubble customer-bubble">
|
||
<div class="message-sender">客户</div>
|
||
<div class="bubble-content">
|
||
发送图片：https://minioss.cn-wlcb.ufileos.com/filetransfer/20241113/kf_10566/688595f6639b3b895fcdd8364817cdd51731460659.jpg ；大小：69.76 KB
|
||
</div>
|
||
</div>
|
||
|
||
<div class="message-bubble staff-bubble">
|
||
<div class="message-sender">kefu04(小暖暖)</div>
|
||
<div class="bubble-content">
|
||
这边咨询一下后台是否可以进行操作
|
||
</div>
|
||
</div>
|
||
|
||
<div class="message-bubble staff-bubble">
|
||
<div class="message-sender">kefu04(小暖暖)</div>
|
||
<div class="bubble-content">
|
||
已经咨询，后台还未有回复
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html> |