diff --git a/static/css/common.css b/static/css/common.css index 08505c5..d9085c3 100644 --- a/static/css/common.css +++ b/static/css/common.css @@ -285,10 +285,12 @@ text-align: left; position: relative; margin-bottom: 105px; + background: rgb(245,245,245); } .chatBox{ /*overflow-y: auto;*/ overflow-x: hidden; + background: rgb(245,245,245); /*margin-bottom: 80px;*/ } .chatVisitorPage .chatBox{ @@ -304,9 +306,9 @@ text-align: left; } .chatContent{ - background-color: rgb(166,212,242); + background-color: rgb(255,255,255); color: #000; - border: 1px solid rgb(152, 199, 230); + border: 1px solid rgb(237,237,237); padding: 8px 15px; word-break: break-all; position: relative; @@ -315,25 +317,42 @@ margin-left: 6px; } .chatContent a{color: #07a9fe;text-decoration: none;} -.chatContent:after { - content: ''; +.chatContent:before,.chatContent:after { + content: ""; + display: block; position: absolute; - left: -10px; - top: 13px; - width: 0; + width:0; height: 0; - border-style: dashed; - border-color: transparent; - overflow: hidden; - border-width: 10px; - border-top-style: solid; - border-top-color: rgb(166,212,242); + border: 6px solid transparent; + border-right-color: rgba(255,255,255,1); + left: -11px; + top: 10px; + z-index:1; } +.chatContent:after { + left: -12px; + border-right-color: rgb(237,237,237); + z-index:0; +} +/*.chatContent:after {*/ +/* content: '';*/ +/* position: absolute;*/ +/* left: -10px;*/ +/* top: 13px;*/ +/* width: 0;*/ +/* height: 0;*/ +/* border-style: dashed;*/ +/* border-color: transparent;*/ +/* overflow: hidden;*/ +/* border-width: 10px;*/ +/* border-top-style: solid;*/ +/* border-top-color: rgb(255,255,255);*/ +/*}*/ .chatBoxMe .chatContent{float: right;background-color: rgb(152,225,101);border: 1px solid rgb(145, 215, 96);} -.chatBoxMe .chatContent:after{border-top-color: rgb(152,225,101);} +.chatBoxMe .chatContent:after{border-left-color: rgba(152,225,101,1);border-right:none;left:auto;right: -5px;} +.chatBoxMe .chatContent:before{border-left-color: rgb(152,225,101);border-right:none;right: -5px;left: auto;} .chatBoxMe .el-col-3{float: right;text-align: right;} .chatBoxMe .chatUser{text-align: right} -.chatBoxMe .chatContent:after{left:auto;right: -10px;} .chatArea{float: left;width: 85%;margin: 4px 0 0 4px;} .chatArea .el-textarea__inner{padding: 1px 5px} .btnArea{width: 10%;float: right;} @@ -345,7 +364,7 @@ } .chatTitle{height: 30px;line-height: 30px;color: #1989fa} -.chatBoxSend{background: #f5f5f5;position: fixed;bottom: 0px;width: 100%;height: 105px;max-width: 800px;} +.chatBoxSend{background: #fff;position: fixed;bottom: 0px;width: 100%;height: 105px;max-width: 800px;z-index: 99;} .chatBoxSendBtn{float: right;margin: 12px 4px 0 0;} .footContact{text-align: center;} .footContact a{font-size: 12px;color: #999;text-decoration: none;} diff --git a/static/html/chat_main.html b/static/html/chat_main.html index c3d7c80..408cb39 100644 --- a/static/html/chat_main.html +++ b/static/html/chat_main.html @@ -25,37 +25,8 @@ white-space: nowrap; color: #999; } - .chatContent{ - text-align: left; - background-color: rgb(166,212,242); - color: #000; - border: 1px solid rgb(152, 199, 230); - padding: 8px 15px; - min-height: 26px; - word-break: break-all; - position: relative; - border-radius: 5px; - display: inline-block; - } - .chatContent:after { - content: ''; - position: absolute; - left: -10px; - top: 13px; - width: 0; - height: 0; - border-style: dashed; - border-color: transparent; - overflow: hidden; - border-width: 10px; - border-top-style: solid; - border-top-color: rgb(166,212,242); - } - .chatBoxMe .chatContent{float: right;background-color: rgb(152,225,101);border: 1px solid rgb(145, 215, 96);} - .chatBoxMe .chatContent:after{border-top-color: rgb(152,225,101);} .chatBoxMe .el-col-3{float: right;text-align: right;} .chatBoxMe .chatUser{text-align: right} - .chatBoxMe .chatContent:after{left:auto;right: -10px;} .chatBox{height: 340px;overflow-y: auto;overflow-x: hidden;} .chatTime{text-align: center;color: #bbb;margin: 5px 0;font-size: 12px;} .funcBtns{margin: 2px 0px;color: #7f7f7f;border-bottom: 1px solid #e6e6e6;font-size: 12px;padding: 5px 0px;}