.consulting-panel{ height: calc(100% - 150px); } .input-panel{ height: 150px; position: relative; } .mtb6{ margin-top: 6px; margin-bottom: 6px; } p{ margin-top: 6px; margin-bottom: 6px; } .c-chat-box { border: none; padding-left: 2%; padding-right: 2%; } .time-tips { margin: 10px 0 0 0; text-align: center; clear: both; } .time-tips span { position: relative; display: inline-block; padding: 0 60px; color: #aeaeae; font-size: 15px; } .time-tips span:before, .time-tips span:after { position: absolute; content: ""; display: block; width: 50px; height: 1px; background: #e6e4e1; top: 50%; } .time-tips span:before { left: 0; } .time-tips span:after { right: 0; } .chat-left, .chat-right { clear: both; overflow: hidden; padding: 10px 0; } .chat-left > dt, .chat-right > dt { width: 40px; height: 40px; } .chat-left > dt { float: left; margin-right: 15px; } .chat-right > dt { float: right; margin-left: 15px; } .chat-left > dt img, .chat-right > dt img { width: 40px; height: 40px; border-radius: 50%; } .chat-left > dd, .chat-right > dd { position: relative; min-height: 18px; font-size: 15px; display: inline-block; max-width: 80%; background: #fff; border: 1px solid #e1e1e1; border-radius: 6px; padding: 8px 10px; box-shadow: 1px 1px 1px rgba(0, 0, 0, .1); } .chat-left > dd { float: left; /* white-space: pre-wrap; */ word-wrap: break-word; } .chat-right > dd { float: right; background: #bce0ff; border: 1px solid #81bdf7; /* white-space: pre-wrap; */ word-wrap: break-word; } .chat-left > dd:after { content: ""; position: absolute; top: 14px; left: -6px; display: block; width: 8px; height: 8px; background: #fff; border-color: #e1e1e1; border-style: solid; border-width: 1px 0 0 1px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .chat-right > dd:after { content: ""; position: absolute; top: 14px; right: -6px; display: block; width: 8px; height: 8px; background: #bce0ff; border-color: #81bdf7; border-style: solid; border-width: 1px 0 0 1px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); } .chat-left > dd p img, .chat-right > dd p img { max-width: 150px; max-height: 150px; margin: 5px 0; } .chat-msg-box { bottom: 0; left: 0 } .chat-msg-box .input-group .form-control { height: 32px; } .pull-more { text-align: center; color: #5b5b5b; font-size: 14px; padding: 14px 0; } .chat-right .word-bread.sys-msg{ background-color: #fff; } .chat-right .word-bread.sys-msg:after{ background-color: #fff; border-color: #17b3ec; } .chat-left .word-bread.sys-msg{ background-color: #fff; border-color: #17b3ec; } .chat-left .word-bread.sys-msg:after{ background-color: #fff; border-color: #17b3ec; } .sys-header{ display: inline-block; background-color: #17b3ec; height: 28px; line-height: 28px; padding: 0 10px; border-radius: 14px; color: #fff } .sys-header img{ vertical-align: middle; margin-right: 5px; } .time-tips span{ padding: 2px 10px; border-radius: 15px; color: #aaa; /*background-color: #E1E1E1;*/ font-size: 12px; } .time-tips .xt-xiaoxi{ background-color: #e1e1e1; } .chat-left, .chat-right { display: -webkit-box; clear: both; overflow: hidden; padding: 10px 0; } .chat-right{ -webkit-box-direction: reverse; } .chat-left > dt{ float: none; } .chat-right > dt { float: none; } .chat-right .word-bread{ text-align: left; /*float: right;*/ background: #17b3ec; border: 1px solid #17b3ec; /* white-space: pre-wrap; */ word-wrap: break-word; position: relative; min-height: 18px; font-size: 15px; display: inline-block; max-width: 80%; border-radius: 6px; padding: 8px 10px; box-shadow: 1px 1px 1px rgba(0, 0, 0, .1); } .chat-right > div.c-content{ -webkit-box-flex: 1; text-align: right; } .chat-right .word-bread:after{ content: ""; position: absolute; top: 5px; right: -5px; display: block; width: 8px; height: 8px; background: #17b3ec; border-color: #17b3ec; border-style: solid; border-width: 1px 0 0 1px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); } .chat-left .word-bread{ /*float: left;*/ /* white-space: pre-wrap; */ word-wrap: break-word; position: relative; min-height: 18px; font-size: 15px; display: inline-block; max-width: 80%; background: #fff; border: 1px solid #e1e1e1; border-radius: 6px; padding: 8px 10px; box-shadow: 1px 1px 1px rgba(0, 0, 0, .1); } .chat-left > div.c-content{ -webkit-box-flex: 1; text-align: left; } .chat-left .word-bread:after{ content: ""; position: absolute; top: 5px; left: -5px; display: block; width: 8px; height: 8px; background: #fff; border-color: #e1e1e1; border-style: solid; border-width: 1px 0 0 1px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .chat-left span.name, .chat-right span.name{ display: block; height: 24px; } .time-tips span:before, .time-tips span:after{ height: 0!important; } .action-panel{ background-color: #F5F5FA; height: 30px; line-height: 30px; padding-left: 20px; padding-right: 20px; } .action-panel i{ font-size: 18px; } .send-btn{ background-color: #12b7f5; color: #fff; border: 1px solid #12b7f5; position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; } .send-btn.disabled, .send-btn.disabled:hover { border: 1px solid #e7eaec; background-color: #f2f4f6; color: #ccc; } .input-msg{ width: 100%; line-height: 22px; overflow-x: hidden; overflow-y: auto; height: 76px; padding: 5px 10px; font-size: 14px; -webkit-user-select: auto; user-modify: read-write-plaintext-only; -webkit-user-modify: read-write-plaintext-only } .info-panel{ height: 26px; line-height: 26px; font-size: 12px; color: #666; text-align: center; background-color: #fafaeb; } .info-panel a{ color: #12b7f5; } .diseaseInfo{ font-size: 12px; color: #999; background-color: #f5f5fa; display: inline-block; padding: 5px 12px; border-radius: 14px; margin-top: 10px; margin-bottom: 10px; } .status-btn{ display: inline-block; height: 30px; border: 1px solid #12b7f5; line-height: 30px; padding: 0 12px; border-radius: 2px; color: #12b7f5; margin-top: 10px; }