修改样式

pull/23/head
taoshihan1991 4 years ago
parent b30d699480
commit d5453ea58c

@ -285,10 +285,12 @@
text-align: left; text-align: left;
position: relative; position: relative;
margin-bottom: 105px; margin-bottom: 105px;
background: rgb(245,245,245);
} }
.chatBox{ .chatBox{
/*overflow-y: auto;*/ /*overflow-y: auto;*/
overflow-x: hidden; overflow-x: hidden;
background: rgb(245,245,245);
/*margin-bottom: 80px;*/ /*margin-bottom: 80px;*/
} }
.chatVisitorPage .chatBox{ .chatVisitorPage .chatBox{
@ -304,9 +306,9 @@
text-align: left; text-align: left;
} }
.chatContent{ .chatContent{
background-color: rgb(166,212,242); background-color: rgb(255,255,255);
color: #000; color: #000;
border: 1px solid rgb(152, 199, 230); border: 1px solid rgb(237,237,237);
padding: 8px 15px; padding: 8px 15px;
word-break: break-all; word-break: break-all;
position: relative; position: relative;
@ -315,25 +317,42 @@
margin-left: 6px; margin-left: 6px;
} }
.chatContent a{color: #07a9fe;text-decoration: none;} .chatContent a{color: #07a9fe;text-decoration: none;}
.chatContent:after { .chatContent:before,.chatContent:after {
content: ''; content: "";
display: block;
position: absolute; position: absolute;
left: -10px; width:0;
top: 13px;
width: 0;
height: 0; height: 0;
border-style: dashed; border: 6px solid transparent;
border-color: transparent; border-right-color: rgba(255,255,255,1);
overflow: hidden; left: -11px;
border-width: 10px; top: 10px;
border-top-style: solid; z-index:1;
border-top-color: rgb(166,212,242);
} }
.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{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 .el-col-3{float: right;text-align: right;}
.chatBoxMe .chatUser{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{float: left;width: 85%;margin: 4px 0 0 4px;}
.chatArea .el-textarea__inner{padding: 1px 5px} .chatArea .el-textarea__inner{padding: 1px 5px}
.btnArea{width: 10%;float: right;} .btnArea{width: 10%;float: right;}
@ -345,7 +364,7 @@
} }
.chatTitle{height: 30px;line-height: 30px;color: #1989fa} .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;} .chatBoxSendBtn{float: right;margin: 12px 4px 0 0;}
.footContact{text-align: center;} .footContact{text-align: center;}
.footContact a{font-size: 12px;color: #999;text-decoration: none;} .footContact a{font-size: 12px;color: #999;text-decoration: none;}

@ -25,37 +25,8 @@
white-space: nowrap; white-space: nowrap;
color: #999; 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 .el-col-3{float: right;text-align: right;}
.chatBoxMe .chatUser{text-align: right} .chatBoxMe .chatUser{text-align: right}
.chatBoxMe .chatContent:after{left:auto;right: -10px;}
.chatBox{height: 340px;overflow-y: auto;overflow-x: hidden;} .chatBox{height: 340px;overflow-y: auto;overflow-x: hidden;}
.chatTime{text-align: center;color: #bbb;margin: 5px 0;font-size: 12px;} .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;} .funcBtns{margin: 2px 0px;color: #7f7f7f;border-bottom: 1px solid #e6e6e6;font-size: 12px;padding: 5px 0px;}

Loading…
Cancel
Save