<template>
|
<div class="wei__scene-panel flexbox flex-direction--column">
|
<div class="wei__mask"></div>
|
<!-- //消息上墙页面 -->
|
<div class="ws__chatMsg-panel flex1">
|
<div class="chatMsg-ct">
|
<!-- //消息列表-->
|
<ul class="clearfix" id="J__chatMsgList">
|
<li class="time"><span>2017-06-12 12:30:55</span></li>
|
<!--别人-->
|
<li class="others">
|
<div class="avatar">
|
<img src="@/assets/images/active/1.png" />
|
</div>
|
<div class="content">
|
<p class="author">马云</p>
|
<div class="msg">
|
<div class="plain">
|
大家好，不要潜水啦，都出来聊天吧，给你们发红包噢~~
|
</div>
|
</div>
|
</div>
|
</li>
|
<!--自己-->
|
<li class="me">
|
<div class="avatar">
|
<img src="@/assets/images/active/2.png" />
|
</div>
|
<div class="content">
|
<p class="author">马蓉(小猫咪)</p>
|
<div class="msg">
|
<div class="plain">
|
好诶，好期待马总的红包
|
</div>
|
</div>
|
</div>
|
</li>
|
<li class="others">
|
<div class="avatar">
|
<img src="@/assets/images/active/1.png" />
|
</div>
|
<div class="content">
|
<p class="author">马云</p>
|
<div class="msg">
|
<div class="plain">
|
最近了解到您们的XXX项目很火啊，用户量蹭蹭往上长，我想详细了解下这个项目，看能否有收购的可能？？
|
</div>
|
</div>
|
</div>
|
</li>
|
<li class="others image">
|
<div class="avatar">
|
<img src="@/assets/images/active/1.png" />
|
</div>
|
<div class="content">
|
<p class="author">马云</p>
|
<div class="msg">
|
<div class="picture">
|
<img class="J__img" src="http://3g.weikeniu.com/images/ad-img001.jpg" />
|
</div>
|
</div>
|
</div>
|
</li>
|
<li class="others">
|
<div class="avatar">
|
<img src="@/assets/images/active/1.png" />
|
</div>
|
<div class="content">
|
<p class="author">马云</p>
|
<div class="msg">
|
<div class="plain">
|
这个是您们的促销活动吗？？？
|
</div>
|
</div>
|
</div>
|
</li>
|
<li class="me image">
|
<div class="avatar">
|
<img src="@/assets/images/active/2.png" />
|
</div>
|
<div class="content">
|
<p class="author">马蓉(小猫咪)</p>
|
<div class="msg">
|
<div class="picture">
|
<img class="J__img" src="http://image.woshipm.com/wp-files/2017/05/6gcOMMhnTR2iXYJ9e3EK.jpg" />
|
</div>
|
</div>
|
</div>
|
</li>
|
<li class="me">
|
<div class="avatar">
|
<img src="@/assets/images/active/2.png" />
|
</div>
|
<div class="content">
|
<p class="author">马蓉(小猫咪)</p>
|
<div class="msg">
|
<div class="plain">
|
是的，如果想要了解更多的话，可以去我们的微官网看看~~~
|
</div>
|
</div>
|
</div>
|
</li>
|
<li class="me image">
|
<div class="avatar">
|
<img src="@/assets/images/active/2.png" />
|
</div>
|
<div class="content">
|
<p class="author">马蓉(小猫咪)</p>
|
<div class="msg">
|
<div class="video">
|
<img class="J__video" src="img/video-poster.jpg" />
|
<div class="btn-play J__btnPlay" data-videoUrl="http://www.runoob.com/try/demo_source/movie.mp4"></div>
|
</div>
|
</div>
|
</div>
|
</li>
|
<li class="others">
|
<div class="avatar">
|
<img src="@/assets/images/active/1.png" />
|
</div>
|
<div class="content">
|
<p class="author">马云</p>
|
<div class="msg">
|
<div class="plain">
|
就喜欢你们看不惯我，但又干不掉我的样子! 哈哈哈~~
|
</div>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="weui-tabbar">
|
<input class="weui-input service" type="text" placeholder="请输入文本">
|
<div class="tab-operation">
|
<!-- <a href="javascript:" class="weui-search-bar__confirm-btn">发送</a> -->
|
<div class="weui-uploader__input-box">
|
<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
|
</div>
|
<!-- <i class="weui-icon-circle sevice">+</i> -->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
|
}
|
</script>
|
|
<style scoped>
|
.weui-tabbar {
|
position: fixed;
|
max-width: 41.2rem;
|
}
|
.tab-operation {
|
display: inline-block;
|
width: 40px;
|
}
|
.weui-input.service {
|
display: inline-block;
|
margin: 10px 10px;
|
border: 1px solid #dddddd;
|
border-radius: 30px;
|
padding-left: 10px;
|
height: 30px;
|
}
|
.weui-icon-circle.sevice::before {
|
position: relative;
|
top: 5px;
|
left: 25px;
|
}
|
.weui-search-bar__confirm-btn {
|
display: block;
|
padding-right: 10px;
|
line-height: 50px;
|
color: #09BB07;
|
white-space: nowrap;
|
}
|
.wei__scene-panel {
|
background: #efeff4;
|
}
|
.ws__chatMsg-panel{
|
overflow: auto;
|
padding-bottom: 150px;
|
-webkit-overflow-scrolling: touch;
|
width: 100%; /*position: absolute; top: .6rem;*/
|
}
|
.ws__chatMsg-panel .chatMsg-ct{
|
padding: .2rem;
|
}
|
.chatMsg-ct ul li{
|
float: left;
|
margin-bottom: .3rem;
|
width: 100%;
|
}
|
.chatMsg-ct ul li.time{
|
margin-top: .2rem;
|
text-align: center;
|
}
|
.chatMsg-ct ul li.time span{
|
background: rgba(50,50,50,.2);
|
color: #fff;
|
border-radius: .05rem;
|
display: inline-block;
|
font-size: 12px;
|
font-family: arial;
|
padding: .05rem .2rem;
|
}
|
.chatMsg-ct ul li.me{
|
clear: right;
|
text-align: right;
|
}
|
.chatMsg-ct ul li .avatar{
|
overflow: hidden;
|
margin-top: .4rem;
|
height: .8rem;
|
width: .8rem;
|
}
|
.chatMsg-ct ul li .avatar img{
|
border-radius: 50%;
|
vertical-align: top;
|
height: 100%;
|
width: 100%;
|
}
|
.chatMsg-ct ul li.others .avatar{
|
float: left;
|
}
|
.chatMsg-ct ul li.me .avatar{
|
float: right;
|
}
|
.chatMsg-ct ul li .content{
|
overflow: hidden;
|
}
|
.chatMsg-ct ul li .content .author{
|
color: rgba(50,50,50,.5);
|
font-size: 10px;
|
margin: 0 7px;
|
height: 10px;
|
line-height: 10px;
|
position: relative;
|
top: -10px;
|
}
|
.chatMsg-ct ul li .content .msg{
|
border: 1px solid;
|
border-radius: 1px;
|
display: inline-block;
|
font-size: 12px;
|
margin: 0 5px;
|
text-align: left;
|
word-wrap: break-word;
|
word-break: break-all;
|
min-height: 10px;
|
max-width: 60%;
|
position: relative;
|
}
|
.chatMsg-ct ul li .content .msg .plain{
|
padding: .2rem;
|
}
|
.chatMsg-ct ul li .content .msg .plain img.face{
|
vertical-align: top;
|
}
|
.chatMsg-ct ul li .content .msg .plain a{
|
color: #09f;
|
}
|
.chatMsg-ct ul li .content .msg .picture, .chatMsg-ct ul li .content .msg .video{
|
border-radius: .1rem;
|
overflow: hidden;
|
position: relative;
|
}
|
.chatMsg-ct ul li .content .msg .picture img, .chatMsg-ct ul li .content .msg .video img{
|
display: block;
|
max-height: 5rem;
|
max-width: 5rem;
|
}
|
.chatMsg-ct ul li.others .content .msg{
|
background-color: #fff;
|
border-color: #ddd;
|
}
|
.chatMsg-ct ul li.me .content .msg{
|
background-color: #90d936;
|
border-color: #95bf63;
|
}
|
.chatMsg-ct ul li .content .msg:before{
|
content: "";
|
display: inline-block;
|
border-style: solid;
|
border-width: .01rem .01rem 0 0;
|
height: .2rem;
|
width: .2rem;
|
position: absolute;
|
top: .4rem;
|
}
|
.chatMsg-ct ul li.others .content .msg:before{
|
background: inherit;
|
border-color: inherit;
|
left: -3px;
|
transform: translate(0, -50%) rotate(-135deg);
|
}
|
.chatMsg-ct ul li.me .content .msg:before{
|
background: inherit;
|
border-color: inherit;
|
right: -3px;
|
transform: translate(0, -50%) rotate(45deg);
|
}
|
.chatMsg-ct ul li.image .content .msg{
|
background: none;
|
border-width: 0;
|
}
|
.chatMsg-ct ul li.image .content .msg:before{
|
display: none;
|
}
|
.chatMsg-ct ul li .content .msg .video .play__video-wrap{
|
position: relative;
|
}
|
.chatMsg-ct ul li .content .msg .video .btn-play{
|
/*background: url(../img/wei-scene/icon-play.png) no-repeat center;*/
|
background-size: .6rem; height: 100%; width: 100%; position: absolute; left: 0; top: 0;
|
}
|
/* __ 查看大图/视频 */
|
.img__zoomIn-mask{
|
display: none;
|
background: rgba(0,0,0,.9);
|
position: fixed;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
z-index: 9999;
|
}
|
.img__zoomIn-mask .imgview{
|
transform: translate(-50%, -50%);
|
max-height: 95%;
|
max-width: 100%;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
}
|
.ws__popup-video{
|
display: none;
|
background: rgba(0,0,0,1);
|
height: 100%;
|
width: 100%;
|
position: fixed;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
z-index: 1001;
|
}
|
.ws__popup-video .popup__video-close{
|
border: .02rem solid rgba(255,252,255,.5);
|
border-radius: 50%;
|
height: .5rem;
|
width: .5rem;
|
position: absolute;
|
top: .3rem;
|
right: .3rem;
|
z-index: 101;
|
}
|
.ws__popup-video .popup__video-close:before, .ws__popup-video .popup__video-close:after{
|
content: "";
|
background: rgba(255,252,255,.5);
|
border-radius: 20px;
|
transform: translate(50%, -50%) rotate(45deg);
|
position: absolute;
|
top: 50%;
|
right: 50%;
|
}
|
.ws__popup-video .popup__video-close:before{
|
height: .3rem;
|
width: .04rem;
|
}
|
.ws__popup-video .popup__video-close:after{
|
height: .04rem;
|
width: .3rem;
|
}
|
</style>
|
