AI对话
This commit is contained in:
parent
b203736558
commit
e2f6b2585f
|
|
@ -0,0 +1,126 @@
|
|||
body{
|
||||
height: 100vh;
|
||||
}
|
||||
.ai_content{
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
background:url(../image/timg.jpg) no-repeat center center;
|
||||
background-size:contain;
|
||||
}
|
||||
.ai_title{
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background: rgba(15, 25, 50, 0.3);
|
||||
color: #fff;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
#box {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
margin: 100px auto 0;
|
||||
}
|
||||
.b_body {
|
||||
width: 100%;
|
||||
height: 420px;
|
||||
overflow: auto;
|
||||
padding: 20px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.b-head {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
.h_span {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
line-height: 60px;
|
||||
float: left;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.rotWord, .mWord {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.rotWord span {
|
||||
background: url(../image/head.jpg);
|
||||
background-size:100% 100%;
|
||||
border-radius: 50%;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-left: 20px;
|
||||
float: left;
|
||||
}
|
||||
.rotWord p {
|
||||
word-break: break-all;
|
||||
top: 4px;
|
||||
float: left;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin-left: 10px;
|
||||
padding: 10px;
|
||||
line-height: 24px;
|
||||
background: rgba(0, 0, 255, .5);
|
||||
border-radius: 6px;
|
||||
max-width: 220px;
|
||||
}
|
||||
.mWord span {
|
||||
background: url(../image/wo.png);
|
||||
background-size:100% 100%;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.mWord p {
|
||||
word-break: break-all;
|
||||
top: 2px;
|
||||
float: right;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
padding: 10px;
|
||||
line-height: 24px;
|
||||
background: #19b955;
|
||||
border-radius: 6px;
|
||||
max-width: 220px;
|
||||
}
|
||||
.b-footer {
|
||||
width: 760px;
|
||||
height: 60px;
|
||||
margin: 0 20px;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
#f-left {
|
||||
padding-left: 20px;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
width: 620px;
|
||||
height: 60px;
|
||||
float: left;
|
||||
background: rgba(225, 225, 225, .6);
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#btn {
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
background: #666666;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
user-select: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>map</title>
|
||||
<script src="./js/jQuery-1.8.3.min.js"></script>
|
||||
<link href="./css/machine.css" rel="stylesheet">
|
||||
<link href="./css/demo.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="ai_content">
|
||||
<p class="ai_title">对话机器人</p>
|
||||
<div id="box">
|
||||
<div class="b-head">
|
||||
<span class="h_span">AI对话</span>
|
||||
</div>
|
||||
<div class="b_body">
|
||||
<div class="rotWord">
|
||||
<span></span>
|
||||
<p id="member">我们聊聊吧！</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="b-footer">
|
||||
<input type="text" name="text" id="f-left">
|
||||
<div id="btn">发送</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var params = window.location.href.split('?');
|
||||
console.log(params);
|
||||
$(function(){
|
||||
if(params.length>1){
|
||||
action('中印边境包含哪几段');
|
||||
}
|
||||
})
|
||||
var array = [
|
||||
{
|
||||
input:'中印边境包含哪几段',
|
||||
output:'中印边境包含东段、中段、西段以及锡金段。'
|
||||
},{
|
||||
input:'中印边境问题引发了哪些对峙事件？',
|
||||
output:'中印边境问题引发了桑多河谷对峙、洞朗对峙、班公湖对峙。'
|
||||
},{
|
||||
input:'班公湖对峙发生于哪里',
|
||||
output:'发生在拉达克地区的班公湖北岸。'
|
||||
},{
|
||||
input:'班公湖近况如何？',
|
||||
output:'2019年9月14日印军逼近拉达克地区的班公湖。'
|
||||
},{
|
||||
input:'印军近期在班公湖的活动？',
|
||||
output:'印军在拉达克地区举行联合军演、印度北部军区司令到班公湖巡视。'
|
||||
},{
|
||||
input:'哟',
|
||||
output:'耶~'
|
||||
}
|
||||
]
|
||||
var text = $("#f-left");
|
||||
text.focus();
|
||||
function action(value)
|
||||
{
|
||||
if(value==null||value=="")
|
||||
{
|
||||
text.focus();
|
||||
return;
|
||||
}
|
||||
var html = '<div class="mWord"><span></span><p>'+value+'</p></div>';
|
||||
$(".b_body").append(html);
|
||||
|
||||
var answer = "";
|
||||
for(var i = 0 ;i<array.length;i++){
|
||||
if( array[i].input.indexOf(value) > -1 ){
|
||||
answer = '<div class="rotWord"><span></span><p id="member">'+array[i].output+'</p></div>';
|
||||
continue;
|
||||
}
|
||||
}
|
||||
answer = answer || '<div class="rotWord"><span></span><p id="member">你说什么？能再说一遍吗？</p></div>';
|
||||
setTimeout(() => {
|
||||
$(".b_body").append(answer);
|
||||
$(".b_body").scrollTop(10000000);
|
||||
}, 500);
|
||||
$(".b_body").scrollTop(10000000);
|
||||
text.val('');
|
||||
}
|
||||
$("#btn").click(function()//鼠标点击
|
||||
{
|
||||
action(text.val());
|
||||
});
|
||||
$(document).keydown(function(event)//回车
|
||||
{
|
||||
if(event.keyCode==13)
|
||||
{
|
||||
action(text.val());
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
9
map.html
9
map.html
|
|
@ -19,7 +19,7 @@
|
|||
<img src="./image/voice.gif" alt="" width="100px"/>
|
||||
<p class="voice-btn">
|
||||
<a href="javascript:void(0)" onclick="cancelVoice();">取消</a>
|
||||
<a href="javascript:void(0)" onclick="cancelVoice();">确定</a>
|
||||
<a href="./machine.html?params=true" >确定</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -73,8 +73,8 @@
|
|||
<a class="bottomItem active" href="javscript:void(0)">
|
||||
<img src="./image/1.png" />服务优势
|
||||
</a>
|
||||
<a class="bottomItem" href="javscript:void(0)">
|
||||
<img src="./image/2.png" />引擎服务
|
||||
<a class="bottomItem" href="./machine.html">
|
||||
<img src="./image/2.png" />AI语音
|
||||
</a>
|
||||
<a class="bottomItem" href="javscript:void(0)">
|
||||
<img src="./image/3.png" />案例精选
|
||||
|
|
@ -114,9 +114,6 @@
|
|||
<div>
|
||||
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/5.jpg" />
|
||||
</div>
|
||||
<!-- <div class="next_button"></div>
|
||||
<div class="prev_button"></div> -->
|
||||
<!-- <div class="nav_indicators"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue