182 lines
5.9 KiB
HTML
182 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="session-con-hed">
|
||
<a class="tit">勤勤助手</a>
|
||
<div class="rit">
|
||
<a class="kf"><img class="img" src="/img/rgzn.png" alt=""></a>
|
||
<div class="menu">
|
||
<p></p>
|
||
<p></p>
|
||
<p></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="session">
|
||
|
||
|
||
<div class="customerService">
|
||
<div class="left">
|
||
<img class="img" src="/img/img_head_1@3x.png" alt="">
|
||
</div>
|
||
<div class="rit">
|
||
<p class="date"><span>今天</span><span>17:45:52</span></p>
|
||
<div class="text">
|
||
<p>老板您好，我是您的智能助理勤勤，可以帮您订机票，订酒店，有事请吩咐！
|
||
最新政策，温馨提示:
|
||
</br> 1.xxxxxxx
|
||
</br> 2.xxxxxxx
|
||
</br> 3.xxxxxxx
|
||
</br> 祝您旅途愉快！
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="user">
|
||
|
||
<div class="left">
|
||
<p class="date"><span>今天</span><span>17:45:52</span></p>
|
||
<div class="text">
|
||
<p>
|
||
在吗
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="rit">
|
||
<img class="img" src="/img/img_head_1@3x.png" alt="">
|
||
</div>
|
||
|
||
</div>
|
||
<div class="user">
|
||
|
||
<div class="left">
|
||
<p class="date"><span>今天</span><span>17:45:52</span></p>
|
||
<div class="text">
|
||
<img src="/img/icon_play_w@3x.png" alt="">
|
||
<p>
|
||
|
||
我要定11月11日，从成都到北京上午的机票。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="rit">
|
||
<img class="img" src="/img/img_head_1@3x.png" alt="">
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="customerService">
|
||
<div class="left">
|
||
<img class="img" src="/img/img_head_1@3x.png" alt="">
|
||
</div>
|
||
<div class="rit">
|
||
<p class="date"><span>今天</span><span>17:45:52</span></p>
|
||
<div class="text">
|
||
<div class="gd">
|
||
<div></div>
|
||
<button type="button">生产工单</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="user">
|
||
|
||
<div class="left">
|
||
<p class="date"><span>今天</span><span>17:45:52</span></p>
|
||
<div class="text">
|
||
|
||
<p>
|
||
|
||
转人工
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="rit">
|
||
<img class="img" src="/img/img_head_1@3x.png" alt="">
|
||
</div>
|
||
|
||
</div>
|
||
<div class="artificial">
|
||
<p>人工助理001为您服务！</p>
|
||
</div>
|
||
|
||
<div class="customerService">
|
||
<div class="left">
|
||
<img class="img" src="/img/img_head_1@3x.png" alt="">
|
||
</div>
|
||
<div class="rit">
|
||
<p class="date"><span>今天</span><span>17:45:52</span></p>
|
||
<div class="text">
|
||
<p>老板您好，我这边看一下上面的聊天需求内容，请稍等！ </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="session-footer">
|
||
<img src="/img/icon_yuyin@3x.png" class="voice" alt="">
|
||
|
||
<div>
|
||
<input class="input" type="text">
|
||
<img class="inputImg" src="/img/icon_biaoqing@3x.png" alt="">
|
||
<button class="button">按住说话</button>
|
||
</div>
|
||
<img src="/img/icon_gongju@3x.png" alt="">
|
||
|
||
|
||
<div class="moban">
|
||
<img src="/img/tittle_btn_close@2x.png" alt="">
|
||
<p class="tis">请用普通话描述您需求，如：我要定11月11日，从成都到北京上午的机票。</p>
|
||
<p class="text">请用普通话描述您需求，如：我要定11月11日，从成都到北京上午的机票。</p>
|
||
</div>
|
||
</div>
|
||
<script src="/js/jquery-3.4.1.min.js"></script>
|
||
<script>
|
||
let ifBtn = true
|
||
$(".voice").on("click", (e) => {
|
||
if (ifBtn) {
|
||
$(e.target).attr("src", "/img/icon_jianpan@3x.png")
|
||
$(".session-footer .input").css("display", "none")
|
||
$(".session-footer .inputImg").css("display", "none")
|
||
$(".session-footer .button").css("display", "block")
|
||
$(".moban").css("display", "block")
|
||
|
||
$("#session").css("paddingBottom", "17rem")
|
||
ifBtn = !ifBtn
|
||
} else {
|
||
$(e.target).attr("src", "/img/icon_yuyin@3x.png")
|
||
$(".session-footer .input").css("display", "block")
|
||
$(".session-footer .inputImg").css("display", "block")
|
||
$(".session-footer .button").css("display", "none")
|
||
$(".moban").css("display", "none")
|
||
$("#session").css("paddingBottom", "4.5rem")
|
||
ifBtn = !ifBtn
|
||
}
|
||
|
||
})
|
||
$(".session-footer .button").on("mouseover", () => {
|
||
$(".tis").css("display", "none")
|
||
$(".text").css("display", "block")
|
||
})
|
||
$(".session-footer .button").on("mouseout", () => {
|
||
$(".tis").css("display", "block")
|
||
$(".text").css("display", "none")
|
||
})
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |