<!DOCTYPE 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></title>
<link href="css/mui.min.css" rel="stylesheet" />
<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-content {
height: 100%;
padding: 44px 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;
border: solid 1px #d3d3d3;
display: inline-block;
background: #fff;
border-radius: 3px;
vertical-align: top;
text-align: center;
float: left;
padding: 3px;
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;
}
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;
}
</style>
</head>
<body contextmenu="return false;">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title" id="mui-title">chat (聊天窗口)</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' ) { %>
<i class="msg-user mui-icon mui-icon-person"></i>
<% } else { %>
<img class="msg-user-img" src="img/logo.png" alt="" />
<% } %>
<div class="msg-content">
<div class="msg-content-inner">
<% if(item.type=='text' ) { %>
<%=( item.content|| ' ') %>
<% } else if(item.type=='image' ) { %>
<img class="msg-content-image" src="<%=(item.content)%>" style="max-width: 100px;" />
<% } else if(item.type=='sound' ) { %>
<span class="mui-icon mui-icon-mic" style="font-size: 18px;font-weight: bold;"></span>
<span class="play-state">点击播放</span>
<% } %>
</div>
<div class="msg-content-arrow"></div>
</div>
<div class="mui-item-clear"></div>
</div>
<% } %>
</script>
<div class="mui-content">
<div id='msg-list'>
</div>
</div>
<footer>
<div class="footer-left">
<i id='msg-image' class="mui-icon mui-icon-camera" st
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
Alipay.zip (75个子文件)
Alipay
contacts.html 2KB
css
app.css 480B
praise.css 998B
mui.css 95KB
mine.css 1KB
friend.css 900B
common.css 1KB
home.css 2KB
mui.min.css 74KB
iconfont.css 32KB
mui.imageviewer.css 2KB
unpackage
.dependencies 4B
.confirmed_dependencies 3KB
release
H56E42D0A_0323184652.apk 5.98MB
praise.html 2KB
img
friends_icon6.png 4KB
praise_icon1.png 14KB
friends_icon7.png 48KB
friends_icon3.png 5KB
praise_icon4.png 10KB
img2.png 74KB
img1.png 78KB
praise_icon7.png 12KB
mine.png 67KB
friends_icon2.png 6KB
praise_icon6.png 14KB
banner.png 157KB
1.png 15KB
praise_icon9.png 15KB
praise_icon5.png 14KB
praise_icon2.png 14KB
praise_img2.png 107KB
praise_img3.png 113KB
friends_icon5.png 9KB
praise_icon3.png 13KB
rightimg1.png 20KB
praise_img5.png 135KB
praise_img1.png 113KB
rightimg.png 32KB
praise_icon.png 13KB
contact.png 3KB
logo.png 4KB
praise_img6.png 109KB
add.png 1KB
praise_banner.png 619KB
friends_icon1.png 3KB
friends_icon4.png 4KB
friends_icon8.png 3KB
praise_img4.png 107KB
soyiso.png 22KB
praise_icon8.png 13KB
friends.html 1KB
fonts
iconfont.eot 31KB
iconfont.ttf 31KB
iconfont.svg 179KB
iconfont.woff 20KB
mui.ttf 29KB
wealth.html 418B
manifest.json 13KB
im-chat.html 20KB
index.html 2KB
js
arttmpl.js 4KB
immersed.js 934B
mui.js 252KB
mui.min.js 120KB
mui.imageViewer.js 9KB
common.js 30KB
.project 2KB
home.html 12KB
saoma.html 3KB
mine_list.html 6KB
mine.html 900B
mine_image.html 1KB
praise_list.html 7KB
friends_list.html 5KB
共 75 条
- 1
qq_33777628
- 粉丝: 2
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
- 3
前往页