<!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" />
<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 0 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: 170%;
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%;
padding: 10px 0;
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-user-img2 {
width: 38px;
height: 38px;
display: inline-block;
border-radius: 3px;
vertical-align: top;
text-align: center;
float: right;
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 {
/*-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);
}
@-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;
}
.msg-time {
width: 100%;
text-align: center;
padding: 5px;
}
.msg-time span {
display: inline-block;
padding: 4px 8px 3px;
font-size: 11px;
line-height: 14px;
background: #d7d7d7;
color: #fff;
border-radius: 2px
}
</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" style="text-align: left;" id="title"></h1>
</header>
<pre id='h'></pre>
<div class="mui-content" id="m_content">
<div id='msg-list'>
<span style="display: none;">
<div class="msg-item msg-item-self">
<img class="msg-user-img2" src="../images/doctor_icon.jpg" alt="" />
<div class="msg-content">
<div class="msg-content-inner">
<img class="msg-content-image" src="../images/goods_img2.jpg" style="max-width: 100px;" />
</div>
<div class="msg-content-arrow"></div>
</div>
<div class="mui-item-clear"></div>
</div>
<div class="msg-time"><span>2017-12-31 晚上23:24</span></div>
<div class="msg-item">
<img class="msg-user-img" src="../images/mmz_logo.png" alt="" />
<div class="msg-content">
<div class="msg-content-inner">
你好啊
</div>
<div class="msg-content-arrow"></div>
</div>
<div class="mui-item-clear"></div>
</div>
<div class="msg-item">
<img class="msg-user-img" src="../images/mmz_logo.png" alt="" />
<div class="msg-content">
<div class="msg-content-inner">
今天吃饭了吗？今天吃饭了吗？今天吃饭了吗？今天吃饭了吗？今天吃饭了吗？今天吃饭了吗？今天吃饭了吗？
</div>
<div class="msg-content-arrow"></div>
</div>
<div class="mui-item-clear"></div>
</div>
<div class="msg-time"><span>周一23:24</span></div>
<div class="msg-item msg-item-self">
<img class="msg-user-img2" src="../images/doctor_icon.jpg" alt="" />
<div class="msg-content">
<div class="msg-content-inner">
吃过了，你呢？<br />
<br /> 你呢？
</div>
<div class="msg-content-arrow"></div>
</div>
<div class="mui-item-clear"></div>
</div>
<div class="msg-item">
<img class="msg-user-img" src="../images/mmz_logo.png" alt="" />
<div class="msg-content">
<div class="msg-content-inner">
今天吃饭了吗？今天吃饭了吗？今天吃饭了吗？今天吃饭了吗？今天吃饭了吗？今天吃饭了吗？今天吃饭了吗？
</div>
<div class="msg-content-arrow"></div>
</div>
<div class="mui-item-clear"></div>
</div>
<div class="msg-time"><span>10:24</span></div>
<div class="msg-item msg-item-self">
<img class="msg-user-img2" src="../images/doctor_icon.jpg" alt="" />
<div class="msg-content">
<div class="msg-content-inner">
吃过了，你呢？ 你呢？吃过了，你呢？ 你呢？吃过了，你呢？ 你呢？吃过了，你呢？ 你呢？吃过了，你呢？ 你呢？
</div>
<div class="msg-content-arrow"></div>
<
mui框架的聊天dome仅限APP使用
1星 需积分: 50 117 浏览量
2018-07-12
10:06:18
上传
评论
收藏 180KB ZIP 举报 
聊天.zip （13个子文件） 
聊天 css 
mui.min.css 74KB mui.css 95KB .project 1KB manifest.json 8KB
chat_view.html 12KB unpackage .confirmed_dependencies 148B fonts mui.ttf 29KB js mui.js 257KB jquery-2.1.1.min.js 82KB mui.min.js 121KB castapp.js 45KB index.html 652B chat.html 8KB资源评论
勇闯天亚2019-01-12不能用，哎
