和我联系
姓名：高云
手机：18061499201
邮箱：gaoyun@woxbb.com
<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.chat-container {
width: 100%;
max-width: 1200px;
height: 85vh;
background: rgba(255, 255, 255, 0.92);
border-radius: 20px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
display: flex;
overflow: hidden;
position: relative;
}
/* 左侧联系人列表 */
.contacts-panel {
width: 300px;
background: #2c3e50;
color: white;
padding: 20px;
overflow-y: auto;
transition: all 0.3s ease;
}
.brand-header {
display: flex;
align-items: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.brand-header h1 {
font-size: 22px;
margin-left: 10px;
font-weight: 600;
}
.brand-logo {
width: 50px;
height: 50px;
background: linear-gradient(45deg, #3498db, #8e44ad);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.contact-search {
position: relative;
margin-bottom: 20px;
}
.contact-search input {
width: 100%;
padding: 12px 15px 12px 40px;
border-radius: 20px;
border: none;
background: rgba(255,255,255,0.15);
color: white;
font-size: 14px;
}
.contact-search i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: rgba(255,255,255,0.7);
}
.contacts-list {
margin-top: 20px;
}
.contact {
display: flex;
align-items: center;
padding: 15px;
border-radius: 10px;
margin-bottom: 10px;
cursor: pointer;
transition: all 0.2s;
}
.contact:hover, .contact.active {
background: rgba(255,255,255,0.1);
}
.contact-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: #3498db;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
margin-right: 15px;
flex-shrink: 0;
}
.contact-info {
flex-grow: 1;
}
.contact-name {
font-weight: 600;
margin-bottom: 5px;
}
.contact-status {
font-size: 12px;
color: #95a5a6;
display: flex;
align-items: center;
}
.status-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 8px;
}
.status-online {
background: #2ecc71;
}
.status-offline {
background: #95a5a6;
}
/* 聊天区域 */
.chat-area {
flex-grow: 1;
display: flex;
flex-direction: column;
position: relative;
}
.chat-header {
padding: 20px 30px;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
}
.chat-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: #e74c3c;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
color: white;
margin-right: 15px;
}
.chat-info h2 {
font-size: 18px;
margin-bottom: 5px;
}
.chat-info p {
color: #7f8c8d;
font-size: 14px;
}
.chat-messages {
flex-grow: 1;
padding: 25px 30px;
overflow-y: auto;
display: flex;
flex-direction: column;
background: #f8f9fa;
}
.message {
max-width: 70%;
padding: 15px;
margin-bottom: 20px;
border-radius: 18px;
position: relative;
animation: fadeIn 0.3s ease;
line-height: 1.5;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.received {
background: white;
border: 1px solid #eee;
align-self: flex-start;
border-bottom-left-radius: 5px;
}
.sent {
background: #3498db;
color: white;
align-self: flex-end;
border-bottom-right-radius: 5px;
}
.message-time {
font-size: 12px;
margin-top: 8px;
opacity: 0.7;
text-align: right;
}
.chat-input {
padding: 20px;
border-top: 1px solid #eee;
display: flex;
background: white;
}
.chat-input input {
flex-grow: 1;
padding: 15px 20px;
border: 1px solid #ddd;
border-radius: 30px;
font-size: 16px;
outline: none;
transition: border-color 0.3s;
}
.chat-input input:focus {
border-color: #3498db;
}
.send-button {
width: 50px;
height: 50px;
border-radius: 50%;
background: #3498db;
color: white;
border: none;
margin-left: 15px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: background 0.3s;
}
.send-button:hover {
background: #2980b9;
}
/* 响应式设计 */
@media (max-width: 768px) {
.contacts-panel {
width: 70px;
}
.contact-info, .brand-header h1, .contact-search {
display: none;
}
.brand-header {
justify-content: center;
}
.contact {
justify-content: center;
}
}
@media (max-width: 480px) {
.contacts-panel {
position: absolute;
left: -300px;
z-index: 10;
height: 100%;
}
.contacts-panel.active {
left: 0;
}
.toggle-contacts {
display: block;
}
}
.system-message {
align-self: center;
background: #f1f2f6;
color: #7f8c8d;
padding: 8px 15px;
border-radius: 15px;
font-size: 13px;
margin: 10px 0;
}
.toggle-contacts {
display: none;
position: absolute;
top: 20px;
left: 20px;
background: #3498db;
color: white;
border: none;
border-radius: 5px;
padding: 8px 12px;
z-index: 5;
cursor: pointer;
}
.welcome-message {
text-align: center;
padding: 30px;
color: #7f8c8d;
font-size: 15px;
line-height: 1.6;
}
</style>
</head>
<body>
<button class="toggle-contacts"><i class="fas fa-bars"></i></button>
<div class="chat-container">
<div class="contacts-panel">
<div class="brand-header">
<div class="brand-logo">
<i class="fas fa-comments"></i>
</div>
<h1>在线客服</h1>
</div>
<div class="contact-search">
<i class="fas fa-search"></i>
<input type="text" placeholder="搜索联系人...">
</div>
<div class="contacts-list">
<div class="contact active">
<div class="contact-avatar" style="background:linear-gradient(45deg, #e74c3c, #e67e22);">
<i class="fas fa-headset"></i>
</div>
<div class="contact-info">
<div class="contact-name">客服中心</div>
<div class="contact-status">
<span class="status-indicator status-online"></span>
<span>在线</span>
</div>
</div>
</div>
<div class="contact">
<div class="contact-avatar">T</div>
<div class="contact-info">
<div class="contact-name">技术支持</div>
<div class="contact-status">
<span class="status-indicator status-online"></span>
<span>在线</span>
</div>
</div>
</div>
<div class="contact">
<div class="contact-avatar">S</div>
<div class="contact-info">
<div class="contact-name">销售咨询</div>
<div class="contact-status">
<span class="status-indicator status-offline"></span>
<span>离线</span>
</div>
</div>
</div>
<div class="contact">
<div class="contact-avatar">M</div>
<div class="contact-info">
<div class="contact-name">市场部</div>
<div class="contact-status">
<span class="status-indicator status-online"></span>
<span>在线</span>
</div>
</div>
</div>
</div>
</div>
<div class="chat-area">
<div class="chat-header">
<div class="chat-avatar" style="background:linear-gradient(45deg, #e74c3c, #e67e22);">
<i class="fas fa-headset"></i>
</div>
<div class="chat-info">
<h2>客服中心</h2>
<p>平均回复时间：2分钟</p>
</div>
</div>
<div class="chat-messages">
<div class="message received">
您好！欢迎使用我们的在线客服系统。有什么可以帮您的吗？
<div class="message-time">10:30 AM</div>
</div>
<div class="message sent">
你好，我想咨询一下你们的服务套餐。
<div class="message-time">10:31 AM</div>
</div>
<div class="message received">
当然可以！我们目前有三种套餐：基础版、专业版和企业版。您需要了解哪方面的信息呢？
<div class="message-time">10:32 AM</div>
</div>
<div class="system-message">
今天 10:33
</div>
<div class="message sent">
我想了解专业版和企业版的区别。
<div class="message-time">10:33 AM</div>
</div>
<div class="message received">
好的，专业版适合中小型企业，包含所有基础功能加高级分析工具；企业版则增加了定制开发、专属客户经理和24/7技术支持等高级服务。需要我发送详细对比表给您吗？
<div class="message-time">10:34 AM</div>
</div>
<div class="message sent">
好的，请发到我的邮箱：customer@example.com
<div class="message-time">10:35 AM</div>
</div>
<div class="message received">
已发送，请注意查收。还有其他问题需要帮助吗？
<div class="message-time">10:36 AM</div>
</div>
</div>
<div class="chat-input">
<input type="text" id="message-input" placeholder="输入消息...">
<button class="send-button" id="send-btn">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-btn');
const chatMessages = document.querySelector('.chat-messages');
const toggleContacts = document.querySelector('.toggle-contacts');
const contactsPanel = document.querySelector('.contacts-panel');
// 发送消息功能
function sendMessage() {
const messageText = messageInput.value.trim();
if (messageText === '') return;
// 创建用户消息
const messageElement = document.createElement('div');
messageElement.classList.add('message', 'sent');
messageElement.innerHTML = `
${messageText}
<div class="message-time">${getCurrentTime()}</div>
`;
chatMessages.appendChild(messageElement);
messageInput.value = '';
// 滚动到底部
chatMessages.scrollTop = chatMessages.scrollHeight;
// 模拟客服回复（1-3秒后）
setTimeout(() => {
simulateReply(messageText);
}, 1000 + Math.random() * 2000);
}
// 获取当前时间
function getCurrentTime() {
const now = new Date();
return now.getHours().toString().padStart(2, '0') + ':' +
now.getMinutes().toString().padStart(2, '0');
}
// 模拟客服回复
function simulateReply(userMessage) {
const responses = [
"感谢您的咨询，我们会尽快为您解答。",
"好的，我明白了。请问还有其他问题吗？",
"关于您提到的内容，我可以为您提供更详细的资料。",
"我们已经记录您的需求，会有专员与您联系。",
"您的反馈对我们非常重要，谢谢您的支持！",
"根据您的需求，我建议您考虑我们的高级套餐。"
];
// 根据用户消息选择回复
let reply = responses[Math.floor(Math.random() * responses.length)];
if (userMessage.toLowerCase().includes('价格') || userMessage.includes('多少钱')) {
reply = "我们的基础版套餐每月299元，专业版599元，企业版需要根据具体需求定制价格。需要我发送详细价目表吗？";
}
if (userMessage.toLowerCase().includes('联系') || userMessage.includes('电话')) {
reply = "您可以拨打我们的客服热线：400-123-4567，工作时间是周一至周五 9:00-18:00。";
}
// 创建客服消息
const messageElement = document.createElement('div');
messageElement.classList.add('message', 'received');
messageElement.innerHTML = `
${reply}
<div class="message-time">${getCurrentTime()}</div>
`;
chatMessages.appendChild(messageElement);
// 滚动到底部
chatMessages.scrollTop = chatMessages.scrollHeight;
}
// 事件监听
sendButton.addEventListener('click', sendMessage);
messageInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendMessage();
}
});
toggleContacts.addEventListener('click', function() {
contactsPanel.classList.toggle('active');
});
// 初始滚动到底部
chatMessages.scrollTop = chatMessages.scrollHeight;
});
</script>
</body>
</html>