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: 100%; /*width: 900px;*/ /*height: 100%;*/ height: 450px; overflow: hidden; border-radius: 3px; } .chat_left,.chat_sidebar{ float: left; } .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; height: 100%; } .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.actives ,.chat_left li.actives{ background-color: hsla(0,0%,100%,.1); } .chat_sidebar_list li.actives:hover ,.chat_left li.actives: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{ /*overflow-y: scroll;*/ /*height: calc(100% - 195px);*/ height: 300px; /*margin-top: 2pc;*/ /*padding-top: 35px;*/ } .chat_person{ position: absolute; width: 100%; top: 0; left: 0; height: 35px; line-height: 35px; border-bottom: 1px solid #ddd; background: #fff; z-index: 1000; } .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% - 108px); 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: 150px; border-top: 1px solid #ddd; background: #fff; } .main_sendMessage textarea{ padding: 10px; height: 55%; width: 98%; 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; } /*聊天区域结束*/