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"/>
|
<img src="./image/voice.gif" alt="" width="100px"/>
|
||||||
<p class="voice-btn">
|
<p class="voice-btn">
|
||||||
<a href="javascript:void(0)" onclick="cancelVoice();">取消</a>
|
<a href="javascript:void(0)" onclick="cancelVoice();">取消</a>
|
||||||
<a href="javascript:void(0)" onclick="cancelVoice();">确定</a>
|
<a href="./machine.html?params=true" >确定</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -73,8 +73,8 @@
|
||||||
<a class="bottomItem active" href="javscript:void(0)">
|
<a class="bottomItem active" href="javscript:void(0)">
|
||||||
<img src="./image/1.png" />服务优势
|
<img src="./image/1.png" />服务优势
|
||||||
</a>
|
</a>
|
||||||
<a class="bottomItem" href="javscript:void(0)">
|
<a class="bottomItem" href="./machine.html">
|
||||||
<img src="./image/2.png" />引擎服务
|
<img src="./image/2.png" />AI语音
|
||||||
</a>
|
</a>
|
||||||
<a class="bottomItem" href="javscript:void(0)">
|
<a class="bottomItem" href="javscript:void(0)">
|
||||||
<img src="./image/3.png" />案例精选
|
<img src="./image/3.png" />案例精选
|
||||||
|
|
@ -114,9 +114,6 @@
|
||||||
<div>
|
<div>
|
||||||
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/5.jpg" />
|
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/5.jpg" />
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="next_button"></div>
|
|
||||||
<div class="prev_button"></div> -->
|
|
||||||
<!-- <div class="nav_indicators"></div> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue