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; }