body{ margin: 0; padding: 0; } :focus { outline: 0 } ::-webkit-scrollbar-track{background-color:transparent;} ::-webkit-scrollbar{width:5px;background-color:transparent;} ::-webkit-scrollbar-thumb{background-color:#b8b8b8;border-radius:15px;} .chat_room { width: 700px; height: 595px; border: 1px solid #cacaca; /* border-radius: 4px; */ margin: auto; margin-top: 50px; position: relative; } .chat_room>.list { width: 160px; height: 100%; float: left; border-right: 1px solid #e7e7e7; } .chat_room .list .list_1{ box-sizing: border-box; padding: 8px; display: inline-block; width: 100%; position: relative; } .chat_room .list .on{ background: #e8e8e8; } .chat_room .list .list_1:hover{ background: #e8e8e8; } .chat_room .list .img {width: 38px;background: #ddd;float: left;height: 38px;border-radius: 55px;overflow: hidden;cursor: pointer;} .chat_room .list .img img{ width: 100%; height: 100%; } .chat_room .list .title {font-size: 14px;text-indent: 9px;color: #353535;} .chat_room .list .info {font-size: 12px;color: #8f8f8f;text-indent: 13px;padding-top: 2px;} .chat_room>.content { float: right; width: calc(100% - 161px); height: 75%; border-bottom: 1px solid #e6e6e6; overflow: auto; position: absolute; right: 0; background: #fff; } .chat_room .input { float: left; width: calc(100% - 161px); height: 25%; position: absolute; bottom: 0; right: 0; } .chat_room .input .input_content{ width:100%; height: 66%; padding: 8px; box-sizing: border-box; overflow: overlay; margin-top: 4px; border: 0; display: block; resize: none; } .chat_room .input input { position: absolute; bottom: 15px; right: 15px; border: 0; border-radius: 2px; padding: 4px 11px; color: #fff; cursor: pointer; background: rgb(38,131,245); } .chat_room .content .me{ display: inline-block; padding: 13px 12px; box-sizing: border-box; position: relative; width: 100%; } .chat_room .content .me .img{ width: 39px; height: 39px; background: #ddd; border-radius: 55px; float: right; cursor: pointer; overflow: hidden; } .chat_room .content .me .img img{ width: 100%; height: 100%; } .chat_room .content .me p.name{ float: right; margin: -2px 9px 0 0; color: #2d2d2d; font-size: 15px; max-width: 150px; overflow: hidden; word-break: keep-all; } .chat_room .content .me p.content{ float: right; border: 0; margin: -18px 49px 0 0; width: auto; max-width: 61%; height: auto; text-align: left; word-wrap: break-word; background: rgb(38,131,245); border-radius: 9px; box-sizing: border-box; padding: 9px 17px; color: #f4f4f4; } .chat_room .content .me p.content span{ display: block; clear: both; width: 100%; text-align: right; color: #f4f4f4; margin-top: 8px; font-size: 13px; } .chat_room .content .other{ display: inline-block; padding: 13px 12px; box-sizing: border-box; position: relative; width: 100%; } .chat_room .content .other .img{ width: 39px; height: 39px; background: #ddd; border-radius: 55px; float: left; cursor: pointer; overflow: hidden; } .chat_room .content .other .img img{ width: 100%; height: 100%; } .chat_room .content .other p.name{ float: left; margin: -2px 0px 0 10px; color: #2d2d2d; font-size: 15px; max-width: 150px; overflow: hidden; word-break: keep-all; } .chat_room .content .other p.content{ float: left; border: 0; margin: -18px 9px 0 49px; width: auto; max-width: 61%; height: auto; text-align: left; word-wrap: break-word; background: rgb(38,131,245); border-radius: 9px; box-sizing: border-box; padding: 9px 17px; color: #f4f4f4; } .chat_room .content .other p.content span{ display: block; clear: both; width: 100%; text-align: left; color: #f4f4f4; margin-top: 8px; font-size: 13px; } .setting{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.67); } .setting .setting_main{ width: 471px; height: 290px; background: #fff; margin: auto; position: relative; top: 20%; border-radius: 7px; box-sizing: border-box; padding: 16px; } .setting .setting_main .img{ width: 90px; height: 90px; background: #ddd; border-radius: 50%; margin: auto; margin-top: 10px; overflow: hidden; cursor: pointer; position: relative; } .setting .setting_main .img:hover span{ opacity: 1; } .setting .setting_main .img img{ width: 100%; height: 100%; } .setting .setting_main .img span{ font-size: 13px; display: block; color: #2b2929; transition: 0.3s; position: absolute; top: 32px; width: 100%; opacity: 1; text-align: center; } .setting .setting_main .info{ margin-top: 28px; text-align: center; } .setting .setting_main .info span{ margin-right: 10px; } .setting .setting_main .info input{ width: 150px; height: 25px; border: 1px solid #000; text-indent: 7px; } .setting .setting_main .ok{ width: 248px; height: 39px; display: block; border: 1px solid #333333; color: #616266; margin: auto; cursor: pointer; background: #fff; margin-top: 20px; } .prompt{ font-size: 55px; color: #f00; position: absolute; top: -45px; right: 8px; } .chat_room .user_list{ position: absolute; top: -1px; right: -154px; width: 152px; height: 65%; box-sizing: border-box; /* padding: 5px 10px; */ background: #eee; } .chat_room .user_list .title{ padding: 10px 10px; } .chat_room .user_list .list{ width: 100%; height: calc(100% - 41px); overflow: auto; }