代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>云客服-会话</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1889904_ytct0asgwq.css" />
<link rel="stylesheet" type="text/css" href="css/session.css" />
</head>
<body>
<div class="container">
<div class="nav">
<div class="logo">Logo</div>
<div class="menu">
<a href="home.html">
<div class="menu-item"><i class="iconfont icon-i-home"></i>
<div class="text">首页</div>
</div>
</a>
<a href="session.html">
<div class="menu-item"><i class="iconfont icon-msg"></i>
<div class="text">会话</div>
</div>
</a>
<a href="visitors.html">
<div class="menu-item"><i class="iconfont icon-cc-users"></i>
<div class="text">访客</div>
</div>
</a>
<a href="history.html">
<div class="menu-item"><i class="iconfont icon-history"></i>
<div class="text">历史</div>
</div>
</a>
<a href="customer.html">
<div class="menu-item"><i class="iconfont icon-customer"></i>
<div class="text">客户</div>
</div>
</a>
<a href="worksheet.html">
<div class="menu-item"><i class="iconfont icon-order"></i>
<div class="text">工单</div>
</div>
</a>
<a href="">
<div class="menu-item"><i class="iconfont icon-statics"></i>
<div class="text">统计</div>
</div>
</a>
<div class="menu-item separate-line"><i class="iconfont icon-fengexian"></i></div>
<div class="menu-item"><i class="iconfont icon-Settingscontroloptions"></i>
<div class="text">设置</div>
</div>
<div class="menu-item"><i class="iconfont icon-logout"></i>
<div class="text">退出</div>
</div>
</div>
</div>
<div class="top">
<div class="h3">会话</div>
<div class="users-info">
<div class="user-msg msg"><i class="iconfont icon-lingdang"></i></div>
<div class="user-img"><img src="img/u94.svg"></div>
<div class="user-name">
客服七尾<i class="iconfont icon-icon_down-arrow"></i>
<div class="user-status">
<div class="user-status-item active"><i class="iconfont icon-dian"></i>在线</div>
<div class="user-status-item"><i class="iconfont icon-dian"></i>离线</div>
</div>
</div>
</div>
</div>
<div class="top">
<div class="h3">会话</div>
<div class="users-info">
<div class="user-msg msg"><i class="iconfont icon-lingdang"></i></div>
<div class="user-img"><img src="img/u94.svg"></div>
<div class="user-name">
客服七尾<i class="iconfont icon-icon_down-arrow"></i>
<div class="user-status">
<div class="user-status-item active"><i class="iconfont icon-dian"></i>在线</div>
<div class="user-status-item"><i class="iconfont icon-dian"></i>离线</div>
</div>
</div>
</div>
</div>
<div class="main-area">
<div class="user-list">
<dl>
<dt>当前会话</dt>
<dd>
<div class="user-img">
<i class="iconfont icon-beizit"></i>
</div>
<div class="msg-info">
<div class="user-info"><span class="user">北京客户</span><span class="msg-time">10:12</span></div>
<div class="msg-latest">你好，我想咨询下</div>
</div>
</dd>
<dd class="active">
<div class="user-img">
<i class="iconfont icon-beizit"></i>
</div>
<div class="msg-info">
<div class="user-info"><span class="user">北京客户</span><span class="msg-time">10:12</span></div>
<div class="msg-latest">你好，我想咨询下</div>
</div>
</dd>
<dd>
<div class="user-img">
<i class="iconfont icon-beizit"></i>
</div>
<div class="msg-info">
<div class="user-info"><span class="user">北京客户</span><span class="msg-time">10:12</span></div>
<div class="msg-latest">你好，我想咨询下</div>
</div>
</dd>
<dd>
<div class="user-img">
<i class="iconfont icon-beizit"></i>
</div>
<div class="msg-info">
<div class="user-info"><span class="user">北京客户</span><span class="msg-time">10:12</span></div>
<div class="msg-latest">你好，我想咨询下</div>
</div>
</dd>
</dl>
</div>
<div class="session-box">
<div class="session-head">
<div class="user-info">
<span class="user-name">北京客户</span>
<span class="session-index">首次会话</span>
</div>
<div class="dialog-btns">
<span class="dialog-btn"><i class="iconfont icon-add"></i>创建工单</span>
<span class="dialog-btn"><i class="iconfont icon-fanhui"></i>转接</span>
<span class="dialog-btn"><i class="iconfont icon-lahei"></i>拉黑</span>
<span class="dialog-btn"><i class="iconfont icon-jieshu"></i>结束会话</span>
</div>
</div>
<div class="session-body">
<div class="session-main-body">
<div class="session-window">
<div class="session-msg sender">
<div class="user-img">
<i class="iconfont icon-beizit"></i>
</div>
<div class="msg-detail">
<div class="msg-title">
<span class="user-name">客服1号</span>
<span class="msg-time">2020/06/09 20:09</span>
</div>
<div class="msg-content">您好，请问有什么可以帮您呢？您好，请问有什么可以帮您呢？</div>
</div>
</div>
<div class="session-msg receiver">
<div class="user-img">
<i class="iconfont icon-beizit"></i>
</div>
<div class="msg-detail">
<div class="msg-title">
<span class="user-name">北京客户</span>
<span class="msg-time">2020/06/09 20:09</span>
</div>
<div class="msg-content">您好，我想咨询下。。。？</div>
</div>
</div>
<div class="session-msg receiver">
<div class="user-img">
<i class="iconfont icon-beizit"></i>
</div>
<div class="msg-detail">
<div class="msg-title">
<span class="user-name">北京客户</span>
<span class="msg-time">2020/06/09 20:09</span>
</div>
<div class="msg-content">您好，我想咨询下。。。？</div>
</div>
</div>
<div class="session-msg receiver">
<div class="user-img">
<i class="iconfont icon-beizit"></i>
</div>
<div class="msg-detail">
<div class="msg-title">
<span class="user-name">北京客户</span>
<span class="msg-time">2020/06/09 20:09</span>
</div>
<div class="msg-content">您好，我想咨询下。。。？</div>
</div>
</div>
<div class="session-msg receiver">
<div class="user-img">
<i class="iconfont icon-beizit"></i>
</div>
<div class="msg-detail">
<div class="msg-title">
<span class="user-name">北京客户</span>
<span class="msg-time">2020/06/09 20:09</span>
</div>
<div class="msg-content">您好，我想咨询下。。。？</div>
</div>
</div>
</div>
<div class="session-input">
<div class="icon-img">
<span class="icon"><i class="iconfont icon-xiaolian1"></i></span>
<span class="file"><i class="iconfont icon-tupian"></i></span>
</div>
<div class="input-box">
<textarea id="msg" placeholder="请输入内容">
</textarea>
</div>
<div class="input-btn">
<button type="button">发送</button>
</div>
</div>
</div>
<div class="session-util-tab">
<dl>
<dt>
<span class="tab-title active">资料</span>
<span class="tab-title">常用语</span>
<span class="tab-title">历史工单</span>
</dt>
<dd>
<div class="tab-content active">
<div class="cusinfo">
<p style="font-size: 16px;margin-top: 10px;">访客信息</p>
<p><span style="font-size: 12px;fontfont-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 来源
</span><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;"> 北京市客户</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> IP地址</span><span
style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;">
王伟</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 浏览器</span><span
style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;">
</span><span style="font-family:'ArialMT', 'Arial', sans-serif;">—</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 屏幕尺寸</span><span
style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;">
</span><span style="font-family:'ArialMT', 'Arial', sans-serif;">—</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 设备</span><span
style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;">
</span><span style="font-family:'ArialMT', 'Arial', sans-serif;">—</span></p>
<p style="font-size: 16px;margin-top: 10px;">客户信息</p>
<p><span style="font-size: 12px;fontfont-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 客户名称
</span><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;">北京市客户</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 真实姓名</span>
<span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;">
王伟</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 客户电话</span><span
style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;">
</span><span style="font-family:'ArialMT', 'Arial', sans-serif;">—</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 客户邮箱</span><span
style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;">
</span><span style="font-family:'ArialMT', 'Arial', sans-serif;">—</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 客户公司</span><span
style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;">
</span><span style="font-family:'ArialMT', 'Arial', sans-serif;">—</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 客户地址
</span><span style="font-size: 12px;font-family:'ArialMT', 'Arial', sans-serif;"> —</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 客户等级
</span><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;"> 普通客户</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 客户来源
</span><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;"> 访客转化</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 客户备注
</span><span style="font-size: 12px;font-family:'ArialMT', 'Arial', sans-serif;"> —</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 客户标签</span></p>
</div>
</div>
<div class="tab-content">常用语</div>
<div class="tab-content">
<div class=cusinfo">
<p style="font-size: 16px;margin-top: 10px;">工单信息</p>
<p><span style="font-size: 12px;fontfont-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 工单标题
</span><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;">分类一</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 工单描述</span><span
style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;"> 客户需要型号SU-CC8990的产品的详细报价，请速联系。</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 工单分类</span><span
style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;"> 分类一
</span><span style="font-family:'ArialMT', 'Arial', sans-serif;"></span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 抄送人 </span><span
style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;"> 王涛，吴敏儿
</span><span style="font-family:'ArialMT', 'Arial', sans-serif;"></span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 优先级</span><span
style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;"> 低
</span><span style="font-family:'ArialMT', 'Arial', sans-serif;"></span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 工单状态
</span><span style="font-size: 12px;font-family:'ArialMT', 'Arial', sans-serif;"> 处理中</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 受理客服组
</span><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;">客服组一</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 受理客户
</span><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;">王先生</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 创建时间
</span><span style="font-size: 12px;font-family:'ArialMT', 'Arial', sans-serif;">2020/06/09 20:09</span></p>
<p><span style="font-size: 12px;font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#CCCCCC;"> 更新时间
</span><span style="font-size: 12px;font-family:'ArialMT', 'Arial', sans-serif;">2020/06/09 20:09</span></p>
</div>
</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- 导入jQuery -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/session.js" type="text/javascript" charset="utf-8"></script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
