<!documentTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>im_demo</title>
<link href="../../css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="../../css/practise/iconfont.css" />
<link rel="stylesheet" type="text/css" href="../../css/app.css" />
<link href="../../css/mui.imageviewer.css" rel="stylesheet" />
<style>
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
footer {
position: fixed;
width: 100%;
height: 50px;
min-height: 50px;
border-top: solid 1px #bbb;
left: 0px;
bottom: 0px;
overflow: hidden;
padding: 0px 50px;
background-color: #fafafa;
}
.footer-left {
position: absolute;
width: 50px;
height: 50px;
left: 0px;
bottom: 0px;
text-align: center;
vertical-align: middle;
line-height: 100%;
padding: 12px 4px;
}
.footer-right {
position: absolute;
width: 50px;
height: 50px;
right: 0px;
bottom: 0px;
text-align: center;
vertical-align: middle;
line-height: 100%;
padding: 12px 5px;
display: inline-block;
}
.footer-center {
height: 100%;
padding: 5px 0px;
}
.footer-center [class*=input] {
width: 100%;
height: 100%;
border-radius: 5px;
}
.footer-center .input-text {
background: #fff;
border: solid 1px #ddd;
padding: 10px !important;
font-size: 16px !important;
line-height: 18px !important;
font-family: verdana !important;
overflow: hidden;
}
.footer-center .input-sound {
background-color: #eee;
}
.mui-bar-nav~.mui-content {
padding-top: 54px;
}
.mui-content {
height: 100%;
padding: 54px 0px 50px 0px;
overflow: auto;
background-color: #eaeaea;
}
#msg-list {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.msg-item {
padding: 8px;
clear: both;
}
.msg-item .mui-item-clear {
clear: both;
}
.msg-item .msg-user {
width: 38px;
height: 38px;
display: inline-block;
/*background: #fff;*/
border-radius: 3px;
vertical-align: top;
text-align: center;
float: left;
padding: 0px;
color: #ddd;
}
.msg-item .msg-user-img {
width: 38px;
height: 38px;
display: inline-block;
border-radius: 3px;
vertical-align: top;
text-align: center;
float: left;
color: #ddd;
}
.msg-item .msg-content {
display: inline-block;
border-radius: 5px;
border: solid 1px #d3d3d3;
background-color: #FFFFFF;
color: #333;
padding: 8px;
vertical-align: top;
font-size: 15px;
position: relative;
margin: 0px 8px;
max-width: 75%;
min-width: 35px;
float: left;
}
.msg-item .msg-content .msg-content-inner {
overflow-x: hidden;
}
.msg-item .msg-content .msg-content-arrow {
position: absolute;
border: solid 1px #d3d3d3;
border-right: none;
border-top: none;
background-color: #FFFFFF;
width: 10px;
height: 10px;
left: -5px;
top: 12px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.msg-item-self .msg-user,
.msg-item-self .msg-content {
float: right;
}
.msg-item-self .msg-content .msg-content-arrow {
left: auto;
right: -5px;
-webkit-transform: rotateZ(225deg);
transform: rotateZ(225deg);
}
.msg-item-self .msg-content,
.msg-item-self .msg-content .msg-content-arrow {
background-color: #4CD964;
color: #fff;
border-color: #2AC845;
}
.msg_time1 {
float: right;
margin-right: 48px;
height: 10px;
}
.msg_time2 {
margin-left: 48px;
/*padding: 0;*/
height: 10px;
/*border: 1px solid red;*/
}
footer .mui-icon {
color: #000;
}
footer .mui-icon:active {
color: #007AFF !important;
}
footer .mui-icon-paperplane:before {
content: "发送";
}
footer .mui-icon-paperplane {
/*-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);*/
font-size: 16px;
word-break: keep-all;
line-height: 100%;
padding-top: 6px;
color: rgba(0, 135, 250, 1);
}
#msg-sound {
-webkit-user-select: none !important;
user-select: none !important;
}
.rprogress {
position: absolute;
left: 50%;
top: 50%;
width: 140px;
height: 140px;
margin-left: -70px;
margin-top: -70px;
background-image: url(../images/arecord.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 30px 30px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 5px;
display: none;
-webkit-transition: .15s;
}
.rschedule {
background-color: rgba(0, 0, 0, 0);
border: 5px solid rgba(0, 183, 229, 0.9);
opacity: .9;
border-left: 5px solid rgba(0, 0, 0, 0);
border-right: 5px solid rgba(0, 0, 0, 0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 46px;
height: 46px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -23px;
margin-top: -23px;
-webkit-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
}
.r-sigh {
display: none;
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 46px;
height: 46px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -23px;
margin-top: -23px;
text-align: center;
line-height: 46px;
font-size: 40px;
font-weight: bold;
color: #2187e7;
}
.rprogress-sigh {
background-image: none !important;
}
.rprogress-sigh .rschedule {
display: none !important;
}
.rprogress-sigh .r-sigh {
display: block !important;
}
.rsalert {
font-size: 12px;
color: #bbb;
text-align: center;
position: absolute;
border-radius: 5px;
width: 130px;
margin: 5px 5px;
padding: 5px;
left: 0px;
bottom: 0px;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#h {
background: #fff;
border: solid 1px #ddd;
padding: 10px !important;
font-size: 16px !important;
font-family: verdana !important;
line-height: 18px !important;
overflow: visible;
position: absolute;
left: -1000px;
right: 0px;
word-break: break-all;
word-wrap: break-word;
}
.cancel {
background-color: darkred;
}
.icon_back{
left: 0px;
background: url(../../img/image/icon_header.png) no-repeat 12px 0;
background-size: 100% auto;
position: absolute;
display: block;
width: 48px;
height: 42px;
}
.message_plane{
right: 0px;
background: url(../../img/image/icon_myChance.png) no-repeat 17px 13px;
background-size: 40% auto;
position: absolute;
display: block;
width: 48px;
height: 42px;
}
</style>
</head>
<body contextmenu="return false;">
<header class="mui-bar mui-bar-nav" style="background-color: #00afd4;height: 44px;">
<span id="headerBack" class="icon_back"></span>
<h1 id="messageName" class="mui-title" style="color: white;"></h1>
</header>
<pre id='h'></pre>
<script id='msg-template' type="text/template">
<% for(var i in record){ var item=record[i]; %>
<div class="msg-item <%= (item.sender=='self'?'msg-item-self':'') %>" msg-type='<%=(item.type)%>' msg-content='<%=(item.content)%>'>
<% if(item.sender=='self' ) {
if(item.time!=null && item.time!=""){
%>
<p class="msg_time1">
<%=item.time%>
</p>
<br />
<%}%>
<!-
没有合适的资源?快使用搜索试试~ 我知道了~
融云web+mui
共64个文件
png:20个
js:18个
css:11个
4星 · 超过85%的资源 需积分: 13 26 下载量 74 浏览量
2018-09-05
17:09:49
上传
评论
收藏 337KB RAR 举报
温馨提示
融云web集成聊天,配合Mui。需要用HBuilder打开。里面所用的api牵扯到原生。打包成APP就能实现功能。
资源推荐
资源详情
资源评论
收起资源包目录
im_demo.rar (64个子文件)
im_demo
css
mui.css 83KB
feedback-page.css 1KB
imgPreview.css 3KB
mui.indexedlist.css 2KB
message
message.css 5KB
mui.min.css 65KB
map_common.css 6KB
practise
common.css 25KB
rest.css 929B
iconfont.css 2KB
mui.imageviewer.css 2KB
unpackage
.dependencies 4B
.confirmed_dependencies 3KB
img
operation
operation_my_chance.png 34KB
opretion_guide_address02.png 14KB
operation_head_img.png 46KB
operation_create_label.png 29KB
operation_my_resume.png 18KB
operation_guide_longpress.png 29KB
opretion_guide_address01.png 10KB
image
icon_radio_agreement_hig.png 2KB
poto_msg_system.jpg 4KB
icon_mian_tab_bar.png 5KB
icon_header.png 4KB
icon_finish.png 1KB
sigin_logo.png 11KB
weixin57.png 2KB
icon_vido_play.png 2KB
icon_radio_hig.png 2KB
icon_back_have_bg.png 1KB
icon_ delete.png 2KB
icon_reject.png 1KB
icon_del.png 2KB
icon_close.png 1KB
fonts
mui.ttf 29KB
manifest.json 14KB
index.html 3KB
js
arttmpl.js 4KB
index.js 4KB
mui.previewimage.js 13KB
mui.indexedlist.js 6KB
mui.min.js 104KB
mui.imageViewer.js 9KB
practise
config.js 711B
do.js 6KB
friends.js 904B
message.js 7KB
.DS_Store 6KB
im.js 17KB
guide.js 1KB
select.js 881B
message
system_message.js 994B
message_search.js 3KB
message_talk_info.js 13KB
common.js 10KB
push.js 2KB
.DS_Store 6KB
.project 2KB
pages
friends.html 2KB
select.html 2KB
message
system_message.html 1KB
message_search.html 3KB
message_talk_info.html 10KB
message.html 2KB
共 64 条
- 1
资源评论
- 堕落爱情海2023-03-15运行起来没有数据啊
- SJ6501062019-01-17融云web+mui
李墨瞳
- 粉丝: 55
- 资源: 5
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功