JiYuan12345_WEB/WebUI/CallCenterWe.../css/chat.css

		body{
				color: #4d4d4d;
			    font: 14px/1.4em 'Helvetica Neue', Helvetica, 'Microsoft Yahei', Arial, sans-serif;
			    background: #f5f5f5 url(img/chat_bg.jpg) no-repeat center;
			    background-size: cover;
			}
			ul,li{
				list-style: none;
				margin: 0;
				padding: 0;
			}
			
			#chat{
				margin: 20px auto;
			    width: 900px;
			    height: 600px;
			    overflow: hidden;
    			border-radius: 3px;
    			position: absolute;
			    z-index: 10000;
			    right: 200px;
			    top: 20%;
			    display: none;
			    box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);
			}
			.chat_left,.chat_sidebar{
					float: left;s
			}
			.chat_left ul li{
				    /*padding: 9pt 15px;*/
				   padding: 10px 10px;
				    border-bottom: 1px solid #292c33;
				    cursor: pointer;
				    color: #f4f4f4;
			}
			.chat_left ul li .chat_name{
				margin: 0;
			}
			.chat_sidebar{
			    width: 200px;
			    color: #f4f4f4;
			    background-color: #2e3238;
			}
			#chat .chat_left,#chat .chat_main, #chat .chat_sidebar,.message_mincon{
				    height: 100%;
			}
			#chat .chat_main ,.message_mincon{
			    position: relative;
			    /*overflow: hidden;*/
			    background-color: #eee;
			}
			.ver_middle{
				vertical-align: middle;
			}
			#chat .chat_left{
				width: 70px;
			    background: #2f3339;
			    border-right: 1px solid #292c33;
			}
			
			/*chat_sidebar开始*/
			.pic_card{
			    padding: 9pt;
			    border-bottom: 1px solid #24272c;
			}
			.chat_name{
				display: inline-block;
			    margin: 0 0 0 15px;
			    font-size: 1pc;
			    vertical-align: middle;
			    font-size: 14px;
			}
			.chat_sidebar_foot{
				margin-top: 10px;
			}
			.sidebar_foot_seach{
				padding: 0 10px;
			    width: 100%;
			    font-size: 9pt;
			    color: #fff;
			    height: 30px;
			    line-height: 30px;
			    border: 1px solid #3a3a3a;
			    border-radius: 4px;
			    outline: 0;
			    background-color: #26292e;
			}
			.chat_sidebar_list{
				height: 495px;
   				overflow-y: auto;
			}
			.chat_sidebar_list li{
				/*padding: 9pt 15px;*/
				padding: 4pt 15px;
			    border-bottom: 1px solid #292c33;
			    cursor: pointer;
			    -webkit-transition: background-color .1s;
			    transition: background-color .1s;
			    position: relative;
			}
			.chat_sidebar_list li.activess ,.chat_left li.activess{
			    background-color: hsla(0,0%,100%,.1);
			}
			.chat_sidebar_list li.activess .pieHide,.chat_sidebar_list li.activess .pieShow{
				display: none!important;
			}
			.chat_sidebar_list li .pieShow{
				display: block!important;
			}
			.chat_sidebar_list li.activess:hover ,.chat_left li.activess:hover{
			    background-color: hsla(0,0%,100%,.1);
			}
			.chat_sidebar_list li:hover ,.chat_left li:hover{
				    background-color: hsla(0,0%,100%,.03);
				}
		/*chat_sidebar结束*/
		/*聊天区域开始*/
		.message_count{
			display: inline-block;
			position: absolute;
			right: 0;
			border-radius: 50%;
			background: red;
			color: #fff;
		}
		.disnone{
			display: none;
		}
		.main_message{
		 height: calc(100% - 160px);
		}
		.chat_person{
			      position: absolute;
			    width: 100%;
			    top: 0;
			    left: 0;
			    height: 2pc;
			    line-height: 2pc;
			    border-bottom: 1px solid #ddd;
			    background: #fff;
		}
		.main_message li{
			margin-bottom: 15px;
		}
		.main_message .message_time{
			    margin: 7px 0;
   			 text-align: center;
		}
		.main_message .ver_middle{
			    float: left;
			    margin: 0 10px 0 0;
			    border-radius: 3px;
		}
		.main_message .message_text{
			    display: inline-block;
			    position: relative;
			    padding: 0 10px;
			    max-width: calc(100% - 40px);
			    min-height: 30px;
			    line-height: 2.5;
			    font-size: 9pt;
			    text-align: left;
			    word-break: break-all;
			    background-color: #fafafa;
			    border-radius: 4px;
		}
		.main_message .message_text:before{
			content: " ";
		    position: absolute;
		    top: 9px;
		    right: 100%;
		    border: 6px solid transparent;
		    border-right-color: #fafafa;
		}
		.main_message .self {
			    text-align: right;
			    }
	   .main_message .self .ver_middle {
	    	float: right;
			margin: 0 0 0 10px;
	    }
		.main_message .self .message_text {
			    background-color: #b2e281;
				}
		.main_message .self .message_text:before {
			    right: inherit;
			    left: 100%;
			    border-right-color: transparent;
			    border-left-color: #b2e281;
			    }
		
		.main_sendMessage{
			    position: absolute;
			    width: 100%;
			    bottom: 0;
			    left: 0;
			    height: 10pc;
  				 border-top: 1px solid #ddd;
  				 background: #fff;
		}
		.main_sendMessage textarea{
			    padding: 10px;
			    height: 80%;
			    width: 100%;
			    border: none;
			    outline: 0;
			    font-family: Micrsofot Yahei;
			    resize: none;
		}
		.main_sendMessage .send_btn{
			height: 20%;
			text-align: right;
			color: #4d4d4d;
			    padding-right: 20px;
		}
		.main_sendMessage .send_btn button{
			border: 1px solid #ccc;
			background: #fff;
			outline: none;
		}
		.main_sendMessage .send_btn button:hover{
			background: #b2e281;
		}
		
		/*聊天区域结束*/

/*后来添加改变的*/
	.more {
				display: block;
				text-align: center;
			}
			
			.more:hover {
				text-decoration: underline;
			}
			.tabMain{
				display: none;
				height: 100%;
			}
			.tabMain.activess{
				display: block!important;
			}
			.notice{
				display: block;
				text-align: center;
				color: red;
			}
			.chatlist_con{
				overflow-y: auto;
				width: 100%;
				height: 100%;
				padding: 20px 9px;
   				box-sizing: border-box;
			}
			.chat_main{
				float: left;
   				width: 700px;
			}
			.closeds{
				position: absolute;
				right: 10px;
   				top: 33%;
   				display: none;
			}
			.pie{
				position: absolute;
				right: 30px;
   				top: 33%;
   				display: none;
			}
			.sidebar_list li{
				position: relative;
			}
			.sidebar_list li:hover .closeds{
				display: block;
			}
			.sidebar_list li .closeds:hover{
				color: red;
			}