You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
5.0 KiB
HTML
109 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>智能机器人聊天室</title>
|
|
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
|
<script>
|
|
function browserRedirect() {
|
|
var sUserAgent = navigator.userAgent.toLowerCase();
|
|
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
|
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
|
|
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
|
|
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
|
|
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
|
|
var bIsAndroid = sUserAgent.match(/android/i) == "android";
|
|
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
|
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
|
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
|
|
console.log('在移动端浏览');
|
|
} else {
|
|
console.log('在pc端浏览');
|
|
window.location.href='index.html'
|
|
}
|
|
}
|
|
browserRedirect();
|
|
</script>
|
|
<link rel="stylesheet" href="css/im.css">
|
|
<link href="css/face.css" rel=stylesheet>
|
|
<link rel="stylesheet" href="//at.alicdn.com/t/font_1gugdacttrv5z5mi.css">
|
|
<link rel="stylesheet" href="css/animate.css">
|
|
</head>
|
|
<body>
|
|
<audio src="img/8400.mp3" id="audio"></audio>
|
|
<div class="ui-chat-box" id="content">
|
|
<header class="ui-section">
|
|
<div class="menu-back" @click="show=false" v-show="show"><span class="iconfont icon-left" ></span></div>
|
|
<span v-text="channel.nickName"></span>
|
|
<div class="menu-btn" @click="show=true"><span class="iconfont icon-caidan01"></span></div>
|
|
</header>
|
|
<section class="ui-section ui-msg-content" ref="list">
|
|
<ul class="ui-msg-list">
|
|
<template v-for="item in msgList">
|
|
<msg-item :msg="item" ></msg-item>
|
|
</template>
|
|
</ul>
|
|
</section>
|
|
<footer class="ui-section">
|
|
<div class="ui-face-btn"><span class="iconfont icon-biaoqing"></span></div>
|
|
<div class="ui-input-box">
|
|
<input type="text" class="ui-msg-input" v-model="content" @keyup.enter="sendMsg" placeholder="请输入...."/>
|
|
</div>
|
|
<button class="ui-sendBtn" type="button" v-on:click="sendMsg">发送</button>
|
|
</footer>
|
|
<transition name='custom-classes-transition' enter-active-class="animated fadeInRight"
|
|
leave-active-class="animated fadeOutRight">
|
|
<div class="user-list-box" v-show="show">
|
|
<ul class="user-list">
|
|
<template v-for="item in onlineList">
|
|
<user-item :user="item" :channel="channel" :show="show" :time="time" ></user-item>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
<template id="msgTpl">
|
|
<li class="user-msg" v-if="msg.type==='user'">
|
|
<div class="msg-box">
|
|
<div class="msg-box-img">
|
|
<img v-bind:src="msg.content.user.pic" class="user-img">
|
|
<div class="msg-tag-txt">{{msg.content.user.nickName}}</div>
|
|
</div>
|
|
<div class="msg-txt-box">
|
|
<div class="msg-txt-content"><span class="msg-arrow"></span><div v-html="msg.content.msg"></div></div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="me-msg" v-else-if="msg.type==='send'" >
|
|
<div class="msg-box">
|
|
<div class="msg-box-img">
|
|
<img v-bind:src="msg.content.user.pic" class="user-img">
|
|
<div class="msg-tag-txt">我</div>
|
|
</div>
|
|
<div class="msg-txt-box">
|
|
<div class="msg-txt-content"><span class="msg-arrow"></span><div v-html="msg.content.msg"></div></div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="sys-msg" v-else="msg.type==='sys'">
|
|
<div class="msg-box"><div v-html="msg.content.msg"></div></div>
|
|
</li>
|
|
</template>
|
|
<template id="userTpl">
|
|
<li class="user-item" :class="user.id==channel.id?'active':''" @click="changeChannel(user)">
|
|
<div class="user-img-box">
|
|
<img class="user-pic" :src="user.pic">
|
|
</div>
|
|
<div class="user-info">
|
|
<div class="info-row">{{user.nickName}}</div>
|
|
<div class="info-row">{{getLastMsg(user)}}</div>
|
|
<span style="display: none">{{time}}</span>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
<script src="https://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
|
|
<script src="https://cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js"></script>
|
|
<script src="js/face.js"></script>
|
|
<script src="js/im.js"></script>
|
|
</body>
|
|
</html> |