wxgzh/resources/views/admin/chat/message.blade.php

<link type="text/css" rel="stylesheet" href="/css/font/iconfont.css">
<style>
	.content-wrapper{
		display: flex;
		flex: 1;
	}
	#app{
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.content{
		display: flex;
		flex: 1;
		margin: 0;
		padding: 15px;
	}
	.chat_iframe{
		display: flex;
		flex-direction: column;
		flex: 1;
		background-color: #FFFFFF;
		border-radius:5px;
		box-shadow:0 1px 3px rgba(33,33,33,.2);
	}
	.chat_iframe .top{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		 background: #f96332;
		 background:-webkit-linear-gradient(45deg,#ff8c44,#f96332);
		 color:#fff;
		 height:50px;
		 border-radius:5px 5px 0 0;
		 padding:0 15px;
	}
	.top .image{background:url(/images/people-ico19.png) no-repeat; width:28px; height: 28px; margin-right:5px; display: inline-block; vertical-align: -7px;}
	.top_left em{
		font-size: 16px;
		font-weight: bold;
	}
	.top_left span{
		font-size: 14px;
	}
	.chat_iframe .down{
		display: flex;
		flex-direction: row;
		flex: 1;
	}
	.down .nav{
		display: flex;
		flex-direction: column;
		width:80px;
		background:#292928;
		border-radius:0 0 0 5px;
		color: #999;
	}
	.nav .li{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 15px 0;
		font-size: 12px;
		position: relative;
	}
	.nav .li i{
			left: 50%;
		    top: 8px;
		    font-size: 12px;
		    display: block;
		    font-style: normal;
		    line-height: 19px;
		    min-width: 20px;
		    height: 20px;
		    border-radius: 20px;
		    background: #ff3b30;
		    position: absolute;
		    color: #fff;
		    padding: 0 5px;
		    box-sizing: border-box;
		    text-align: center;
	}
	.down .nav .icon1{
		width: 25px;
		height: 25px;
		background: url(/images/people-ico1.png) 0 0 no-repeat;
		background-size: 100%;
	}
	.down .nav .hover{
		color: #ff8c44;
	}
	.down .nav .hover .icon1{
		background: url(/images/people-ico4.png) 0 0 no-repeat;
		background-size: 100%;
	}
	.down .nav .icon2{
		width: 25px;
		height: 25px;
		background: url(/images/people-ico2.png) 0 0 no-repeat;
		background-size: 100%;
	}
	.down .nav .hover .icon2{
		background: url(/images/people-ico5.png) 0 0 no-repeat;
		background-size: 100%;
	}
	.down .nav .icon3{
		width: 25px;
		height: 25px;
		background: url(/images/people-ico3.png) 0 0 no-repeat;
		background-size: 100%;
	}
	.down .nav .hover .icon3{
		background: url(/images/people-ico6.png) 0 0 no-repeat;
		background-size: 100%;
	}
	.down .nav .icon4{
		width: 25px;
		height: 25px;
		background: url(/images/people-ico24.png) 0 0 no-repeat;
		background-size: 100%;
	}
	.down .nav .hover .icon4{
		background: url(/images/people-ico25.png) 0 0 no-repeat;
		background-size: 100%;
	}
	.down .nav .icon5{
		width: 25px;
		height: 25px;
		background: url(/images/people-ico22.png) 0 0 no-repeat;
		background-size: 100%;
	}
	.down .nav_content{
		display: flex;
		flex-direction: row;
		flex: 1;
	}
	
	.nav_content .my{
		display: flex;
		flex-direction: row;
		flex: 1;
		overflow: hidden;
	}
	.my .users{
		display: flex;
		flex-direction: column;
		width: 240px;
		max-height: 484px;
		overflow: hidden;
	}
	.my .users ul{
		overflow-y: auto;
	}
	.users li{
		display: flex;
		    border-bottom: #eee solid 1px;
		    overflow: hidden;
		    padding: 10px 15px;
		    cursor: default;
		    position: relative;
		    -webkit-transition: all .3s;
	}
	.users li.hover{
		background-color: #fffdf2;
	}
	.users li .news-number{
		left: 45px;
		top: 10px;
		font-size: 12px;
		display: block;
		font-style: normal;
		line-height: 19px;
		min-width: 20px;
		height: 20px;
		border-radius: 20px;
		background: #ff3b30;
		position: absolute;
		color: #fff;
		padding: 0 5px;
		box-sizing: border-box;
		text-align: center;
	}
	.users li .li_left{
		display: flex;
		align-items: center;
		width: 50px;
	}
	.users li .li_left img{
		width: 50px;
		height: 50px;
		border-radius:100%;
	}
	.users li .li_right{
		display: flex;
		flex-direction: column;
		flex: 1;
		margin-left: 12px;
	}
	.users li .li_right i{
		font-size: 12px;
		padding: 3px 0;
	}
	.users li .li_right .li_right_name{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.users li .li_right .li_right_name em{
		padding-left: 17px;
		background: url(/images/people-ico11.png) left 3px  no-repeat;
		color: #cccccc;
	}
	.users li .li_right .li_right_name i{
		font-size: 14px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.my .info{
		display: flex;
		flex-direction: column;
		flex: 1;
		border-left: #eef1f5 solid 1px;
	}
	.my .info .info_top{
		display: flex;
		border-bottom: #eee solid 1px;
		line-height: 49px;
		padding: 0 15px;
		flex-direction: row;
		justify-content: space-between;
	}
	.my .info .info_down{
		display: flex;
		flex: 1;
	}
	.my .info .info_down_left{
		font-size: 18px;
	}
	.my .info .info_down_left em{
		color: #eef1f5;
		margin-left: 10px;
	}
	.my .info .info_down_right{
		
	}
	
	.my .info .info_down .message{
		display: flex;
		flex-direction: column;
		width: 60%;
	}
	.dialog {
	    box-shadow: #eef1f5 0 0 10px inset;
	    padding: 0 20px 10px 20px;
	    background: #f5fffa;
		height: 60%;
		max-height: 242px;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
	}
	.dialog .time{
		padding: 15px 0;
		text-align: center;
	}
	.chat_l {
	    display: -webkit-flex;
	    display: flex;
	    margin-bottom: 15px;
	}
	.chat_l .img img, .chat_r .img img {
	    width: 50px;
	    height: 50px;
	    border-radius: 50px;
	    display: block;
	}
	.chat_l .txt {
	    margin-left: 20px;
	    padding-right: 160px;
		padding-top: 5px;
		display: flex;
		flex-direction: column;
	}
	.chat_l .nr {
	    background: #f3f3f3;
	}
	
	.dialog .nr {
		display: flex;
		flex-direction: row;
	    padding: 10px 15px;
	    position: relative;
	    border-radius: 5px;
	}
	.chat_l .nr:before {
	    content: '';
	    position: absolute;
	    width: 10px;
	    height: 10px;
	    background: #f3f3f3;
	    left: -4px;
	    top: 16px;
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
	}
	
	.chat_r {
	    display: -webkit-flex;
	    display: flex;
	    -webkit-flex-direction: row-reverse;
	    flex-direction: row-reverse;
	    margin-bottom: 15px;
	}
	.chat_r .txt {
	    margin-right: 20px;
	    -webkit-box-pack: end;
	    box-pack: end;
	    padding-left: 70px;
	}
	.chat_r .nr {
	    background: #ffebc6;
	}
	.dialog .nr {
	    padding: 10px 15px;
	    position: relative;
	    border-radius: 5px;
	    display: inline-block;
	    word-wrap: break-word;
	    white-space: normal;
	    word-break: break-all;
	}
	.chat_r .nr:before {
	    content: '';
	    position: absolute;
	    width: 10px;
	    height: 10px;
	    background: #ffebc6;
	    right: -4px;
	    top: 16px;
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
	}
	
	.dialog-text {
	    border-top: #eef1f5 solid 1px;
	    padding: 20px;
		height: 40%;
		display: flex;
		flex-direction: column;
	}
	.dialog-text_top {
	    margin-bottom: 5px;
		display: flex;
		flex-direction: row;
	}
	.dialog-text_top li {
	    height: 25px;
	    font-size: 18px;
	    line-height: 25px;
	    cursor: pointer;
	    text-align: center;
	    margin-right: 10px;
	}
	
	.dialog-text textarea {
	    resize: none;
	    height: 80px;
	    outline: none;
	    border: 0;
	    margin: 0;
	    margin-bottom: 5px;
	    display: block;
	    width: 100%;
	    font-size: 14px;
		padding: 0;
	}
	.dialog-text .bottom {
		display: flex;
		flex-direction: row;
		flex: 1;
	    height: 37px;
		justify-content: flex-end;
	}
	
	.am-btn-success {
	    color: #fff;
	    background-color: #f96332;
	    border-color: #f96332;
	}
	.am-btn {
	    display: inline-block;
	    margin-bottom: 0;
	    padding: 0.5em 1em;
	    vertical-align: middle;
	    font-size: 1.6rem;
	    font-weight: normal;
	    line-height: 1.2;
	    text-align: center;
	    outline: none;
	    white-space: nowrap;
	    background-image: none;
	    border: 1px solid transparent;
	    border-radius: 3px;
	    cursor: pointer;
	    outline: none;
	    -webkit-appearance: none;
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	    -webkit-transition: background-color 300ms ease-out, border-color 300ms ease-out;
	    transition: background-color 300ms ease-out, border-color 300ms ease-out;
	}
	
	.my .info .info_down .detail{
		display: flex;
		width: 40%;
		border-left: #eef1f5 solid 1px;
	}
</style>

<div class="chat_iframe">
	<div class="top">
		<div class="top_left"><div class="image"></div><em>在线客服 / </em><span>Online customer service<span></div>
		<div class="top_right">122112</div>
	</div>
	<div class="down">
		<div class="nav">
			<div class="li hover">
				<div class="icon1"></div>
				<span>等待中</span>
			</div>
			<div class="li hover">
				<div class="icon2"></div>
				<span>我的</span>
			</div>
			<div class="li hover">
				<div class="icon3"></div>
				<span>历史</span>
			</div>
			<div class="li">
				<div class="icon4"></div>
				<span>未完善</span>
			</div>
			<div class="li">
				<i>99</i>
				<div class="icon5"></div>
				<span>知识库</span>
			</div>

		</div>
		<div class="nav_content">
			<div class="my">
				<div class="users">
					<ul>
						<li class="hover">
							<div class="li_left"><img src="/images/user.jpg"></div>
							<div class="li_right">
								<div class="li_right_name"><i>菲菲飞哪儿</i><em>微信</em></div>
								<i class="li_right_tip">您好请问方便问一下您...</i>
								<i class="time">下午13:39</i>
							</div>
							<div class="news-number">99</div>
						</li>
						
					</ul>
				</div>
				<div class="info">
					<div class="info_top">
						<div class="info_down_left">昵称(小丑鱼) <em>|</em> <em>微信</em></div>
						<div class="info_down_right">2222</div>
					</div>
					<div class="info_down">
						<div class="message">
							<div class="dialog" id="chatContent">
								
								<div class="time color-999 text-c" data-msg="0">17:01</div>
									<div class="chat_l">
										<div class="img">
											<img src="http://jgworkstation.qingerai.com:8080/group1/M00/04/1A/rBiMVl7wUSuAFpOpAAAQewIs-yk635.jpg" class="wet_1">
										</div>
										<div class="txt">
											<div class="nr">
												<div id="content_div_5870">们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你</div>
											</div>
									</div>
								</div>
								
								<div class="time color-999 text-c" data-msg="0">17:01</div>
									<div class="chat_r">
										<div class="img">
											<img src="http://jgworkstation.qingerai.com:8080/group1/M00/04/1A/rBiMVl7wUSuAFpOpAAAQewIs-yk635.jpg" class="wet_1">
										</div>
										<div class="txt">
											<div class="nr">
												<div id="content_div_5870">们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你你们都你们都你们都你们都你</div>
											</div>
									</div>
								</div>
								
							</div>
							
							<div class="dialog-text">
								<ul class="dialog-text_top">
								                    <li title="发送图片" class="iconfont" id="file_img_btn">&#xe65a;</li>
								                    <li title="发送视频" class="iconfont" id="file_video_btn">&#xe631;</li>
								                    <li title="推送量表" class="iconfont" id="push_module_btn">&#xe60d;</li>
								                    <li title="发起视频" class="iconfont" id="initiate_video">&#xe7a4;</li>
								</ul>
								<textarea placeholder="回复内容" id="myContent"></textarea>
								<div class="bottom">
									<button type="submit" onclick="sub_btn()" id="fs" class="am-btn am-btn-success float-r">发送</button>
								</div>
							</div>
						</div>
						<div class="detail">detail</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	$(document).ready(function () {

		var navHeight = $('.down').outerHeight(true); 
		$('.my>.users').height(navHeight);
		
		var dialogHeight = $('.dialog').height(); 
		$('.dialog').css('max-height', dialogHeight);
	})
</script>